{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card-tilt",
  "type": "registry:component",
  "title": "Card tilt",
  "description": "A card that tilts in 3D toward the pointer on springs, with an accent glare that follows the cursor. It stays flat when reduced motion is preferred.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/card-tilt.tsx",
      "type": "registry:ui",
      "target": "components/ui/card-tilt.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useMotionTemplate, useMotionValue, useSpring, useTransform, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\nfunction CardTilt({\n  title = \"Crafted details\",\n  body = \"Tilt responds to pointer. Reduced motion stays flat.\",\n  className,\n}: {\n  title?: string\n  body?: string\n  className?: string\n}) {\n  const reduce = useReducedMotion()\n  const x = useMotionValue(0)\n  const y = useMotionValue(0)\n  const rx = useSpring(useTransform(y, [-0.5, 0.5], [8, -8]), { stiffness: 200, damping: 20 })\n  const ry = useSpring(useTransform(x, [-0.5, 0.5], [-10, 10]), { stiffness: 200, damping: 20 })\n  const glareX = useTransform(x, [-0.5, 0.5], [20, 80])\n  const glareY = useTransform(y, [-0.5, 0.5], [20, 80])\n  const glare = useMotionTemplate`radial-gradient(420px circle at ${glareX}% ${glareY}%, color-mix(in oklch, var(--accent) 16%, transparent), transparent 55%)`\n\n  return (\n    <motion.div\n      data-slot=\"card-tilt\"\n      data-tier=\"premium\"\n      onMouseMove={(e) => {\n        if (reduce) return\n        const r = e.currentTarget.getBoundingClientRect()\n        x.set((e.clientX - r.left) / r.width - 0.5)\n        y.set((e.clientY - r.top) / r.height - 0.5)\n      }}\n      onMouseLeave={() => { x.set(0); y.set(0) }}\n      style={reduce ? undefined : { rotateX: rx, rotateY: ry, transformPerspective: 900 }}\n      className={cn(\n        \"relative overflow-hidden rounded-2xl border border-border bg-surface p-6 shadow-highlight\",\n        className\n      )}\n    >\n      <motion.div aria-hidden className=\"pointer-events-none absolute inset-0\" style={reduce ? undefined : { background: glare }} />\n      <p className=\"relative text-xs font-medium tracking-[0.01em] text-fg-muted uppercase\">Featured</p>\n      <h3 className=\"relative mt-2 text-xl font-medium tracking-[-0.014em] text-fg\">{title}</h3>\n      <p className=\"relative mt-2 text-sm leading-[1.55] text-fg-muted\">{body}</p>\n    </motion.div>\n  )\n}\nexport { CardTilt }\n"
    }
  ]
}