Card Tilt

1'use client';
2 
3import * as React from 'react';
4import {
5  motion,
6  useMotionValue,
7  useSpring,
8  useTransform,
9  MotionValue,
10} from 'motion/react';
11import { cn } from '@/lib/utils';
12 
13interface CardTiltProps {
14  children: React.ReactNode;
15  className?: string;
16  tiltMaxAngle?: number;
17  tiltReverse?: boolean;
18  glareEnable?: boolean;
19  scale?: number;
20}
21 
22interface CardTiltContentProps {
23  children: React.ReactNode;
24  className?: string;
25}
26 
27const CardTiltContext = React.createContext<{
28  rotateX: MotionValue<number>;
29  rotateY: MotionValue<number>;
30  scale: MotionValue<number>;
31} | null>(null);
32 
33const CardTilt = React.forwardRef<HTMLDivElement, CardTiltProps>(
34  (
35    {
36      children,
37      className,
38      tiltMaxAngle = 15,
39      tiltReverse = false,
40      scale = 1.05,
41      ...props
42    },
43    forwardedRef,
44  ) => {
45    const containerRef = React.useRef<HTMLDivElement>(null);
46    const x = useMotionValue(0);
47    const y = useMotionValue(0);
48 
49    const mouseXSpring = useSpring(x, { stiffness: 300, damping: 30 });
50    const mouseYSpring = useSpring(y, { stiffness: 300, damping: 30 });
51 
52    const rotateX = useTransform(
53      mouseYSpring,
54      [-0.5, 0.5],
55      tiltReverse
56        ? [tiltMaxAngle, -tiltMaxAngle]
57        : [-tiltMaxAngle, tiltMaxAngle],
58    );
59    const rotateY = useTransform(
60      mouseXSpring,
61      [-0.5, 0.5],
62      tiltReverse
63        ? [-tiltMaxAngle, tiltMaxAngle]
64        : [tiltMaxAngle, -tiltMaxAngle],
65    );
66 
67    const scaleValue = useSpring(1, { stiffness: 300, damping: 30 });
68 
69    const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
70      if (!containerRef.current) return;
71 
72      const rect = containerRef.current.getBoundingClientRect();
73      const width = rect.width;
74      const height = rect.height;
75      const mouseX = e.clientX - rect.left;
76      const mouseY = e.clientY - rect.top;
77      const xPct = mouseX / width - 0.5;
78      const yPct = mouseY / height - 0.5;
79 
80      x.set(xPct);
81      y.set(yPct);
82      scaleValue.set(scale);
83    };
84 
85    const handleMouseLeave = () => {
86      x.set(0);
87      y.set(0);
88      scaleValue.set(1);
89    };
90 
91    React.useImperativeHandle(forwardedRef, () => containerRef.current!);
92 
93    return (
94      <CardTiltContext.Provider value={{ rotateX, rotateY, scale: scaleValue }}>
95        <div
96          ref={containerRef}
97          onMouseMove={handleMouseMove}
98          onMouseLeave={handleMouseLeave}
99          className={cn('relative inline-block', className)}
100// … truncated