{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "spotlight-card",
  "type": "registry:ui",
  "description": "An interactive card with a spotlight effect.",
  "dependencies": [
    "motion",
    "lucide-react",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "registry/new-york/animations/specials/spotlight-card.tsx",
      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { motion, useMotionTemplate, useMotionValue, useSpring } from \"motion/react\";\nimport { useRef } from \"react\";\n\ninterface SpotlightCardProps {\n    children: React.ReactNode;\n    className?: string;\n    spotlightColor?: string;\n    spotlightSize?: number;\n    hoverScale?: number;\n}\n\nexport function SpotlightCard({\n    children,\n    className,\n    spotlightColor = \"rgba(255, 255, 255, 0.25)\",\n    spotlightSize = 350,\n    hoverScale = 1.05,\n}: SpotlightCardProps) {\n    const cardRef = useRef<HTMLDivElement>(null);\n\n    const mouseX = useMotionValue(-spotlightSize);\n    const mouseY = useMotionValue(-spotlightSize);\n\n    const springConfig = { damping: 20, stiffness: 200, mass: 0.5 };\n    const smoothMouseX = useSpring(mouseX, springConfig);\n    const smoothMouseY = useSpring(mouseY, springConfig);\n\n    const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n        if (!cardRef.current) return;\n        const rect = cardRef.current.getBoundingClientRect();\n        mouseX.set(e.clientX - rect.left);\n        mouseY.set(e.clientY - rect.top);\n    };\n\n    const handleMouseLeave = () => {\n        // Leave logic\n    };\n\n    const spotlightGradient = useMotionTemplate`\n    radial-gradient(\n      ${spotlightSize}px circle at ${smoothMouseX}px ${smoothMouseY}px,\n      ${spotlightColor},\n      transparent 80%\n    )\n  `;\n\n    return (\n        <motion.div\n            ref={cardRef}\n            className={cn(\n                \"group relative overflow-hidden rounded-xl border border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-900 shadow-sm\",\n                className\n            )}\n            onMouseMove={handleMouseMove}\n            onMouseLeave={handleMouseLeave}\n            whileHover={{\n                scale: hoverScale,\n                rotate: 0,\n                boxShadow: \"0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)\"\n            }}\n            transition={{ type: \"spring\", stiffness: 300, damping: 20 }}\n        >\n            <motion.div\n                className=\"pointer-events-none absolute inset-0 z-20 opacity-0 transition-opacity duration-300 group-hover:opacity-100\"\n                style={{ background: spotlightGradient }}\n            />\n            <motion.div\n                className=\"pointer-events-none absolute inset-0 z-20 rounded-xl opacity-0 transition-opacity duration-300 group-hover:opacity-100\"\n                style={{\n                    borderWidth: 2,\n                    borderStyle: \"solid\",\n                    borderColor: spotlightColor, // Dynamic border color matching spotlight\n                    maskImage: spotlightGradient,\n                    WebkitMaskImage: spotlightGradient,\n                }}\n            />\n            <div\n                className=\"absolute inset-0 z-0 opacity-[0.05] pointer-events-none\"\n                style={{\n                    backgroundImage: `url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E\")`\n                }}\n            />\n            <div className=\"relative z-10 h-full w-full transition-transform duration-300 group-hover:translate-y-[-2px]\">\n                {children}\n            </div>\n        </motion.div>\n    );\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/new-york/animations/specials/spotlight-card-demo.tsx",
      "content": "\"use client\";\n\nimport { SpotlightCard } from \"./spotlight-card\";\nimport { Lock } from \"lucide-react\";\n\nexport default function SpotlightCardDemo() {\n    return (\n        <div className=\"flex min-h-[400px] w-full items-center justify-center bg-white dark:bg-neutral-950 p-8\">\n            <SpotlightCard\n                className=\"w-full max-w-sm rounded-[24px] bg-white dark:bg-neutral-900 border-neutral-200 dark:border-neutral-800 p-8\"\n                spotlightColor=\"rgba(0, 229, 255, 0.2)\"\n            >\n                <div className=\"relative z-10 flex flex-col items-start gap-4 h-full\">\n                    <div className=\"p-3 rounded-2xl bg-cyan-100 dark:bg-cyan-900/30 text-cyan-500 dark:text-cyan-300\">\n                        <Lock className=\"w-6 h-6\" />\n                    </div>\n\n                    <div>\n                        <h2 className=\"text-2xl font-bold text-neutral-900 dark:text-white mb-2\">\n                            Secure Authentication\n                        </h2>\n                        <p className=\"text-neutral-500 dark:text-neutral-400\">\n                            Hover over this card to reveal the spotlight effect.\n                            It highlights the border and content dynamically.\n                        </p>\n                    </div>\n\n                    <div className=\"mt-4 pt-4 border-t border-neutral-100 dark:border-neutral-800 w-full\">\n                        <button className=\"text-sm font-semibold text-cyan-600 dark:text-cyan-400 hover:text-cyan-500 transition-colors\">\n                            Learn more &rarr;\n                        </button>\n                    </div>\n                </div>\n            </SpotlightCard>\n        </div>\n    );\n}\n",
      "type": "registry:component"
    }
  ]
}