{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tilt-card",
  "type": "registry:component",
  "title": "TiltCard",
  "description": "Pointer-driven 3D tilt with a moving specular glare. Pure CSS transforms via CSS variables, no per-frame React state.",
  "dependencies": [],
  "registryDependencies": [],
  "tier": "free",
  "note": "Requires the .prism-tilt styles from globals.css.",
  "files": [
    {
      "path": "components/prism/TiltCard.tsx",
      "content": "\"use client\";\n\nimport { useRef } from \"react\";\n\n/**\n * TiltCard — a 3D tilt that follows the pointer, with a moving specular glare.\n * Pure CSS transforms driven by CSS variables (no per-frame React state). Styles\n * in globals.css. Honors prefers-reduced-motion (stays flat).\n */\nexport function TiltCard({\n  children,\n  className = \"\",\n  max = 12,\n}: {\n  children: React.ReactNode;\n  className?: string;\n  /** max tilt in degrees */\n  max?: number;\n}) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  function onMove(e: React.MouseEvent<HTMLDivElement>) {\n    const el = ref.current;\n    if (!el) return;\n    if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n    const r = el.getBoundingClientRect();\n    const px = (e.clientX - r.left) / r.width - 0.5;\n    const py = (e.clientY - r.top) / r.height - 0.5;\n    el.style.setProperty(\"--tilt-rx\", `${(-py * max).toFixed(2)}deg`);\n    el.style.setProperty(\"--tilt-ry\", `${(px * max).toFixed(2)}deg`);\n    el.style.setProperty(\"--tilt-gx\", `${(px * 100 + 50).toFixed(1)}%`);\n    el.style.setProperty(\"--tilt-gy\", `${(py * 100 + 50).toFixed(1)}%`);\n  }\n\n  function onLeave() {\n    const el = ref.current;\n    if (!el) return;\n    el.style.setProperty(\"--tilt-rx\", \"0deg\");\n    el.style.setProperty(\"--tilt-ry\", \"0deg\");\n  }\n\n  return (\n    <div ref={ref} onMouseMove={onMove} onMouseLeave={onLeave} className={`prism-tilt ${className}`}>\n      {children}\n      <span aria-hidden className=\"prism-tilt-glare\" />\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/prism/TiltCard.tsx"
    }
  ]
}