mark/vibn-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Aceternity gradient background in light mode

Browse Source 
BgLayer 'gradient' always rendered rgb(8,0,20) dark base regardless
of mode, covering the container's light bg and making the dark
gradient-text h1 invisible. Split into isDark branches: dark mode
keeps the hard-light blob effect, light mode renders soft pastel
blobs on rgb(248,247,255).

Made-with: Cursor
This commit is contained in:
Mark Henderson
2026-03-06 10:53:23 -08:00
parent 57a4f358d1
commit 4eff014ae6
1 changed files with 21 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
components/design-scaffolds/marketing.tsx
View File

@@ -515,16 +515,28 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme
const border= isDark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.1)";
const BgLayer = () => {
if (bgStyle === "gradient") return (
<div style={{ position: "absolute", inset: 0, overflow: "hidden", zIndex: 0, background: "rgb(8,0,20)" }}>
<div style={{ position: "absolute", inset: 0, filter: "blur(55px)", mixBlendMode: "hard-light" }}>
<div style={{ position: "absolute", width: "70%", height: "70%", top: "5%", left: "10%", borderRadius: "50%", background: `radial-gradient(circle, rgba(18,113,255,0.85) 0%, transparent 65%)`, animation: "ace-blob1 22s ease infinite" }} />
<div style={{ position: "absolute", width: "65%", height: "65%", top: "-10%", left: "-5%", borderRadius: "50%", background: `radial-gradient(circle, ${p}cc 0%, transparent 65%)`, animation: "ace-blob2 18s reverse infinite" }} />
<div style={{ position: "absolute", width: "55%", height: "55%", bottom: "10%", right: "10%", borderRadius: "50%", background: `radial-gradient(circle, rgba(100,220,255,0.7) 0%, transparent 65%)`, animation: "ace-blob3 28s linear infinite" }} />
<div style={{ position: "absolute", width: "50%", height: "50%", bottom: "-10%", left: "30%", borderRadius: "50%", background: `radial-gradient(circle, rgba(200,50,50,0.65) 0%, transparent 65%)`, animation: "ace-blob4 24s ease infinite" }} />
if (bgStyle === "gradient") {
if (!isDark) return (
<div style={{ position: "absolute", inset: 0, overflow: "hidden", zIndex: 0, background: "rgb(248,247,255)" }}>
<div style={{ position: "absolute", inset: 0, filter: "blur(70px)", opacity: 0.55 }}>
<div style={{ position: "absolute", width: "70%", height: "70%", top: "5%", left: "10%", borderRadius: "50%", background: `radial-gradient(circle, rgba(196,181,253,0.7) 0%, transparent 65%)`, animation: "ace-blob1 22s ease infinite" }} />
<div style={{ position: "absolute", width: "65%", height: "65%", top: "-10%", left: "-5%", borderRadius: "50%", background: `radial-gradient(circle, rgba(147,197,253,0.6) 0%, transparent 65%)`, animation: "ace-blob2 18s reverse infinite" }} />
<div style={{ position: "absolute", width: "55%", height: "55%", bottom: "10%", right: "10%", borderRadius: "50%", background: `radial-gradient(circle, rgba(216,180,254,0.5) 0%, transparent 65%)`, animation: "ace-blob3 28s linear infinite" }} />
<div style={{ position: "absolute", width: "50%", height: "50%", bottom: "-10%", left: "30%", borderRadius: "50%", background: `radial-gradient(circle, ${p}40 0%, transparent 65%)`, animation: "ace-blob4 24s ease infinite" }} />
</div>
</div>
</div>
);
);
return (
<div style={{ position: "absolute", inset: 0, overflow: "hidden", zIndex: 0, background: "rgb(8,0,20)" }}>
<div style={{ position: "absolute", inset: 0, filter: "blur(55px)", mixBlendMode: "hard-light" }}>
<div style={{ position: "absolute", width: "70%", height: "70%", top: "5%", left: "10%", borderRadius: "50%", background: `radial-gradient(circle, rgba(18,113,255,0.85) 0%, transparent 65%)`, animation: "ace-blob1 22s ease infinite" }} />
<div style={{ position: "absolute", width: "65%", height: "65%", top: "-10%", left: "-5%", borderRadius: "50%", background: `radial-gradient(circle, ${p}cc 0%, transparent 65%)`, animation: "ace-blob2 18s reverse infinite" }} />
<div style={{ position: "absolute", width: "55%", height: "55%", bottom: "10%", right: "10%", borderRadius: "50%", background: `radial-gradient(circle, rgba(100,220,255,0.7) 0%, transparent 65%)`, animation: "ace-blob3 28s linear infinite" }} />
<div style={{ position: "absolute", width: "50%", height: "50%", bottom: "-10%", left: "30%", borderRadius: "50%", background: `radial-gradient(circle, rgba(200,50,50,0.65) 0%, transparent 65%)`, animation: "ace-blob4 24s ease infinite" }} />
</div>
</div>
);
}
if (bgStyle === "shader") return (
<div style={{ position: "absolute", inset: 0, overflow: "hidden", zIndex: 0 }}>
<div style={{ position: "absolute", inset: 0, background: "linear-gradient(135deg, #7c3aed 0%, #db2777 35%, #ea580c 65%, #ca8a04 100%)", opacity: 0.92 }} />