animated-rays

1"use client";
2 
3import { useEffect, useState } from "react";
4import { cn } from "@/lib/utils";
5 
6interface AnimatedRaysProps {
7    /** Additional CSS classes */
8    className?: string;
9    /** Optional children to render over the background */
10    children?: React.ReactNode;
11}
12 
13export function AnimatedRays({
14    className = "",
15    children,
16}: AnimatedRaysProps) {
17    const [isDark, setIsDark] = useState(false);
18    const [mounted, setMounted] = useState(false);
19 
20    useEffect(() => {
21        setMounted(true);
22        const checkDark = () => document.documentElement.classList.contains("dark");
23        setIsDark(checkDark());
24 
25        const observer = new MutationObserver(() => setIsDark(checkDark()));
26        observer.observe(document.documentElement, {
27            attributes: true,
28            attributeFilter: ["class"],
29        });
30        return () => observer.disconnect();
31    }, []);
32 
33    if (!mounted) return null;
34 
35    const stripes = `repeating-linear-gradient(
36        100deg,
37        var(--stripe-color) 0%,
38        var(--stripe-color) 7%,
39        transparent 10%,
40        transparent 12%,
41        var(--stripe-color) 16%
42    )`;
43    const rainbow = `repeating-linear-gradient(
44        100deg,
45        #60a5fa 10%,
46        #e879f9 15%,
47        #60a5fa 20%,
48        #5eead4 25%,
49        #60a5fa 30%
50    )`;
51 
52    return (
53        <section className={cn("relative w-full h-full overflow-hidden", className)}>
54            {/* Aurora Background — matches original .hero */}
55            <div
56                className="absolute inset-0"
57                style={{
58                    backgroundImage: `${stripes}, ${rainbow}`,
59                    backgroundSize: "300%, 200%",
60                    backgroundPosition: "50% 50%, 50% 50%",
61                    filter: isDark
62                        ? "blur(10px) opacity(50%) saturate(200%)"
63                        : "blur(10px) invert(100%)",
64                    maskImage: "radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%)",
65                    WebkitMaskImage: "radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%)",
66                }}
67            >
68                {/* Animated overlay — matches original .hero::after */}
69                <div
70                    className="absolute inset-0 animate-aurora-bg"
71                    style={{
72                        backgroundImage: `${stripes}, ${rainbow}`,
73                        backgroundSize: "200%, 100%",
74// … truncated