{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "SpotlightCard-JS-TW",
	"title": "SpotlightCard",
	"description": "Dynamic spotlight follows cursor casting gradient illumination.",
	"type": "registry:component",
	"files": [
		{
			"type": "registry:component",
			"path": "SpotlightCard/SpotlightCard.jsx",
			"content": "import { useRef, useState } from 'react';\n\nconst SpotlightCard = ({ children, className = '', spotlightColor = 'rgba(255, 255, 255, 0.25)' }) => {\n  const divRef = useRef(null);\n  const [isFocused, setIsFocused] = useState(false);\n  const [position, setPosition] = useState({ x: 0, y: 0 });\n  const [opacity, setOpacity] = useState(0);\n\n  const handleMouseMove = e => {\n    if (!divRef.current || isFocused) return;\n\n    const rect = divRef.current.getBoundingClientRect();\n    setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top });\n  };\n\n  const handleFocus = () => {\n    setIsFocused(true);\n    setOpacity(0.6);\n  };\n\n  const handleBlur = () => {\n    setIsFocused(false);\n    setOpacity(0);\n  };\n\n  const handleMouseEnter = () => {\n    setOpacity(0.6);\n  };\n\n  const handleMouseLeave = () => {\n    setOpacity(0);\n  };\n\n  return (\n    <div\n      ref={divRef}\n      onMouseMove={handleMouseMove}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      className={`relative rounded-3xl border border-neutral-800 bg-neutral-900 overflow-hidden p-8 ${className}`}\n    >\n      <div\n        className=\"pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 ease-in-out\"\n        style={{\n          opacity,\n          background: `radial-gradient(circle at ${position.x}px ${position.y}px, ${spotlightColor}, transparent 80%)`\n        }}\n      />\n      {children}\n    </div>\n  );\n};\n\nexport default SpotlightCard;\n"
		}
	],
	"registryDependencies": [],
	"dependencies": []
}