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>
This commit is contained in:
Miguel Ángel
2026-05-22 19:42:53 -04:00
co-authored by Kanyini
parent fa58903eb4
commit 618ac7f5b3
2 changed files with 11 additions and 2 deletions
+1 -1
View File
@@ -23,7 +23,7 @@
width: 1920px;
height: 1080px;
overflow: hidden;
background: #f6f6f4;
background: #1a1a20;
font-family: "Inter", system-ui, sans-serif;
}
+10 -1
View File
@@ -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">