mirror of
https://github.com/trustgraph-ai/trustgraph.git
synced 2026-07-02 02:58:10 +02:00
34 lines
1.5 KiB
TypeScript
34 lines
1.5 KiB
TypeScript
/**
|
|
* Ambient glow background -- forest green radial fields that drift and pulse.
|
|
*
|
|
* Ported from beep-effect4's GlowEffectPaper, adapted for plain CSS
|
|
* with multiple independent fields for organic movement.
|
|
*/
|
|
|
|
const primaryGlow = "radial-gradient(ellipse at center, var(--tg-glow-primary-start) 0%, var(--tg-glow-primary-mid) 40%, transparent 70%)";
|
|
const secondaryGlow = "radial-gradient(ellipse at center, var(--tg-glow-secondary-start) 0%, var(--tg-glow-secondary-mid) 45%, transparent 70%)";
|
|
const tertiaryGlow = "radial-gradient(ellipse at center, var(--tg-glow-tertiary-start) 0%, var(--tg-glow-tertiary-mid) 50%, transparent 70%)";
|
|
|
|
export function GlowBackground() {
|
|
return (
|
|
<div
|
|
aria-hidden="true"
|
|
className="pointer-events-none absolute inset-0 z-0 overflow-hidden animate-[glow-fade-in_1.2s_ease-out_forwards] opacity-0"
|
|
>
|
|
<div
|
|
className="absolute left-1/2 top-1/3 h-[70vh] w-[70vw] -translate-x-1/2 -translate-y-1/2 animate-[glow-drift-1_20s_ease-in-out_infinite] rounded-full blur-[80px]"
|
|
style={{ background: primaryGlow }}
|
|
/>
|
|
|
|
<div
|
|
className="absolute right-[10%] top-[20%] h-[50vh] w-[40vw] animate-[glow-drift-2_15s_ease-in-out_infinite] rounded-full blur-[60px]"
|
|
style={{ background: secondaryGlow }}
|
|
/>
|
|
|
|
<div
|
|
className="absolute bottom-[5%] left-[15%] h-[45vh] w-[45vw] animate-[glow-drift-3_25s_ease-in-out_infinite] rounded-full blur-[70px]"
|
|
style={{ background: tertiaryGlow }}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|