{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-rays",
  "type": "registry:ui",
  "dependencies": [],
  "files": [
    {
      "path": "components/ui/animated-rays.tsx",
      "content": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface AnimatedRaysProps {\n    /** Additional CSS classes */\n    className?: string;\n    /** Optional children to render over the background */\n    children?: React.ReactNode;\n}\n\nexport function AnimatedRays({\n    className = \"\",\n    children,\n}: AnimatedRaysProps) {\n    const [isDark, setIsDark] = useState(false);\n    const [mounted, setMounted] = useState(false);\n\n    useEffect(() => {\n        setMounted(true);\n        const checkDark = () => document.documentElement.classList.contains(\"dark\");\n        setIsDark(checkDark());\n\n        const observer = new MutationObserver(() => setIsDark(checkDark()));\n        observer.observe(document.documentElement, {\n            attributes: true,\n            attributeFilter: [\"class\"],\n        });\n        return () => observer.disconnect();\n    }, []);\n\n    if (!mounted) return null;\n\n    const stripes = `repeating-linear-gradient(\n        100deg,\n        var(--stripe-color) 0%,\n        var(--stripe-color) 7%,\n        transparent 10%,\n        transparent 12%,\n        var(--stripe-color) 16%\n    )`;\n    const rainbow = `repeating-linear-gradient(\n        100deg,\n        #60a5fa 10%,\n        #e879f9 15%,\n        #60a5fa 20%,\n        #5eead4 25%,\n        #60a5fa 30%\n    )`;\n\n    return (\n        <section className={cn(\"relative w-full h-full overflow-hidden\", className)}>\n            {/* Aurora Background — matches original .hero */}\n            <div\n                className=\"absolute inset-0\"\n                style={{\n                    backgroundImage: `${stripes}, ${rainbow}`,\n                    backgroundSize: \"300%, 200%\",\n                    backgroundPosition: \"50% 50%, 50% 50%\",\n                    filter: isDark\n                        ? \"blur(10px) opacity(50%) saturate(200%)\"\n                        : \"blur(10px) invert(100%)\",\n                    maskImage: \"radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%)\",\n                    WebkitMaskImage: \"radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%)\",\n                }}\n            >\n                {/* Animated overlay — matches original .hero::after */}\n                <div\n                    className=\"absolute inset-0 animate-aurora-bg\"\n                    style={{\n                        backgroundImage: `${stripes}, ${rainbow}`,\n                        backgroundSize: \"200%, 100%\",\n                        backgroundAttachment: \"fixed\",\n                        mixBlendMode: \"difference\",\n                    }}\n                />\n            </div>\n\n            {children && (\n                <div className=\"absolute inset-0 z-10 flex flex-col items-center justify-center\">\n                    {children}\n                </div>\n            )}\n        </section>\n    );\n}\n\nexport default AnimatedRays;\n",
      "type": "registry:ui",
      "target": "components/ui/animated-rays.tsx"
    }
  ]
}