24 lines
1.2 KiB
TypeScript
24 lines
1.2 KiB
TypeScript
export default function AuroraBackground() {
|
|
return (
|
|
<div className="fixed inset-0 overflow-hidden pointer-events-none -z-10" id="aurora-container">
|
|
{/* Background base layer */}
|
|
<div className="absolute inset-0 bg-gradient-to-b from-brand-950 via-slate-900 to-brand-900 opacity-95" />
|
|
|
|
{/* Aurora glow blobs */}
|
|
<div className="absolute inset-0 opacity-40 mix-blend-screen filter blur-[120px] md:blur-[160px]">
|
|
{/* Teal blob */}
|
|
<div className="absolute top-1/10 left-1/5 w-72 h-72 md:w-96 md:h-96 rounded-full bg-brand-500 opacity-60 animate-aurora-1" />
|
|
|
|
{/* Blue blob */}
|
|
<div className="absolute top-1/3 right-1/4 w-80 h-80 md:w-[450px] md:h-[450px] rounded-full bg-accent-500 opacity-55 animate-aurora-2" />
|
|
|
|
{/* Cyan/Deep teal blob */}
|
|
<div className="absolute bottom-1/4 left-1/3 w-72 h-72 md:w-[400px] md:h-[400px] rounded-full bg-brand-700 opacity-50 animate-aurora-3" />
|
|
</div>
|
|
|
|
{/* Subtle grid pattern overlay for high-tech aesthetic */}
|
|
<div className="absolute inset-0 bg-[linear-gradient(to_right,#00bcac05_1px,transparent_1px),linear-gradient(to_bottom,#00bcac05_1px,transparent_1px)] bg-[size:24px_24px]" />
|
|
</div>
|
|
);
|
|
}
|