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

Fix BgLayer SVG gradient reference causing dark rectangle in light mode

Browse Source 
- beams: replaced SVG gradient <rect fill='url(#bm-glow)'> with a CSS
  radial-gradient div — browser SVG gradient reference fallback is solid
  black which produced the dark rectangle. Also adapt line colors and
  opacity for light mode.
- meteors: switch tail gradient from white-tip to dark-tip in light mode
  so meteors are visible on a light background.
- wavy: remove SVG linearGradient id references (same black-fill risk);
  use inline hex alpha on fill instead.

Made-with: Cursor
This commit is contained in:
Mark Henderson
2026-03-06 11:17:13 -08:00
parent 7eaf1ca4f1
commit 69eb3b989c
1 changed files with 13 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -546,21 +546,19 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme
);
if (bgStyle === "beams") return (
<div style={{ position: "absolute", inset: 0, overflow: "hidden", zIndex: 0 }}>
{/* CSS radial glow — no SVG gradient ID reference (avoids black-fill fallback) */}
<div style={{ position: "absolute", top: 0, left: "50%", transform: "translateX(-50%)", width: "80%", height: "60%", background: `radial-gradient(ellipse at 50% 0%, ${p}${isDark ? "30" : "18"}, transparent 70%)`, pointerEvents: "none" }} />
<svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }} viewBox="0 0 400 700" preserveAspectRatio="xMidYMid slice">
<defs>
<radialGradient id="bm-glow" cx="50%" cy="0%" r="75%">
<stop offset="0%" stopColor={p} stopOpacity="0.18" />
<stop offset="100%" stopColor={p} stopOpacity="0" />
</radialGradient>
</defs>
<rect width="400" height="700" fill="url(#bm-glow)" />
{Array.from({ length: 14 }).map((_, i) => {
const x = 200 + (i - 7) * 32;
const lineColor = isDark
? (i % 3 === 0 ? p : i % 3 === 1 ? "#3b82f6" : "#06b6d4")
: (i % 3 === 0 ? p : i % 3 === 1 ? "#6366f1" : "#0891b2");
return (
<line key={i} x1={200} y1={0} x2={x} y2={700}
stroke={i % 3 === 0 ? p : i % 3 === 1 ? "#3b82f6" : "#06b6d4"}
stroke={lineColor}
strokeWidth={i % 4 === 0 ? 0.7 : 0.35}
strokeOpacity={0.12 + (i % 3) * 0.05}
strokeOpacity={isDark ? (0.12 + (i % 3) * 0.05) : (0.18 + (i % 3) * 0.06)}
style={{ animation: `ace-beam-pulse ${3 + i * 0.4}s ease-in-out ${i * 0.22}s infinite` }}
/>
);
@@ -570,14 +568,16 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme
);
if (bgStyle === "meteors") return (
<div style={{ position: "absolute", inset: 0, overflow: "hidden", zIndex: 0 }}>
<div style={{ position: "absolute", inset: 0, background: `radial-gradient(ellipse 55% 35% at 50% 0%, ${p}15, transparent)` }} />
<div style={{ position: "absolute", inset: 0, background: `radial-gradient(ellipse 55% 35% at 50% 0%, ${p}${isDark ? "20" : "12"}, transparent)` }} />
{Array.from({ length: 12 }).map((_, i) => (
<div key={i} style={{
position: "absolute",
top: `${(i * 31 + 5) % 65}%`,
right: `${(i * 47) % 90}%`,
width: `${36 + i * 8}px`, height: "1.5px",
background: `linear-gradient(90deg, ${p}ee, rgba(255,255,255,0.8), transparent)`,
background: isDark
? `linear-gradient(90deg, ${p}ee, rgba(255,255,255,0.8), transparent)`
: `linear-gradient(90deg, ${p}cc, rgba(0,0,0,0.15), transparent)`,
transform: "rotate(-35deg)",
animation: `ace-meteor ${1.2 + (i % 5) * 0.5}s linear ${i * 0.55}s infinite`,
borderRadius: "50%",
@@ -614,14 +614,8 @@ export function MarketingAceternity({ themeColor, config }: { themeColor?: Theme
if (bgStyle === "wavy") return (
<div style={{ position: "absolute", top: 0, left: 0, right: 0, height: "55%", zIndex: 0, overflow: "hidden" }}>
<svg viewBox="0 0 400 120" preserveAspectRatio="none" style={{ width: "100%", height: "100%" }}>
<defs>
<linearGradient id="wg1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stopColor={p} stopOpacity="0.14" />
<stop offset="100%" stopColor="#3b82f6" stopOpacity="0.08" />
</linearGradient>
</defs>
<path d="M0,40 Q50,10 100,40 T200,40 T300,40 T400,40 L400,120 L0,120 Z" fill="url(#wg1)" />
<path d="M0,65 Q70,35 140,65 T280,65 T400,65 L400,120 L0,120 Z" fill={`${p}07`} />
<path d="M0,40 Q50,10 100,40 T200,40 T300,40 T400,40 L400,120 L0,120 Z" fill={`${p}${isDark ? "20" : "14"}`} />
<path d="M0,65 Q70,35 140,65 T280,65 T400,65 L400,120 L0,120 Z" fill={`${p}${isDark ? "0e" : "07"}`} />
</svg>
</div>
);