54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
export function AuroraBackground() {
|
|
return (
|
|
<div className="pointer-events-none absolute inset-0 overflow-hidden">
|
|
{/* Base gradient */}
|
|
<div className="absolute inset-0 bg-gradient-to-b from-[#0a0a1a] via-[#06060f] to-[#0d1117]" />
|
|
|
|
{/* Aurora layers */}
|
|
<div
|
|
className="animate-aurora absolute -left-1/4 top-0 h-[60%] w-[150%] opacity-40"
|
|
style={{
|
|
background:
|
|
"radial-gradient(ellipse at 30% 0%, rgba(139, 92, 246, 0.35) 0%, transparent 60%)",
|
|
}}
|
|
/>
|
|
<div
|
|
className="animate-aurora absolute -right-1/4 top-[10%] h-[50%] w-[120%] opacity-30"
|
|
style={{
|
|
background:
|
|
"radial-gradient(ellipse at 70% 20%, rgba(34, 211, 238, 0.3) 0%, transparent 55%)",
|
|
animationDelay: "-4s",
|
|
}}
|
|
/>
|
|
<div
|
|
className="animate-aurora absolute left-0 top-[30%] h-[40%] w-full opacity-25"
|
|
style={{
|
|
background:
|
|
"radial-gradient(ellipse at 50% 50%, rgba(217, 70, 239, 0.25) 0%, transparent 50%)",
|
|
animationDelay: "-8s",
|
|
}}
|
|
/>
|
|
|
|
{/* Grid overlay */}
|
|
<div
|
|
className="absolute inset-0 opacity-[0.03]"
|
|
style={{
|
|
backgroundImage: `
|
|
linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px)
|
|
`,
|
|
backgroundSize: "60px 60px",
|
|
}}
|
|
/>
|
|
|
|
{/* Scan line */}
|
|
<div
|
|
className="absolute left-0 right-0 h-px bg-gradient-to-r from-transparent via-cyan-400/20 to-transparent"
|
|
style={{ animation: "scan-line 8s linear infinite" }}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|