Perspective Tilt

1"use client";
2 
3import * as React from "react";
4import { AnimatePresence, motion } from "motion/react";
5 
6import { cn } from "@/lib/utils";
7 
8type PerspectiveTiltContextType = {
9  /** Whether the dialog is currently open. */
10  open: boolean;
11  /** Function to update the open state. */
12  setOpen: (open: boolean) => void;
13};
14 
15const PerspectiveTiltContext =
16  React.createContext<PerspectiveTiltContextType | null>(null);
17 
18function usePerspectiveTilt() {
19  const context = React.useContext(PerspectiveTiltContext);
20  if (!context) {
21    throw new Error(
22      "PerspectiveTilt components must be wrapped in <PerspectiveTilt />"
23    );
24  }
25  return context;
26}
27 
28/** Hook to detect and respect the user's reduced motion system preference. */
29function useReducedMotion() {
30  const [prefersReducedMotion, setPrefersReducedMotion] = React.useState(false);
31 
32  React.useEffect(() => {
33    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
34    setPrefersReducedMotion(mediaQuery.matches);
35 
36    const handler = (event: MediaQueryListEvent) =>
37      setPrefersReducedMotion(event.matches);
38    mediaQuery.addEventListener("change", handler);
39    return () => mediaQuery.removeEventListener("change", handler);
40  }, []);
41 
42  return prefersReducedMotion;
43}
44 
45export interface PerspectiveTiltProps {
46  /** Controlled open state of the dialog. */
47  open?: boolean;
48  /** Callback fired when the open state changes. */
49  onOpenChange?: (open: boolean) => void;
50  /** Children nodes to render within the root. */
51  children: React.ReactNode;
52}
53 
54export function PerspectiveTilt({
55  open: controlledOpen,
56  onOpenChange,
57  children,
58}: PerspectiveTiltProps) {
59  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
60 
61  const open = controlledOpen ?? uncontrolledOpen;
62  const setOpen = React.useCallback(
63    (value: boolean) => {
64      if (controlledOpen === undefined) {
65        setUncontrolledOpen(value);
66      }
67      onOpenChange?.(value);
68    },
69    [controlledOpen, onOpenChange]
70  );
71 
72  return (
73    <PerspectiveTiltContext.Provider value={{ open, setOpen }}>
74      {children}
75    </PerspectiveTiltContext.Provider>
76  );
77}
78 
79export interface PerspectiveTiltTriggerProps {
80  /** Custom styling for the trigger element. */
81  className?: string;
82  /** Whether to merge props onto the child component. */
83  asChild?: boolean;
84  /** The element that triggers the dialog. */
85  children: React.ReactNode;
86}
87 
88export function PerspectiveTiltTrigger({
89  className,
90  asChild,
91// … truncated