diff --git a/packages/producer/tests/sub-comp-t0/output/compiled.html b/packages/producer/tests/sub-comp-t0/output/compiled.html
index 7de435e34..7fe867899 100644
--- a/packages/producer/tests/sub-comp-t0/output/compiled.html
+++ b/packages/producer/tests/sub-comp-t0/output/compiled.html
@@ -81,14 +81,14 @@
         width: 1920px;
         height: 1080px;
         overflow: hidden;
-        background: #07110d;
+        background: #0f172a;
       }
       #root {
         position: relative;
         width: 1920px;
         height: 1080px;
         overflow: hidden;
-        background: #07110d;
+        background: #0f172a;
       }
       .scene {
         position: absolute;
@@ -105,24 +105,34 @@
         width: 1920px;
         height: 1080px;
         overflow: hidden;
-        background: #07110d;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-        gap: 20px;
+        background: #ef4444;
+      }
+      [data-composition-id="hook"] [data-hf-authored-id="hook"] .hook-bg {
+        position: absolute;
+        inset: 0;
+        background: #ef4444;
       }
       [data-composition-id="hook"] [data-hf-authored-id="hook"] .hook-title {
+        position: absolute;
+        top: 250px;
+        left: 0;
+        width: 1920px;
+        text-align: center;
         font-family: Impact, system-ui, sans-serif;
-        font-size: 200px;
+        font-size: 280px;
         font-weight: 900;
-        color: #ff3b30;
+        color: #ffffff;
         opacity: 0;
       }
       [data-composition-id="hook"] [data-hf-authored-id="hook"] .hook-subtitle {
+        position: absolute;
+        top: 600px;
+        left: 0;
+        width: 1920px;
+        text-align: center;
         font-family: Arial, system-ui, sans-serif;
-        font-size: 60px;
-        color: #f7f3e8;
+        font-size: 80px;
+        color: #ffffff;
         opacity: 0;
       }
     
@@ -133,16 +143,23 @@
         width: 1920px;
         height: 1080px;
         overflow: hidden;
-        background: #0e2c1e;
-        display: flex;
-        align-items: center;
-        justify-content: center;
+        background: #3b82f6;
+      }
+      [data-composition-id="later"] [data-hf-authored-id="later"] .later-bg {
+        position: absolute;
+        inset: 0;
+        background: #3b82f6;
       }
       [data-composition-id="later"] [data-hf-authored-id="later"] .later-heading {
+        position: absolute;
+        top: 380px;
+        left: 0;
+        width: 1920px;
+        text-align: center;
         font-family: Arial, system-ui, sans-serif;
-        font-size: 120px;
+        font-size: 160px;
         font-weight: 700;
-        color: #f7f3e8;
+        color: #ffffff;
         opacity: 0;
       }</style>
   </head>
@@ -150,6 +167,7 @@
     <div id="root" data-composition-id="main" data-start="0" data-duration="6" data-width="1920" data-height="1080">
       <!-- First sub-comp at near-zero start: the bug trigger -->
       <div style="width:1920px;height:1080px" data-composition-file="compositions/hook.html" data-hf-authored-id="hook" data-height="1080" data-width="1920" id="scene-hook" class="scene" data-layout-allow-overflow="" data-composition-id="hook" data-start="0.001" data-duration="2.0" data-track-index="0">
+    <div class="hook-bg"></div>
     <div class="hook-title">BREAKING</div>
     <div class="hook-subtitle">Transfer confirmed</div>
 
@@ -161,6 +179,7 @@
 
       <!-- Second sub-comp at a later start: works correctly -->
       <div style="width:1920px;height:1080px" data-composition-file="compositions/later.html" data-hf-authored-id="later" data-height="1080" data-width="1920" id="scene-later" class="scene" data-layout-allow-overflow="" data-composition-id="later" data-start="2.5" data-duration="3.5" data-track-index="1">
+    <div class="later-bg"></div>
     <div class="later-heading">Second Scene</div>
 
     
@@ -462,7 +481,6 @@
         var tl = gsap.timeline({ paused: true });
         var scope = "#hook";
 
-        // Title slams in at 0.1s
         tl.fromTo(
           scope + " .hook-title",
           { scale: 3.5, opacity: 0 },
@@ -470,7 +488,6 @@
           0.1,
         );
 
