Tilt Card

1"use client";
2 
3import { useRef, type ReactNode } from "react";
4import {
5  motion,
6  useMotionTemplate,
7  useMotionValue,
8  useReducedMotion,
9  useSpring,
10} from "motion/react";
11 
12interface TiltCardProps {
13  children: ReactNode;
14  /** Maximum rotation in degrees at the edges of the card. */
15  maxTilt?: number;
16  /** Scale applied while the pointer is over the card. */
17  hoverScale?: number;
18  /** Strength of the specular highlight, 0 to 1. */
19  glareOpacity?: number;
20  className?: string;
21}
22 
23/**
24 * A card that tilts toward the pointer in 3D, with a specular highlight that
25 * tracks the cursor.
26 */
27export function TiltCard({
28  children,
29  maxTilt = 12,
30  hoverScale = 1.03,
31  glareOpacity = 0.25,
32  className = "",
33}: TiltCardProps) {
34  const ref = useRef<HTMLDivElement>(null);
35  const prefersReducedMotion = useReducedMotion();
36 
37  // Pointer position as CSS percentages, fed straight into the glare gradient.
38  const px = useMotionValue("50%");
39  const py = useMotionValue("50%");
40 
41  const spring = { stiffness: 260, damping: 24, mass: 0.6 };
42  const rotateX = useSpring(useMotionValue(0), spring);
43  const rotateY = useSpring(useMotionValue(0), spring);
44  const scale = useSpring(useMotionValue(1), spring);
45 
46  /*
47   * Visibility of the highlight, separate from its position.
48   *
49   * Without this the gradient was painted the whole time, parked at the
50   * card's centre — so the card sat there with a permanent bright blob on it
51   * whether or not a pointer was anywhere near. A highlight is a response to
52   * the pointer, so it starts at zero and fades in on enter.
53   */
54  const glareStrength = useSpring(useMotionValue(0), {
55    stiffness: 180,
56    damping: 26,
57  });
58 
59  const glare = useMotionTemplate`radial-gradient(circle at ${px} ${py}, rgba(255,255,255,${glareOpacity}), transparent 60%)`;
60 
61  const handlePointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
62    const element = ref.current;
63    if (!element || prefersReducedMotion) return;
64 
65    const rect = element.getBoundingClientRect();
66    const x = (event.clientX - rect.left) / rect.width;
67    const y = (event.clientY - rect.top) / rect.height;
68 
69    px.set(`${x * 100}%`);
70    py.set(`${y * 100}%`);
71 
72    // Invert X so the card leans toward the cursor rather than away from it.
73    rotateX.set(-(y - 0.5) * 2 * maxTilt);
74    rotateY.set((x - 0.5) * 2 * maxTilt);
75  };
76 
77  const enter = () => {
78    if (prefersReducedMotion) return;
79    scale.set(hoverScale);
80    glareStrength.set(1);
81  };
82 
83// … truncated