From 618ac7f5b3f8a2a457cef0b1ddb6039b214da79f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Fri, 22 May 2026 19:42:53 -0400
Subject: [PATCH] fix(registry): dark body background eliminates visible grid
 gaps

The #f6f6f4 off-white background was showing through the 30px grid
gaps and behind translated cards during the zoom/unzoom transitions,
creating visible white strips in the rendered video. Changed to
#1a1a20 (near-black) so gaps read as intentional dark separators.

Also added a .zoom-backdrop div behind the grid in the zoom demo that
fades to the focus card's gold gradient during the transition, covering
any gaps left by sibling cards translating off-screen.

Co-authored-by: Kanyini <onebenson@gmail.com>
---
 registry/components/parallax-unzoom/demo.html |  2 +-
 registry/components/parallax-zoom/demo.html   | 11 ++++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/registry/components/parallax-unzoom/demo.html b/registry/components/parallax-unzoom/demo.html
index 4c4fc2046..2c3bd73ec 100644
--- a/registry/components/parallax-unzoom/demo.html
+++ b/registry/components/parallax-unzoom/demo.html
@@ -23,7 +23,7 @@
         width: 1920px;
         height: 1080px;
         overflow: hidden;
-        background: #f6f6f4;
+        background: #1a1a20;
         font-family: "Inter", system-ui, sans-serif;
       }
 
diff --git a/registry/components/parallax-zoom/demo.html b/registry/components/parallax-zoom/demo.html
index 8be427acf..b9fe0937d 100644
--- a/registry/components/parallax-zoom/demo.html
+++ b/registry/components/parallax-zoom/demo.html
@@ -23,7 +23,7 @@
         width: 1920px;
         height: 1080px;
         overflow: hidden;
-        background: #f6f6f4;
+        background: #1a1a20;
         font-family: "Inter", system-ui, sans-serif;
       }
 
@@ -130,6 +130,14 @@
         color: rgba(26, 18, 8, 0.7);
       }
 
+      .zoom-backdrop {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(135deg, #f5c93f, #d99a18);
+        opacity: 0;
+        z-index: 0;
+      }
+
       .hero-headline {
         position: absolute;
         top: 80px;
@@ -180,6 +188,7 @@
       data-start="0"
     >
       <div class="demo-canvas">
+        <div class="zoom-backdrop"></div>
         <div class="hero-headline">Inspired by how people discover.</div>
 
         <div class="parallax-zoom-grid">