{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "spotlight-card",
  "title": "Spotlight Card",
  "description": "A radial glow that follows the cursor across the card.",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/components/velora/spotlight-card.tsx",
      "content": "\"use client\";\n\nimport { useRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface SpotlightCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  /** Radius of the spotlight in px */\n  radius?: number;\n  /** Any CSS color for the glow */\n  color?: string;\n}\n\nexport function SpotlightCard({\n  children,\n  className,\n  radius = 320,\n  color = \"color-mix(in oklab, var(--brand) 14%, transparent)\",\n  ...props\n}: SpotlightCardProps) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    const el = ref.current;\n    if (!el) return;\n    const rect = el.getBoundingClientRect();\n    el.style.setProperty(\"--spot-x\", `${e.clientX - rect.left}px`);\n    el.style.setProperty(\"--spot-y\", `${e.clientY - rect.top}px`);\n  };\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"spotlight-card\"\n      onMouseMove={handleMouseMove}\n      className={cn(\n        \"group/spotlight relative overflow-hidden rounded-2xl border bg-card\",\n        className\n      )}\n      style={\n        {\n          \"--spot-radius\": `${radius}px`,\n          \"--spot-color\": color,\n        } as React.CSSProperties\n      }\n      {...props}\n    >\n      <div\n        aria-hidden\n        className=\"pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover/spotlight:opacity-100\"\n        style={{\n          background:\n            \"radial-gradient(var(--spot-radius) circle at var(--spot-x, 50%) var(--spot-y, 50%), var(--spot-color), transparent 65%)\",\n        }}\n      />\n      <div className=\"relative z-10\">{children}</div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/velora/spotlight-card.tsx"
    }
  ],
  "cssVars": {
    "theme": {
      "color-brand": "var(--brand)",
      "color-brand-from": "var(--brand-from)",
      "color-brand-via": "var(--brand-via)",
      "color-brand-to": "var(--brand-to)"
    },
    "light": {
      "brand": "oklch(0.546 0.245 263)",
      "brand-from": "oklch(0.546 0.245 263)",
      "brand-via": "oklch(0.623 0.214 260)",
      "brand-to": "oklch(0.685 0.169 237)"
    },
    "dark": {
      "brand": "oklch(0.623 0.214 260)",
      "brand-from": "oklch(0.623 0.214 260)",
      "brand-via": "oklch(0.707 0.165 255)",
      "brand-to": "oklch(0.746 0.16 233)"
    }
  },
  "type": "registry:ui"
}