45 lines
1.8 KiB
TypeScript
45 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* Reusable soft gradient background (glassmorphism / ethereal).
|
|
* Soft gradient base + blurred blobs (cyan, lavender, teal) for frosted glow.
|
|
* Use with a parent that has page-soft-bg and relative overflow-hidden.
|
|
* Wrap page content in a container with relative z-10.
|
|
*/
|
|
export function Background() {
|
|
return (
|
|
<div
|
|
className="absolute inset-0 z-0 overflow-hidden pointer-events-none"
|
|
aria-hidden
|
|
>
|
|
{/* Top-left: light airy blue / cyan */}
|
|
<div
|
|
className="absolute -top-32 -left-32 h-[700px] w-[700px] rounded-full bg-[#7dd3fc] opacity-30 blur-[100px] animate-blob-float"
|
|
style={{ animationDelay: "0s" }}
|
|
/>
|
|
<div
|
|
className="absolute top-0 left-1/4 h-[500px] w-[500px] rounded-full bg-[#38bdf8] opacity-20 blur-[80px] animate-blob-float"
|
|
style={{ animationDelay: "-4s" }}
|
|
/>
|
|
{/* Mid / center-right: subtle lavender */}
|
|
<div
|
|
className="absolute top-1/3 right-0 w-[600px] h-[600px] rounded-full bg-[#c4b5fd] opacity-28 blur-[100px] animate-blob-float"
|
|
style={{ animationDelay: "-8s" }}
|
|
/>
|
|
<div
|
|
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[550px] h-[550px] rounded-full bg-[#a78bfa] opacity-18 blur-[90px] animate-blob-float"
|
|
style={{ animationDelay: "-12s" }}
|
|
/>
|
|
{/* Bottom-right: soft green / teal */}
|
|
<div
|
|
className="absolute -bottom-40 -right-20 h-[600px] w-[600px] rounded-full bg-[#5eead4] opacity-25 blur-[100px] animate-blob-float"
|
|
style={{ animationDelay: "-2s" }}
|
|
/>
|
|
<div
|
|
className="absolute bottom-0 right-1/3 h-[450px] w-[450px] rounded-full bg-[#6ee7b7] opacity-20 blur-[80px] animate-blob-float"
|
|
style={{ animationDelay: "-6s" }}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|