{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "spotlight-section-shadcnui",
  "type": "registry:ui",
  "title": "Spotlight Section",
  "description": "Container where mouse creates soft radial spotlight following cursor",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/motion-core/spotlight-section.tsx",
      "content": "\"use client\";\n\nimport { motion, useMotionValue, useSpring } from \"framer-motion\";\nimport { MouseEvent, useState } from \"react\";\n\ntype SpotlightSectionProps = {\n  children: React.ReactNode;\n  intensity?: number;\n  size?: number;\n};\n\nexport function SpotlightSection({\n  children = (\n    <div className=\"text-center\">\n      <h3 className=\"text-xl font-semibold\">Spotlight Section</h3>\n      <p className=\"mt-2 text-sm text-muted-foreground\">\n        Move your mouse around to see the spotlight effect\n      </p>\n    </div>\n  ),\n  intensity = 0.6,\n  size = 300,\n}: SpotlightSectionProps) {\n  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });\n  const [isActive, setIsActive] = useState(false);\n\n  const x = useMotionValue(0);\n  const y = useMotionValue(0);\n\n  const springX = useSpring(x, { stiffness: 300, damping: 30 });\n  const springY = useSpring(y, { stiffness: 300, damping: 30 });\n\n  const handleMouseMove = (e: MouseEvent<HTMLDivElement>) => {\n    const rect = e.currentTarget.getBoundingClientRect();\n    const xPos = e.clientX - rect.left;\n    const yPos = e.clientY - rect.top;\n\n    x.set(xPos);\n    y.set(yPos);\n    setMousePosition({ x: xPos, y: yPos });\n    setIsActive(true);\n  };\n\n  const handleMouseLeave = () => {\n    setIsActive(false);\n  };\n\n  return (\n    <div\n      onMouseMove={handleMouseMove}\n      onMouseLeave={handleMouseLeave}\n      className=\"relative overflow-hidden rounded-2xl border border-border bg-card p-8\"\n    >\n      <motion.div\n        className=\"pointer-events-none absolute inset-0 opacity-0\"\n        style={{\n          x: springX,\n          y: springY,\n          background: `radial-gradient(circle ${size}px at ${mousePosition.x}px ${mousePosition.y}px, rgba(99, 102, 241, ${intensity}), transparent 70%)`,\n          opacity: isActive ? 1 : 0,\n        }}\n        transition={{ opacity: { duration: 0.3 } }}\n      />\n\n      <div className=\"relative z-10\">{children}</div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/uitripled/spotlight-section-shadcnui.tsx"
    }
  ]
}