{
  "name": "spotlight-custom-color",
  "type": "registry:ui",
  "componentName": "spotlight",
  "description": "Spotlight effect with custom colors and gradients.",
  "files": [
    {
      "path": "spotlight-custom-color.tsx",
      "content": "import { Spotlight } from '@/components/core/spotlight';\n\nexport function SpotlightCustomColor() {\n  return (\n    <div className='relative aspect-video h-[200px] rounded-sm border border-zinc-100 bg-white dark:border-zinc-800 dark:bg-black'>\n      <Spotlight\n        className='from-blue-800 via-blue-600 to-blue-400 blur-xl dark:from-blue-900 dark:via-blue-500 dark:to-blue-900'\n        size={64}\n      />\n      <div className='absolute inset-0'>\n        <svg className='h-full w-full'>\n          <defs>\n            <pattern\n              id='grid-pattern'\n              width='8'\n              height='8'\n              patternUnits='userSpaceOnUse'\n            >\n              <path\n                xmlns='http://www.w3.org/2000/svg'\n                d='M0 4H4M4 4V0M4 4H8M4 4V8'\n                stroke='currentColor'\n                strokeOpacity='0.3'\n                className='stroke-white dark:stroke-black'\n              />\n              <rect\n                x='3'\n                y='3'\n                width='2'\n                height='2'\n                fill='currentColor'\n                fillOpacity='0.25'\n                className='fill-white dark:fill-black'\n              />\n            </pattern>\n          </defs>\n          <rect width='100%' height='100%' fill='url(#grid-pattern)' />\n        </svg>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "components/core/spotlight.tsx",
      "content": "'use client';\nimport React, { useRef, useState, useCallback, useEffect } from 'react';\nimport { motion, useSpring, useTransform, SpringOptions } from 'motion/react';\nimport { cn } from '@/lib/utils';\n\nexport type SpotlightProps = {\n  className?: string;\n  size?: number;\n  springOptions?: SpringOptions;\n};\n\nexport function Spotlight({\n  className,\n  size = 200,\n  springOptions = { bounce: 0 },\n}: SpotlightProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [isHovered, setIsHovered] = useState(false);\n  const [parentElement, setParentElement] = useState<HTMLElement | null>(null);\n\n  const mouseX = useSpring(0, springOptions);\n  const mouseY = useSpring(0, springOptions);\n\n  const spotlightLeft = useTransform(mouseX, (x) => `${x - size / 2}px`);\n  const spotlightTop = useTransform(mouseY, (y) => `${y - size / 2}px`);\n\n  useEffect(() => {\n    if (containerRef.current) {\n      const parent = containerRef.current.parentElement;\n      if (parent) {\n        parent.style.position = 'relative';\n        parent.style.overflow = 'hidden';\n        setParentElement(parent);\n      }\n    }\n  }, []);\n\n  const handleMouseMove = useCallback(\n    (event: MouseEvent) => {\n      if (!parentElement) return;\n      const { left, top } = parentElement.getBoundingClientRect();\n      mouseX.set(event.clientX - left);\n      mouseY.set(event.clientY - top);\n    },\n    [mouseX, mouseY, parentElement]\n  );\n\n  useEffect(() => {\n    if (!parentElement) return;\n\n    const abortController = new AbortController();\n\n    parentElement.addEventListener('mousemove', handleMouseMove, {\n      signal: abortController.signal,\n    });\n    parentElement.addEventListener('mouseenter', () => setIsHovered(true), {\n      signal: abortController.signal,\n    });\n    parentElement.addEventListener('mouseleave', () => setIsHovered(false), {\n      signal: abortController.signal,\n    });\n\n    return () => {\n      abortController.abort();\n    };\n  }, [parentElement, handleMouseMove]);\n\n  return (\n    <motion.div\n      ref={containerRef}\n      className={cn(\n        'pointer-events-none absolute rounded-full bg-[radial-gradient(circle_at_center,var(--tw-gradient-stops),transparent_80%)] blur-xl transition-opacity duration-200',\n        'from-zinc-100 via-zinc-200 to-zinc-400 dark:from-zinc-50 dark:via-zinc-100 dark:to-zinc-200',\n        isHovered ? 'opacity-100' : 'opacity-0',\n        className\n      )}\n      style={{\n        width: size,\n        height: size,\n        left: spotlightLeft,\n        top: spotlightTop,\n      }}\n    />\n  );\n}\n",
      "type": "registry:ui"
    }
  ]
}