{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "spotlight-card",
  "type": "registry:ui",
  "title": "Radial Cursor Spotlight Card",
  "description": "Card with a dynamic radial cursor spotlight illuminating borders and background on hover.",
  "category": "cards",
  "dependencies": [
    "@phosphor-icons/react"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "tags": [
    "card",
    "spotlight",
    "radial",
    "hover"
  ],
  "files": [
    {
      "path": "registry/cards/spotlight-card/spotlight-card.tsx",
      "type": "registry:ui",
      "target": "components/ui/spotlight-card.tsx",
      "content": "import React, { useRef, useState } from 'react'\nimport { motion } from 'framer-motion'\nimport { cn } from '@/lib/utils'\n\nexport interface SpotlightCardProps {\n  title?: string\n  description?: string\n  icon?: React.ReactNode\n  spotlightColor?: string\n  className?: string\n}\n\nexport const SpotlightCard: React.FC<SpotlightCardProps> = ({\n  title = 'SMT Formal Invariant Engine',\n  description = 'Solves symbolic execution constraints and proves deadlock freedom with mathematical certainty before emission.',\n  icon,\n  spotlightColor = 'rgba(56, 189, 248, 0.15)',\n  className,\n}) => {\n  const divRef = useRef<HTMLDivElement>(null)\n  const [position, setPosition] = useState({ x: 0, y: 0 })\n  const [opacity, setOpacity] = useState(0)\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!divRef.current) return\n    const div = divRef.current\n    const rect = div.getBoundingClientRect()\n    setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top })\n  }\n\n  return (\n    <div\n      ref={divRef}\n      onMouseMove={handleMouseMove}\n      onMouseEnter={() => setOpacity(1)}\n      onMouseLeave={() => setOpacity(0)}\n      className={cn(\n        'relative overflow-hidden rounded-3xl border border-white/10 bg-zinc-950 p-6 text-white transition-colors hover:border-white/20',\n        className\n      )}\n    >\n      {/* Radial Spotlight Overlay */}\n      <div\n        className=\"pointer-events-none absolute -inset-px transition-opacity duration-300\"\n        style={{\n          opacity,\n          background: `radial-gradient(400px circle at ${position.x}px ${position.y}px, ${spotlightColor}, transparent 80%)`,\n        }}\n      />\n\n      <div className=\"relative z-10\">\n        {icon && <div className=\"mb-4 inline-flex h-10 w-10 items-center justify-center rounded-xl bg-white/5 border border-white/10 text-white\">{icon}</div>}\n        <h4 className=\"text-base font-bold text-zinc-900 dark:text-white tracking-tight\">{title}</h4>\n        <p className=\"mt-2 text-xs text-zinc-600 dark:text-zinc-400 leading-relaxed\">{description}</p>\n        <div className=\"mt-4 flex items-center gap-2 font-mono text-[11px] text-zinc-500\">\n          <span className=\"h-1.5 w-1.5 rounded-full bg-cyan-400\" />\n          <span>Interactive Cursor Glow</span>\n        </div>\n      </div>\n    </div>\n  )\n}\n"
    }
  ],
  "tailwind": {
    "required": true
  },
  "framework": [
    "react",
    "nextjs",
    "vite"
  ]
}