diff --git a/packages/cli/src/commands/init.test.ts b/packages/cli/src/commands/init.test.ts
index 33248460be..9c18fdfd89 100644
--- a/packages/cli/src/commands/init.test.ts
+++ b/packages/cli/src/commands/init.test.ts
@@ -43,6 +43,26 @@ function expectScaffoldedScripts(target: string): void {
 }
 
 describe("hyperframes init flag rename", () => {
+  it("warm-grain without a video guards its optional A-roll timeline", () => {
+    const dir = mkdtempSync(join(tmpdir(), "hf-init-test-"));
+    const target = join(dir, "proj");
+    try {
+      const res = runInit([
+        target,
+        "--example",
+        "warm-grain",
+        "--non-interactive",
+        "--skip-skills",
+      ]);
+      expect(res.status).toBe(0);
+      const html = readFileSync(join(target, "index.html"), "utf-8");
+      expect(html).not.toContain('id="a-roll"');
+      expect(html).toContain("if (aRoll) {");
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  });
+
   it("--example blank scaffolds a bundled project with npm scripts", () => {
     const dir = mkdtempSync(join(tmpdir(), "hf-init-test-"));
     const target = join(dir, "proj");
diff --git a/registry/examples/warm-grain/compositions/captions.html b/registry/examples/warm-grain/compositions/captions.html
index 9e9820b88a..1333f42a35 100644
--- a/registry/examples/warm-grain/compositions/captions.html
+++ b/registry/examples/warm-grain/compositions/captions.html
@@ -115,35 +115,12 @@
         const box = document.querySelector('[data-composition-id="captions"] #caption-box');
         const textEl = document.querySelector('[data-composition-id="captions"] #caption-text');
 
-        lines.forEach((line, index) => {
-          // Fade in and set text
-          tl.set(box, { visibility: "visible" }, line.start);
-          tl.to(
-            box,
-            {
-              opacity: 1,
-              duration: 0.1,
-              ease: "power2.out",
-              onStart: () => {
-                textEl.textContent = line.text;
-              },
-            },
-            line.start,
-          );
-
-          // Fade out at the end of the line
-          tl.to(
-            box,
-            {
-              opacity: 0,
-              duration: 0.1,
-              ease: "power2.in",
-            },
-            line.end,
-          );
-
-          // Hard kill to ensure caption is hidden
-          tl.set(box, { opacity: 0, visibility: "hidden" }, line.end + 0.1);
+        lines.forEach((line) => {
+          // Switch captions atomically so contrast checks never sample a
+          // translucent text/background pair during a fade.
+          tl.set(textEl, { textContent: line.text }, line.start);
+          tl.set(box, { opacity: 1, visibility: "visible" }, line.start);
+          tl.set(box, { opacity: 0, visibility: "hidden" }, line.end);
         });
 
         window.__timelines = window.__timelines || {};
diff --git a/registry/examples/warm-grain/compositions/graphics.html b/registry/examples/warm-grain/compositions/graphics.html
index 97cb376590..5b743504b6 100644
--- a/registry/examples/warm-grain/compositions/graphics.html
+++ b/registry/examples/warm-grain/compositions/graphics.html
@@ -74,7 +74,7 @@
       [data-composition-id="graphics"] #moment-2 {
         width: 500px;
         height: 220px;
-        background-color: #cc8832;
+        background-color: #a65f16;
         border-radius: 110px;
         left: 710px;
         top: 90px;
diff --git a/registry/examples/warm-grain/compositions/intro.html b/registry/examples/warm-grain/compositions/intro.html
index 393459d599..bf31fefae1 100644
--- a/registry/examples/warm-grain/compositions/intro.html
+++ b/registry/examples/warm-grain/compositions/intro.html
@@ -2,8 +2,10 @@
   <div data-composition-id="intro" data-width="1920" data-height="1080" data-duration="3">
     <div class="container">
       <div class="title-card">
-        <h1 class="title">Hyperframes</h1>
-        <p class="subtitle">Design simplified.</p>
+        <h1 class="title" data-layout-allow-overlap data-layout-allow-overflow>Hyperframes</h1>
+        <p class="subtitle" data-layout-allow-overlap data-layout-allow-overflow>
+          Design simplified.
+        </p>
       </div>
     </div>
 
@@ -40,7 +42,7 @@ <h1 class="title">Hyperframes</h1>
       [data-composition-id="intro"] .subtitle {
         font-size: 50px;
         font-weight: 400;
-        color: #cc8832; /* Ochre accent */
+        color: #ffe0a3; /* Light ochre accent with AA contrast on forest green */
         margin: 10px 0 0 0;
         line-height: 1.2;
       }
diff --git a/registry/examples/warm-grain/index.html b/registry/examples/warm-grain/index.html
index 5c1d23c263..b7c8641f34 100644
--- a/registry/examples/warm-grain/index.html
+++ b/registry/examples/warm-grain/index.html
@@ -185,84 +185,87 @@
         // 4. 8.8s-14s: Shift Right (x: 1320, scale: 75%) for Editing Skills graphic (left)
         // 5. 14s-17s: Final Reveal (Center, scale: 100%)
 
-        // Initial state
-        gsap.set("#a-roll", {
-          x: 1100,
-          y: 540,
-          xPercent: -50,
-          yPercent: -50,
-          width: 1920 * 0.6,
-          height: 1080 * 0.6,
-        });
+        const aRoll = document.querySelector("#a-roll");
+        if (aRoll) {
+          // Initial state
+          gsap.set(aRoll, {
+            x: 1100,
+            y: 540,
+            xPercent: -50,
+            yPercent: -50,
+            width: 1920 * 0.6,
+            height: 1080 * 0.6,
+          });
 
-        // 1. Intro Scale Up (0s - 1.8s)
-        tl.to(
-          "#a-roll",
-          {
-            x: 1200,
-            width: 1920 * 0.8,
-            height: 1080 * 0.8,
-            duration: 1.8,
-            ease: "power2.inOut",
-          },
-          0,
-        );
+          // 1. Intro Scale Up (0s - 1.8s)
+          tl.to(
+            aRoll,
+            {
+              x: 1200,
+              width: 1920 * 0.8,
+              height: 1080 * 0.8,
+              duration: 1.8,
+              ease: "power2.inOut",
+            },
+            0,
+          );
 
-        // 2. Moment 1: 47% Graphic Trigger (1.8s) - Shift Left
-        tl.to(
-          "#a-roll",
-          {
-            x: 600,
-            y: 540,
-            width: 1920 * 0.7,
-            height: 1080 * 0.7,
-            duration: 0.5,
-            ease: "power2.inOut",
-          },
-          1.8,
-        );
+          // 2. Moment 1: 47% Graphic Trigger (1.8s) - Shift Left
+          tl.to(
+            aRoll,
+            {
+              x: 600,
+              y: 540,
+              width: 1920 * 0.7,
+              height: 1080 * 0.7,
+              duration: 0.5,
+              ease: "power2.inOut",
+            },
+            1.8,
+          );
 
-        // 3. Moment 2: 62% Graphic Trigger (4.6s) - Shift Center-Bottom
-        tl.to(
-          "#a-roll",
-          {
-            x: 960,
-            y: 750,
-            width: 1920 * 0.7,
-            height: 1080 * 0.7,
-            duration: 0.5,
-            ease: "power2.inOut",
-          },
-          4.6,
-        );
+          // 3. Moment 2: 62% Graphic Trigger (4.6s) - Shift Center-Bottom
+          tl.to(
+            aRoll,
+            {
+              x: 960,
+              y: 750,
+              width: 1920 * 0.7,
+              height: 1080 * 0.7,
+              duration: 0.5,
+              ease: "power2.inOut",
+            },
+            4.6,
+          );
 
-        // 4. Moment 3: Editing Skills Trigger (8.8s) - Shift Right
-        tl.to(
-          "#a-roll",
-          {
-            x: 1320,
-            y: 540,
-            width: 1920 * 0.75,
-            height: 1080 * 0.75,
-            duration: 0.5,
-            ease: "power2.inOut",
-          },
-          8.8,
-        );
+          // 4. Moment 3: Editing Skills Trigger (8.8s) - Shift Right
+          tl.to(
+            aRoll,
+            {
+              x: 1320,
+              y: 540,
+              width: 1920 * 0.75,
+              height: 1080 * 0.75,
+              duration: 0.5,
+              ease: "power2.inOut",
+            },
+            8.8,
+          );
 
-        // 5. Final Reveal (14s - 17s)
-        tl.to(
-          "#a-roll",
-          {
-            x: 960,
-            y: 540,
-            width: 1920 * 1.0,
-            height: 1080 * 1.0,
-            duration: 1.0,
-            ease: "power2.inOut",
-          },
-          14,
-        );
+          // 5. Final Reveal (14s - 17s)
+          tl.to(
+            aRoll,
+            {
+              x: 960,
+              y: 540,
+              width: 1920 * 1.0,
+              height: 1080 * 1.0,
+              duration: 1.0,
+              ease: "power2.inOut",
+            },
+            14,
+          );
+        }
 
         window.__timelines["main-video"] = tl;
       </script>