{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "spotlight",
  "type": "registry:component",
  "title": "Spotlight",
  "description": "A cursor-following radial glow on any surface. Wrap a card or section; the glow tracks the pointer and fades in on hover. Pure CSS variables.",
  "dependencies": [],
  "registryDependencies": [],
  "tier": "free",
  "note": "Requires the .prism-spotlight styles from globals.css.",
  "files": [
    {
      "path": "components/prism/Spotlight.tsx",
      "content": "\"use client\";\n\nimport { useRef } from \"react\";\n\n/**\n * Spotlight — a cursor-following radial glow on any surface. Wrap a card/section;\n * the glow tracks the pointer and fades in on hover. Pure CSS variables updated\n * on mousemove (no rAF needed — the browser coalesces). Styles live in globals.css.\n */\nexport function Spotlight({\n  children,\n  className = \"\",\n  color = \"139, 92, 255\",\n  size = 360,\n}: {\n  children: React.ReactNode;\n  className?: string;\n  /** RGB triplet string, e.g. \"139, 92, 255\". */\n  color?: string;\n  size?: 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    const r = el.getBoundingClientRect();\n    el.style.setProperty(\"--spot-x\", `${e.clientX - r.left}px`);\n    el.style.setProperty(\"--spot-y\", `${e.clientY - r.top}px`);\n  }\n\n  return (\n    <div\n      ref={ref}\n      onMouseMove={onMove}\n      className={`prism-spotlight ${className}`}\n      style={{ \"--spot-color\": color, \"--spot-size\": `${size}px` } as React.CSSProperties}\n    >\n      {children}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/prism/Spotlight.tsx"
    }
  ]
}