{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "spotlight",
  "title": "Spotlight",
  "description": "Low-opacity cursor wash for dark Mira media cards. Reduced motion skips.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "@atroui/motion",
    "@atroui/utils"
  ],
  "files": [
    {
      "path": "registry/default/ui/spotlight.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  animate,\n  motion,\n  useMotionValue,\n  useReducedMotion,\n} from \"motion/react\"\n\nimport { easeOutSoft, hoverTween } from \"@/lib/motion\"\nimport { cn } from \"@/lib/utils\"\n\nconst settle = {\n  type: \"tween\" as const,\n  duration: hoverTween.duration,\n  ease: easeOutSoft,\n}\n\nexport type SpotlightProps = {\n  children: React.ReactNode\n  className?: string\n  /** Spotlight diameter in px. Default 240. */\n  size?: number\n  /** Wash opacity — keep low on dark Mira cards. Default 0.12. */\n  opacity?: number\n  /** Spotlight color. Default white. */\n  color?: string\n}\n\n/**\n * Low-opacity cursor wash for dark media cards.\n * Overlay only — reduced motion skips the wash.\n */\nexport function Spotlight({\n  children,\n  className,\n  size = 240,\n  opacity = 0.12,\n  color = \"#ffffff\",\n}: SpotlightProps) {\n  const reduce = useReducedMotion()\n  const x = useMotionValue(0)\n  const y = useMotionValue(0)\n  const wash = useMotionValue(0)\n\n  if (reduce) {\n    return <div className={cn(\"relative\", className)}>{children}</div>\n  }\n\n  return (\n    <div\n      className={cn(\"relative isolate overflow-hidden\", className)}\n      onPointerMove={(e) => {\n        const rect = e.currentTarget.getBoundingClientRect()\n        x.set(e.clientX - rect.left)\n        y.set(e.clientY - rect.top)\n      }}\n      onPointerEnter={() => {\n        animate(wash, opacity, settle)\n      }}\n      onPointerLeave={() => {\n        animate(wash, 0, settle)\n      }}\n    >\n      {children}\n      <motion.div\n        aria-hidden\n        className=\"pointer-events-none absolute z-10 rounded-full\"\n        style={{\n          width: size,\n          height: size,\n          left: x,\n          top: y,\n          x: \"-50%\",\n          y: \"-50%\",\n          opacity: wash,\n          background: `radial-gradient(circle, color-mix(in oklch, ${color} 100%, transparent), transparent 70%)`,\n        }}\n      />\n    </div>\n  )\n}\n",
      "type": "registry:ui",
      "target": "components/ui/spotlight.tsx"
    }
  ],
  "type": "registry:ui"
}