Initial commit

2026-02-09 15:24:03 +00:00
commit 912167849e
656 changed files with 77214 additions and 0 deletions
--- a/src/components/background/DownwardRaysBackground.tsx
+++ b/src/components/background/DownwardRaysBackground.tsx
@@ -0,0 +1,130 @@
+"use client";
+
+import { memo } from "react";
+import { cls } from "@/lib/utils";
+
+interface RayConfig {
+    width: number;
+    opacity: number;
+    rotation: number;
+    scale?: number;
+    animationDuration: number;
+    animationDelay: number;
+}
+
+interface LightSourceConfig {
+    width: number;
+    height?: number;
+    opacity: number;
+    top: number;
+}
+
+interface DownwardRaysBackgroundProps {
+    animated: boolean;
+    showGrid: boolean;
+    className?: string;
+    containerClassName?: string;
+}
+
+const rays: RayConfig[] = [
+    { width: 35, opacity: 1, rotation: -20, animationDuration: 4, animationDelay: 0 },
+    { width: 35, opacity: 0.6, rotation: -12, animationDuration: 3.5, animationDelay: 0.5 },
+    { width: 20, opacity: 0.45, rotation: -5, scale: 0.90, animationDuration: 5, animationDelay: 1.2 },
+    { width: 15, opacity: 0.625, rotation: -3, animationDuration: 3, animationDelay: 0.3 },
+    { width: 40, opacity: 0.1, rotation: 0, scale: 0.79, animationDuration: 4.5, animationDelay: 0.8 },
+    { width: 20, opacity: 0.525, rotation: 3, animationDuration: 3.2, animationDelay: 1.5 },
+    { width: 15, opacity: 0.725, rotation: 5, scale: 0.90, animationDuration: 4.2, animationDelay: 0.2 },
+    { width: 35, opacity: 0.6, rotation: 12, animationDuration: 3.8, animationDelay: 1 },
+    { width: 35, opacity: 1, rotation: 20, animationDuration: 4, animationDelay: 0.7 },
+];
+
+const lightSources: LightSourceConfig[] = [
+    { width: 1198, opacity: 0.025, top: -352 },
+    { width: 865, height: 929, opacity: 0.1, top: -252 },
+    { width: 865, height: 929, opacity: 0.1, top: -252 },
+];
+
+const DownwardRaysBackground = ({
+    animated,
+    showGrid,
+    className = "",
+    containerClassName = "",
+}: DownwardRaysBackgroundProps) => {
+    return (
+        <div
+            className={cls("absolute inset-0 z-0 overflow-hidden pointer-events-none select-none", className)}
+            aria-hidden="true"
+        >
+            {animated && (
+                <style>
+                    {`
+                        @keyframes rayPulse {
+                            0%, 100% { opacity: 0; }
+                            50% { opacity: var(--target-opacity); }
+                        }
+                    `}
+                </style>
+            )}
+
+            {showGrid && (
+                <div
+                    className="absolute inset-0 -z-10 bg-background [mask-image:radial-gradient(50%_50%_at_50%_0%,white_0%,transparent_100%)]"
+                    style={{
+                        backgroundImage:
+                            "linear-gradient(to right, color-mix(in srgb, var(--color-background-accent) 20%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--color-background-accent) 10%, transparent) 1px, transparent 1px)",
+                        backgroundSize: "10vw 10vw",
+                        backgroundRepeat: "repeat",
+                    }}
+                />
+            )}
+
+            <div
+                className={cls(
+                    "absolute overflow-hidden w-[1142px] h-[129vh] -top-[400px] left-1/2 -translate-x-1/2",
+                    "blur-[16px]",
+                    "[mask:radial-gradient(50%_109%,#000_0%,#000000f6_0%,transparent_96%)]",
+                    containerClassName
+                )}
+            >
+                {rays.map((ray, index) => (
+                    <div
+                        key={`ray-${index}`}
+                        className="absolute overflow-hidden origin-top -top-[352px] -bottom-[920px] [background:radial-gradient(50%_50%_at_50%_50%,var(--color-background-accent)_0%,transparent_100%)]"
+                        style={{
+                            width: `${ray.width}px`,
+                            left: `calc(50% - ${ray.width / 2}px)`,
+                            transform: `${ray.scale ? `scale(${ray.scale})` : ""} rotate(${ray.rotation}deg)`,
+                            ...(animated
+                                ? {
+                                    "--target-opacity": ray.opacity,
+                                    animation: `rayPulse ${ray.animationDuration}s ease-in-out ${ray.animationDelay}s infinite both`,
+                                }
+                                : {
+                                    opacity: ray.opacity,
+                                }),
+                        } as React.CSSProperties}
+                    />
+                ))}
+
+                {lightSources.map((source, index) => (
+                    <div
+                        key={`light-source-${index}`}
+                        className="absolute overflow-hidden [background:radial-gradient(50%_50%_at_50%_50%,var(--color-background-accent)_0%,transparent_100%)]"
+                        style={{
+                            width: `${source.width}px`,
+                            height: source.height ? `${source.height}px` : undefined,
+                            top: `${source.top}px`,
+                            bottom: source.height ? undefined : "-46px",
+                            left: `calc(50% - ${source.width / 2}px)`,
+                            opacity: source.opacity,
+                        }}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+};
+
+DownwardRaysBackground.displayName = "DownwardRaysBackground";
+
+export default memo(DownwardRaysBackground);