Tilt card

1"use client";2 3import { useRef, useState, type CSSProperties, type ReactNode } from "react";4import { useReducedMotion } from "@/lib/media";5 6export type TiltCardProps = {7  children: ReactNode;8  maxAngle?: number;9  className?: string;10};11 12type Pose = { x: number; y: number; glareX: number; glareY: number };13const rest: Pose = { x: 0, y: 0, glareX: 50, glareY: 50 };14 15/**16 * Pointer tilt with a specular glare that follows the pointer, a slow spring17 * back to rest, a keyboard focus lift, and a reduced-motion fallback.18 */19export function TiltCard({20  children,21  maxAngle = 8,22  className = "",23}: TiltCardProps) {24  const ref = useRef<HTMLDivElement>(null);25  const reduced = useReducedMotion();26  const [pose, setPose] = useState<Pose>(rest);27  const [tilting, setTilting] = useState(false);28  function move(event: React.PointerEvent<HTMLDivElement>) {