From 69eb3b989cb37731cc3345cec9b1a3bcdd6a6bdd Mon Sep 17 00:00:00 2001
From: Mark Henderson <mark@getacquired.com>
Date: Fri, 6 Mar 2026 11:17:13 -0800
Subject: [PATCH] Fix BgLayer SVG gradient reference causing dark rectangle in
 light mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 components/design-scaffolds/marketing.tsx | 32 +++++++++--------------
 1 file changed, 13 insertions(+), 19 deletions(-)

diff --git a/components/design-scaffolds/marketing.tsx b/components/design-scaffolds/marketing.tsx
index 86db585..1c98b03 100644
--- a/components/design-scaffolds/marketing.tsx
+++ b/components/design-scaffolds/marketing.tsx
@@ -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>
     );