{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cursor-spotlight-panel",
  "type": "registry:component",
  "title": "Cursor spotlight panel",
  "description": "A panel whose accent radial spotlight follows the cursor, driven by Framer Motion values without re-renders. It shows a still surface for reduced motion.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/cursor-spotlight-panel.tsx",
      "type": "registry:ui",
      "target": "components/ui/cursor-spotlight-panel.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useMotionTemplate, useMotionValue, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\nfunction CursorSpotlightPanel({\n  title = \"Craft under the cursor\",\n  body = \"Hairline panels that respond without blur shadows — spotlight via motion values only.\",\n  className,\n}: {\n  title?: string\n  body?: string\n  className?: string\n}) {\n  const reduce = useReducedMotion()\n  const mx = useMotionValue(50)\n  const my = useMotionValue(40)\n  const background = useMotionTemplate`radial-gradient(420px circle at ${mx}% ${my}%, color-mix(in oklch, var(--accent) 18%, transparent), transparent 55%)`\n\n  return (\n    <motion.div\n      data-slot=\"cursor-spotlight-panel\"\n      data-tier=\"premium\"\n      onMouseMove={(e) => {\n        if (reduce) return\n        const r = e.currentTarget.getBoundingClientRect()\n        mx.set(((e.clientX - r.left) / r.width) * 100)\n        my.set(((e.clientY - r.top) / r.height) * 100)\n      }}\n      style={reduce ? undefined : { background }}\n      className={cn(\n        \"relative overflow-hidden rounded-2xl border border-border bg-sunken p-8\",\n        \"shadow-highlight\",\n        className\n      )}\n    >\n      <h3 className=\"text-2xl font-medium tracking-[-0.018em] text-fg\">{title}</h3>\n      <p className=\"mt-2 max-w-md text-sm leading-[1.55] text-fg-muted\">{body}</p>\n    </motion.div>\n  )\n}\nexport { CursorSpotlightPanel }\n"
    }
  ]
}