{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hover-card",
  "type": "registry:ui",
  "title": "Hover Card",
  "description": "Card with a cursor-tracking spotlight.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/starkui/hover-card.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport function HoverCard({\n  children,\n  className,\n}: {\n  children: React.ReactNode;\n  className?: string;\n}) {\n  const ref = React.useRef<HTMLDivElement>(null);\n\n  return (\n    <div\n      ref={ref}\n      onPointerMove={(e) => {\n        const rect = e.currentTarget.getBoundingClientRect();\n        e.currentTarget.style.setProperty(\"--x\", `${e.clientX - rect.left}px`);\n        e.currentTarget.style.setProperty(\"--y\", `${e.clientY - rect.top}px`);\n      }}\n      className={cn(\n        \"group relative overflow-hidden rounded-[1.5rem] border border-border/60 bg-background p-6 shadow-sm transition-all duration-300 hover:border-border hover:shadow-md\",\n        className\n      )}\n    >\n      <div\n        className=\"pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100\"\n        style={{\n          background:\n            \"radial-gradient(350px circle at var(--x) var(--y), color-mix(in srgb, var(--foreground) 6%, transparent), transparent)\",\n        }}\n      />\n      <div className=\"relative z-10\">{children}</div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/hover-card.tsx"
    }
  ]
}