Morphing Modal

1"use client";
2// beui.dev/components/motion/morphing-modal
3 
4import {
5  AnimatePresence,
6  motion,
7  useReducedMotion,
8} from "motion/react";
9import { type ReactNode, useEffect } from "react";
10import { EASE_OUT, SPRING_PANEL } from "@/lib/ease";
11import { cn } from "@/lib/utils";
12 
13export interface MorphingModalProps {
14  /** Which view is currently shown. `null` closes the modal. */
15  viewId: string | null;
16  onClose: () => void;
17  children: ReactNode;
18  /** "bottom" anchors to the viewport bottom (mobile-like). "center" centers vertically. */
19  placement?: "bottom" | "center";
20  className?: string;
21}
22 
23export function MorphingModal({
24  viewId,
25  onClose,
26  children,
27  placement = "bottom",
28  className,
29}: MorphingModalProps) {
30  const open = viewId !== null;
31  const reduce = useReducedMotion();
32  const enterY = reduce ? 0 : placement === "bottom" ? 40 : 20;
33  const enterScale = reduce ? 1 : 0.97;
34 
35  useEffect(() => {
36    if (!open) return;
37    const prev = document.body.style.overflow;
38    document.body.style.overflow = "hidden";
39    return () => {
40      document.body.style.overflow = prev;
41    };
42  }, [open]);
43 
44  return (
45    <div
46      aria-hidden={!open}
47      inert={!open}
48      className={cn(
49        "fixed inset-0 z-[80]",
50        open ? "pointer-events-auto" : "pointer-events-none",
51      )}
52    >
53      <motion.button
54        type="button"
55        aria-label="Close modal"
56        initial={false}
57        animate={{ opacity: open ? 1 : 0 }}
58        transition={{ duration: 0.2, ease: EASE_OUT }}
59        onClick={onClose}
60        className={cn(
61          "absolute inset-0 bg-background/5 [backdrop-filter:blur(14px)_saturate(140%)] [-webkit-backdrop-filter:blur(14px)_saturate(140%)]",
62          open ? "pointer-events-auto" : "pointer-events-none",
63        )}
64      />
65 
66      <div
67        className={cn(
68          "pointer-events-none absolute inset-0 flex justify-center px-4",
69          placement === "bottom" ? "items-end pb-8" : "items-center",
70        )}
71      >
72        <AnimatePresence initial={false}>
73          {open ? (
74            <motion.div
75              key="panel"
76              layout
77              initial={{ opacity: 0, y: enterY, scale: enterScale }}
78              animate={{ opacity: 1, y: 0, scale: 1 }}
79              exit={{
80                opacity: 0,
81                y: enterY,
82                scale: reduce ? 1 : 0.98,
83                transition: { duration: 0.18, ease: EASE_OUT },
84              }}
85              transition={SPRING_PANEL}
86// … truncated