Draggable Card

1"use client";
2import { cn } from "@/lib/utils";
3import React, { useRef, useState, useEffect } from "react";
4import {
5  motion,
6  useMotionValue,
7  useSpring,
8  useTransform,
9  animate,
10  useVelocity,
11  useAnimationControls,
12} from "motion/react";
13 
14export const DraggableCardBody = ({
15  className,
16  children,
17}: {
18  className?: string;
19  children?: React.ReactNode;
20}) => {
21  const mouseX = useMotionValue(0);
22  const mouseY = useMotionValue(0);
23  const cardRef = useRef<HTMLDivElement>(null);
24  const controls = useAnimationControls();
25  const [constraints, setConstraints] = useState({
26    top: 0,
27    left: 0,
28    right: 0,
29    bottom: 0,
30  });
31 
32  // physics biatch
33  const velocityX = useVelocity(mouseX);
34  const velocityY = useVelocity(mouseY);
35 
36  const springConfig = {
37    stiffness: 100,
38    damping: 20,
39    mass: 0.5,
40  };
41 
42  const rotateX = useSpring(
43    useTransform(mouseY, [-300, 300], [25, -25]),
44    springConfig,
45  );
46  const rotateY = useSpring(
47    useTransform(mouseX, [-300, 300], [-25, 25]),
48    springConfig,
49  );
50 
51  const opacity = useSpring(
52    useTransform(mouseX, [-300, 0, 300], [0.8, 1, 0.8]),
53    springConfig,
54  );
55 
56  const glareOpacity = useSpring(
57    useTransform(mouseX, [-300, 0, 300], [0.2, 0, 0.2]),
58    springConfig,
59  );
60 
61  useEffect(() => {
62    // Update constraints when component mounts or window resizes
63    const updateConstraints = () => {
64      if (typeof window !== "undefined") {
65        setConstraints({
66          top: -window.innerHeight / 2,
67          left: -window.innerWidth / 2,
68          right: window.innerWidth / 2,
69          bottom: window.innerHeight / 2,
70        });
71      }
72    };
73 
74    updateConstraints();
75 
76    // Add resize listener
77    window.addEventListener("resize", updateConstraints);
78 
79    // Clean up
80    return () => {
81      window.removeEventListener("resize", updateConstraints);
82    };
83  }, []);
84 
85  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
86    const { clientX, clientY } = e;
87    const { width, height, left, top } =
88      cardRef.current?.getBoundingClientRect() ?? {
89        width: 0,
90        height: 0,
91        left: 0,
92        top: 0,
93      };
94    const centerX = left + width / 2;
95    const centerY = top + height / 2;
96    const deltaX = clientX - centerX;
97    const deltaY = clientY - centerY;
98    mouseX.set(deltaX);
99    mouseY.set(deltaY);
100  };
101 
102  const handleMouseLeave = () => {
103    mouseX.set(0);
104    mouseY.set(0);
105  };
106 
107  return (
108    <motion.div
109      ref={cardRef}
110      drag
111// … truncated