-        // Subtitle fades in at 0.5s
         tl.fromTo(
           scope + " .hook-subtitle",
           { y: 30, opacity: 0 },
diff --git a/packages/producer/tests/sub-comp-t0/output/output.mp4 b/packages/producer/tests/sub-comp-t0/output/output.mp4
index 75fd20b88..30149f2e1 100644
--- a/packages/producer/tests/sub-comp-t0/output/output.mp4
+++ b/packages/producer/tests/sub-comp-t0/output/output.mp4
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3ac5c0ef3b7e6e31a49d361a62ba2ca8ac1532544eca9f6f60e0ede52836693c
-size 20587
+oid sha256:0c1a5e11656b9c8a6dbdc491557f29d32cdf4df6681e4f2ca13d60dfc74f65da
+size 23640
diff --git a/packages/producer/tests/sub-comp-t0/src/compositions/hook.html b/packages/producer/tests/sub-comp-t0/src/compositions/hook.html
index a2c1f1947..98f0a3a5d 100644
--- a/packages/producer/tests/sub-comp-t0/src/compositions/hook.html
+++ b/packages/producer/tests/sub-comp-t0/src/compositions/hook.html
@@ -1,5 +1,6 @@
 <template id="hook-template">
   <div id="hook" data-composition-id="hook" data-width="1920" data-height="1080">
+    <div class="hook-bg"></div>
     <div class="hook-title">BREAKING</div>
     <div class="hook-subtitle">Transfer confirmed</div>
 
@@ -9,24 +10,34 @@
         width: 1920px;
         height: 1080px;
         overflow: hidden;
-        background: #07110d;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-        gap: 20px;
+        background: #ef4444;
+      }
+      #hook .hook-bg {
+        position: absolute;
+        inset: 0;
+        background: #ef4444;
       }
       #hook .hook-title {
+        position: absolute;
+        top: 250px;
+        left: 0;
+        width: 1920px;
+        text-align: center;
         font-family: Impact, system-ui, sans-serif;
-        font-size: 200px;
+        font-size: 280px;
         font-weight: 900;
-        color: #ff3b30;
+        color: #ffffff;
         opacity: 0;
       }
       #hook .hook-subtitle {
+        position: absolute;
+        top: 600px;
+        left: 0;
+        width: 1920px;
+        text-align: center;
         font-family: Arial, system-ui, sans-serif;
-        font-size: 60px;
-        color: #f7f3e8;
+        font-size: 80px;
+        color: #ffffff;
         opacity: 0;
       }
     </style>
@@ -38,7 +49,6 @@
         var tl = gsap.timeline({ paused: true });
         var scope = "#hook";
 
-        // Title slams in at 0.1s
         tl.fromTo(
           scope + " .hook-title",
           { scale: 3.5, opacity: 0 },
@@ -46,7 +56,6 @@
           0.1,
         );
 
-        // Subtitle fades in at 0.5s
         tl.fromTo(
           scope + " .hook-subtitle",
           { y: 30, opacity: 0 },
diff --git a/packages/producer/tests/sub-comp-t0/src/compositions/later.html b/packages/producer/tests/sub-comp-t0/src/compositions/later.html
index 5de12b5ba..6929fe91b 100644
--- a/packages/producer/tests/sub-comp-t0/src/compositions/later.html
+++ b/packages/producer/tests/sub-comp-t0/src/compositions/later.html
@@ -1,5 +1,6 @@
 <template id="later-template">
   <div id="later" data-composition-id="later" data-width="1920" data-height="1080">
+    <div class="later-bg"></div>
     <div class="later-heading">Second Scene</div>
 
     <style>
@@ -8,16 +9,23 @@
         width: 1920px;
         height: 1080px;
         overflow: hidden;
-        background: #0e2c1e;
-        display: flex;
-        align-items: center;
-        justify-content: center;
+        background: #3b82f6;
+      }
+      #later .later-bg {
+        position: absolute;
+        inset: 0;
+        background: #3b82f6;
       }
       #later .later-heading {
+        position: absolute;
+        top: 380px;
+        left: 0;
+        width: 1920px;
+        text-align: center;
         font-family: Arial, system-ui, sans-serif;
-        font-size: 120px;
+        font-size: 160px;
         font-weight: 700;
-        color: #f7f3e8;
+        color: #ffffff;
         opacity: 0;
       }
     </style>
diff --git a/packages/producer/tests/sub-comp-t0/src/index.html b/packages/producer/tests/sub-comp-t0/src/index.html
index 00d00a260..5ee74444e 100644
--- a/packages/producer/tests/sub-comp-t0/src/index.html
+++ b/packages/producer/tests/sub-comp-t0/src/index.html
@@ -15,14 +15,14 @@
         width: 1920px;
         height: 1080px;
         overflow: hidden;
-        background: #07110d;
+        background: #0f172a;
       }
       #root {
         position: relative;
         width: 1920px;
         height: 1080px;
         overflow: hidden;
-        background: #07110d;
+        background: #0f172a;
       }
       .scene {
         position: absolute;