3D tilt card

import type { PointerEvent, ReactNode } from 'react';
import {
  motion,
  useMotionTemplate,
  useMotionValue,
  useReducedMotion,
  useSpring
} from 'motion/react';

const MAX_TILT = 12; // degrees
const SPRING = { stiffness: 200, damping: 20 };

export function TiltCard({ children }: { children: ReactNode }) {
  const reduceMotion = useReducedMotion();
  const rotateX = useSpring(0, SPRING);
  const rotateY = useSpring(0, SPRING);
  const glareX = useMotionValue(50);
  const glareY = useMotionValue(50);
  const glareOpacity = useSpring(0, SPRING);
  const glare = useMotionTemplate`radial-gradient(circle at ${glareX}% ${glareY}%, rgb(255 255 255 / 0.3), transparent 60%)`;

  function onPointerMove(event: PointerEvent<HTMLDivElement>) {
    // Touch has no hover, and some people prefer less motion.
    if (event.pointerType !== 'mouse' || reduceMotion) return;
    const rect = event.currentTarget.getBoundingClientRect();
    const px = (event.clientX - rect.left) / rect.width; // 0 to 1
    const py = (event.clientY - rect.top) / rect.height;
    rotateX.set((0.5 - py) * 2 * MAX_TILT);
    rotateY.set((px - 0.5) * 2 * MAX_TILT);
    glareX.set(px * 100);
    glareY.set(py * 100);
    glareOpacity.set(1);
  }

  function onPointerLeave() {
    rotateX.set(0);
    rotateY.set(0);
    glareOpacity.set(0);
  }

  return (
    <div className='perspective-[800px]'>
      <motion.div
        onPointerMove={onPointerMove}
        onPointerLeave={onPointerLeave}
        style={{ rotateX, rotateY }}
        className='relative w-72 overflow-hidden rounded-2xl border bg-background p-6 shadow-lg'
      >
        {children}
        <motion.div
          aria-hidden
          style={{ background: glare, opacity: glareOpacity }}
          className='pointer-events-none absolute inset-0'
        />
      </motion.div>
    </div>
  );
}