{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glare-card",
  "title": "Glare Card",
  "description": "Sheet of light tracking the cursor, like a foil trading card.",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/components/velora/glare-card.tsx",
      "content": "\"use client\";\n\nimport { useRef, useState } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface GlareCardProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\n/**\n * Card with a sheet of light that tracks the cursor across its surface, like\n * a foil trading card. CSS custom properties do the work — no dependency.\n */\nexport function GlareCard({ children, className }: GlareCardProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const [active, setActive] = useState(false);\n\n  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n    const element = ref.current;\n    if (!element) return;\n    const rect = element.getBoundingClientRect();\n    element.style.setProperty(\n      \"--glare-x\",\n      `${((event.clientX - rect.left) / rect.width) * 100}%`\n    );\n    element.style.setProperty(\n      \"--glare-y\",\n      `${((event.clientY - rect.top) / rect.height) * 100}%`\n    );\n  };\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"glare-card\"\n      onMouseMove={handleMouseMove}\n      onMouseEnter={() => setActive(true)}\n      onMouseLeave={() => setActive(false)}\n      className={cn(\n        \"group/glare relative overflow-hidden rounded-2xl border bg-card p-6 [--glare-x:50%] [--glare-y:50%]\",\n        className\n      )}\n    >\n      <span\n        aria-hidden\n        style={{ opacity: active ? 1 : 0 }}\n        className=\"pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_var(--glare-x)_var(--glare-y),color-mix(in_oklch,var(--brand)_28%,transparent),transparent_55%)] transition-opacity duration-300 motion-reduce:transition-none\"\n      />\n      <div className=\"relative\">{children}</div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/velora/glare-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"
}