From 15e92e2299890ae17e13ac29dd36d4647c905dcd 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:09:30 -0400
Subject: [PATCH] fix(registry): fix rendering artifacts in
 parallax-zoom/unzoom demos
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Increase --focus-scale from 8 to 9 — at scale 8 the card matched
  the viewport width exactly (240×8=1920), leaving zero tolerance for
  subpixel rounding. Scale 9 overshoots by 240px on each axis.

- Reduce grid gap from 40px to 24px — the 1040px grid in a 1080px
  viewport left only 20px of padding, causing bottom-row cards and
  their box-shadows to clip at the frame edge.

- Remove transform-style: preserve-3d from both snippets — no 3D
  transforms are used, and preserve-3d can cause compositing artifacts
  with overflow: hidden ancestors.

- Unzoom: set --pu-sibling-fade to 0 and drive sibling opacity via
  GSAP (starting at t=2.0s). Previously, CSS-driven opacity made cards
  70% visible when they first peeked into the viewport, creating
  colored strips at the frame edge during the reveal.

Co-authored-by: Kanyini <onebenson@gmail.com>
---
 registry/components/parallax-unzoom/demo.html | 19 +++++++++++++++----
 .../parallax-unzoom/parallax-unzoom.html      |  1 -
 registry/components/parallax-zoom/demo.html   |  5 ++---
 .../parallax-zoom/parallax-zoom.html          |  1 -
 4 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/registry/components/parallax-unzoom/demo.html b/registry/components/parallax-unzoom/demo.html
index d678c6654..67259a8e3 100644
--- a/registry/components/parallax-unzoom/demo.html
+++ b/registry/components/parallax-unzoom/demo.html
@@ -41,7 +41,7 @@
         display: grid;
         grid-template-columns: repeat(5, 240px);
         grid-template-rows: repeat(3, 320px);
-        gap: 40px;
+        gap: 24px;
       }
 
       .parallax-unzoom-card {
@@ -148,11 +148,10 @@
 
       .parallax-unzoom-grid {
         --pu-progress: 0;
-        --pu-focus-scale: 8;
+        --pu-focus-scale: 9;
         --pu-sibling-push: 900px;
-        --pu-sibling-fade: 1;
+        --pu-sibling-fade: 0;
         position: relative;
-        transform-style: preserve-3d;
       }
 
       .parallax-unzoom-card {
@@ -298,6 +297,18 @@
             0.5,
           );
 
+          tl.fromTo(
+            ".parallax-unzoom-card:not([data-pu-focus='true'])",
+            { opacity: 0 },
+            {
+              opacity: 1,
+              duration: 1.5,
+              ease: "power2.out",
+              stagger: { each: 0.02, from: "center" },
+            },
+            2.0,
+          );
+
           tl.to(
             ".focus-label",
             {
diff --git a/registry/components/parallax-unzoom/parallax-unzoom.html b/registry/components/parallax-unzoom/parallax-unzoom.html
index f4a1db62a..b613aad8f 100644
--- a/registry/components/parallax-unzoom/parallax-unzoom.html
+++ b/registry/components/parallax-unzoom/parallax-unzoom.html
@@ -26,7 +26,6 @@
     --pu-sibling-push: 900px;
     --pu-sibling-fade: 1;
     position: relative;
-    transform-style: preserve-3d;
   }
 
   .parallax-unzoom-card {
diff --git a/registry/components/parallax-zoom/demo.html b/registry/components/parallax-zoom/demo.html
index 2beb61cf7..eba8f8d9d 100644
--- a/registry/components/parallax-zoom/demo.html
+++ b/registry/components/parallax-zoom/demo.html
@@ -41,7 +41,7 @@
         display: grid;
         grid-template-columns: repeat(5, 240px);
         grid-template-rows: repeat(3, 320px);
-        gap: 40px;
+        gap: 24px;
       }
 
       .parallax-zoom-card {
@@ -149,11 +149,10 @@
 
       .parallax-zoom-grid {
         --pz-progress: 0;
-        --pz-focus-scale: 8;
+        --pz-focus-scale: 9;
         --pz-sibling-push: 900px;
         --pz-sibling-fade: 1;
         position: relative;
-        transform-style: preserve-3d;
       }
 
       .parallax-zoom-card {
diff --git a/registry/components/parallax-zoom/parallax-zoom.html b/registry/components/parallax-zoom/parallax-zoom.html
index e0ac9779a..64eea25ee 100644
--- a/registry/components/parallax-zoom/parallax-zoom.html
+++ b/registry/components/parallax-zoom/parallax-zoom.html
@@ -27,7 +27,6 @@
     --pz-sibling-push: 900px;
     --pz-sibling-fade: 1;
     position: relative;
-    transform-style: preserve-3d;
   }
 
   .parallax-zoom-card {