From d8b53f3f08b104247c750200a1a8cac2a319570b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miguel=20=C3=81ngel?= Date: Sat, 11 Jul 2026 20:37:28 +0000 Subject: [PATCH] fix(example): make warm-grain pass checks --- packages/cli/src/commands/init.test.ts | 20 +++ .../warm-grain/compositions/captions.html | 35 +--- .../warm-grain/compositions/graphics.html | 2 +- .../warm-grain/compositions/intro.html | 8 +- registry/examples/warm-grain/index.html | 149 +++++++++--------- 5 files changed, 108 insertions(+), 106 deletions(-) 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 @@
-

Hyperframes

-

Design simplified.

+

Hyperframes

+

+ Design simplified. +

@@ -40,7 +42,7 @@

Hyperframes

[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;