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">