Tilt Card

1"use client";
2 
3import { ComponentProps, useRef } from "react";
4 
5import { useGSAP } from "@gsap/react";
6import gsap from "gsap";
7 
8import { cn } from "@/lib/utils";
9 
10type TiltCardProps = {
11    maxTilt?: number;
12    highlightClassName?: string;
13    wrapperClassName?: string;
14} & ComponentProps<"div">;
15 
16export const TiltCard = ({
17    children,
18    highlightClassName,
19    className,
20    wrapperClassName,
21    maxTilt = 10,
22    ...props
23}: TiltCardProps) => {
24    const containerRef = useRef<HTMLDivElement | null>(null);
25    const cardRef = useRef<HTMLDivElement | null>(null);
26    const highlightRef = useRef<HTMLDivElement | null>(null);
27 
28    useGSAP(
29        () => {
30            const container = containerRef.current;
31            const card = cardRef.current;
32            const highlight = highlightRef.current;
33            if (!container || !card || !highlight) return;
34 
35            const handleMouseLeave = () => {
36                gsap.to(card, {
37                    rotateX: 0,
38                    rotateY: 0,
39                    duration: 0.6,
40                    ease: "power3.out",
41                });
42            };
43 
44            const handleMouseMove = (e: MouseEvent) => {
45                const bounds = card.getBoundingClientRect();
46                const offsetX = e.clientX - bounds.left;
47                const offsetY = e.clientY - bounds.top;
48                const centerX = bounds.width / 2;
49                const centerY = bounds.height / 2;
50                const percentX = (offsetX - centerX) / centerX;
51                const percentY = (offsetY - centerY) / centerY;
52 
53                gsap.to(card, {
54                    rotateY: percentX * maxTilt,
55                    rotateX: -percentY * maxTilt,
56                    duration: 0.3,
57                    ease: "power3.out",
58                });
59                gsap.to(highlight, {
60                    left: bounds.width - offsetX + "px",
61                    top: bounds.height - offsetY + "px",
62                    duration: 0.3,
63                    ease: "power3.out",
64                });
65            };
66 
67            container.addEventListener("mousemove", handleMouseMove);
68            container.addEventListener("mouseleave", handleMouseLeave);
69 
70            return () => {
71                container.removeEventListener("mousemove", handleMouseMove);
72                container.removeEventListener("mouseleave", handleMouseLeave);
73            };
74        },
75        { scope: containerRef },
76    );
77 
78    return (
79// … truncated