mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-01 19:42:03 +00:00
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:
+1
-1
@@ -23,7 +23,7 @@
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: #f6f6f4;
|
||||
background: #1a1a20;
|
||||
font-family: "Inter", system-ui, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
+10
-1
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user