{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-hero",
  "type": "registry:ui",
  "dependencies": [
    "framer-motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "components/ui/animated-hero.tsx",
      "content": "\"use client\";\r\n\r\nimport { useEffect, useState } from \"react\";\r\nimport { motion } from \"framer-motion\";\r\nimport { Sun, Moon } from \"lucide-react\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\ninterface AnimatedHeroProps {\r\n    /** Hero title text */\r\n    title?: string;\r\n    /** Whether to show the theme toggle button */\r\n    showThemeToggle?: boolean;\r\n    /** Additional CSS classes */\r\n    className?: string;\r\n    /** Force specific theme rendering */\r\n    forceTheme?: \"dark\" | \"light\";\r\n}\r\n\r\nexport function AnimatedHero({\r\n    title = \"AN AWESOME TITLE\",\r\n    showThemeToggle = true,\r\n    className = \"\",\r\n    forceTheme,\r\n}: AnimatedHeroProps) {\r\n    const [isDark, setIsDark] = useState(false);\r\n    const [mounted, setMounted] = useState(false);\r\n\r\n    useEffect(() => {\r\n        setMounted(true);\r\n\r\n        const checkDarkMode = () => {\r\n            if (forceTheme) return forceTheme === \"dark\";\r\n            return document.documentElement.classList.contains(\"dark\");\r\n        };\r\n        setIsDark(checkDarkMode());\r\n\r\n        const observer = new MutationObserver((mutations) => {\r\n            mutations.forEach((mutation) => {\r\n                if (mutation.attributeName === \"class\") {\r\n                    setIsDark(checkDarkMode());\r\n                }\r\n            });\r\n        });\r\n\r\n        observer.observe(document.documentElement, {\r\n            attributes: true,\r\n            attributeFilter: [\"class\"],\r\n        });\r\n\r\n        return () => observer.disconnect();\r\n    }, []);\r\n\r\n    const toggleTheme = () => {\r\n        document.documentElement.classList.toggle(\"dark\");\r\n    };\r\n\r\n    if (!mounted) {\r\n        return null;\r\n    }\r\n\r\n    return (\r\n        <section className={cn(\"relative w-full h-auto\", className)}>\r\n            {/* Animated Background */}\r\n            <div\r\n                className=\"relative w-full h-full min-h-[500px] flex items-center justify-center transition-all duration-500\"\r\n                style={{\r\n                    backgroundImage: `\r\n                        repeating-linear-gradient(\r\n                            100deg,\r\n                            var(--stripe-color) 0%,\r\n                            var(--stripe-color) 7%,\r\n                            transparent 10%,\r\n                            transparent 12%,\r\n                            var(--stripe-color) 16%\r\n                        ),\r\n                        repeating-linear-gradient(\r\n                            100deg,\r\n                            hsl(var(--rainbow-blue)) 10%,\r\n                            hsl(var(--rainbow-pink)) 15%,\r\n                            hsl(var(--rainbow-blue)) 20%,\r\n                            hsl(var(--rainbow-cyan)) 25%,\r\n                            hsl(var(--rainbow-blue)) 30%\r\n                        )\r\n                    `,\r\n                    backgroundSize: \"300%, 200%\",\r\n                    backgroundPosition: \"50% 50%, 50% 50%\",\r\n                    filter: isDark\r\n                        ? \"blur(10px) opacity(0.5) saturate(2)\"\r\n                        : \"blur(10px) invert(1)\",\r\n                    maskImage:\r\n                        \"radial-gradient(circle at 50% 50%, black 60%, transparent 100%)\",\r\n                    WebkitMaskImage:\r\n                        \"radial-gradient(circle at 50% 50%, black 60%, transparent 100%)\",\r\n                }}\r\n            >\r\n                <div\r\n                    className=\"absolute inset-0 animate-aurora-bg\"\r\n                    style={{\r\n                        backgroundImage: `\r\n                            repeating-linear-gradient(\r\n                                100deg,\r\n                                var(--stripe-color) 0%,\r\n                                var(--stripe-color) 7%,\r\n                                transparent 10%,\r\n                                transparent 12%,\r\n                                var(--stripe-color) 16%\r\n                            ),\r\n                            repeating-linear-gradient(\r\n                                100deg,\r\n                                hsl(var(--rainbow-blue)) 10%,\r\n                                hsl(var(--rainbow-pink)) 15%,\r\n                                hsl(var(--rainbow-blue)) 20%,\r\n                                hsl(var(--rainbow-cyan)) 25%,\r\n                                hsl(var(--rainbow-blue)) 30%\r\n                            )\r\n                        `,\r\n                        backgroundSize: \"200%, 100%\",\r\n                        backgroundAttachment: \"fixed\",\r\n                        mixBlendMode: \"difference\",\r\n                    }}\r\n                />\r\n            </div>\r\n\r\n            {/* Content */}\r\n            <div\r\n                className=\"absolute inset-0 flex flex-col items-center justify-center gap-8 text-center px-4\"\r\n                style={{\r\n                    mixBlendMode: \"difference\",\r\n                    filter: \"invert(1)\",\r\n                }}\r\n            >\r\n                <motion.h1\r\n                    initial={{ opacity: 0, y: 20 }}\r\n                    animate={{ opacity: 1, y: 0 }}\r\n                    transition={{ duration: 0.8, ease: \"easeOut\" }}\r\n                    className=\"text-[clamp(2rem,1rem+5vw,8rem)] font-black relative leading-tight tracking-tight\"\r\n                    data-text={title}\r\n                >\r\n                    <span className=\"relative z-0\">{title}</span>\r\n                    <span\r\n                        className=\"absolute inset-0 flex items-center justify-center pointer-events-none z-10\"\r\n                        style={{\r\n                            background: \"white\",\r\n                            textShadow: \"0 0 1px #ffffff\",\r\n                            backgroundClip: \"text\",\r\n                            WebkitBackgroundClip: \"text\",\r\n                            WebkitTextFillColor: \"transparent\",\r\n                            backgroundColor: \"white\",\r\n                            WebkitMask: \"linear-gradient(#000 0 0) luminance\",\r\n                            mask: \"linear-gradient(#000 0 0) luminance, alpha\",\r\n                            backdropFilter: \"blur(19px) brightness(12.5)\",\r\n                            WebkitBackdropFilter: \"blur(19px) brightness(12.5)\",\r\n                            WebkitTextStroke: \"1px white\",\r\n                        }}\r\n                    >\r\n                        {title}\r\n                    </span>\r\n                </motion.h1>\r\n\r\n                {showThemeToggle && (\r\n                    <motion.button\r\n                        initial={{ opacity: 0, scale: 0.8 }}\r\n                        animate={{ opacity: 1, scale: 1 }}\r\n                        transition={{ duration: 0.5, delay: 0.3 }}\r\n                        whileHover={{ scale: 1.1 }}\r\n                        whileTap={{ scale: 0.95 }}\r\n                        onClick={toggleTheme}\r\n                        className=\"group cursor-pointer p-3 rounded-full border border-dashed hover:border-solid transition-all\"\r\n                        aria-label=\"Toggle theme\"\r\n                    >\r\n                        <motion.div\r\n                            initial={false}\r\n                            animate={{ rotate: isDark ? 180 : 0 }}\r\n                            transition={{ duration: 0.3 }}\r\n                        >\r\n                            {isDark ? (\r\n                                <Sun className=\"w-6 h-6 animate-aurora-blink group-hover:[animation-play-state:paused]\" />\r\n                            ) : (\r\n                                <Moon className=\"w-6 h-6 animate-aurora-blink group-hover:[animation-play-state:paused]\" />\r\n                            )}\r\n                        </motion.div>\r\n                    </motion.button>\r\n                )}\r\n            </div>\r\n        </section>\r\n    );\r\n}\r\n\r\nexport default AnimatedHero;\r\n",
      "type": "registry:ui",
      "target": "components/ui/animated-hero.tsx"
    }
  ]
}