From 52ebe28fea04ba416bf92b512ede0e19d4d97686 Mon Sep 17 00:00:00 2001
From: Miao Yang <miao.yang@heygen.com>
Date: Sat, 27 Jun 2026 01:38:20 +0800
Subject: [PATCH 1/2] feat(skills): product-launch-video + consolidate motion
 knowledge into hyperframes-animation

- Add the product-launch-video skill: shot-sequence architecture where each
  visual frame is a time-coded shot sequence picked from a blueprint menu and
  paced to the voiceover (anti-PowerPoint). Includes the frame-worker sub-agent,
  story/visual/motion-design references, and audio/captions/transitions/
  stage-assets/assemble-index scripts.
- Consolidate motion knowledge in hyperframes-animation as the single source of
  truth: promote the updated atomic rules (31 -> 36) and rename product-launch-
  video's archetypes into hyperframes-animation blueprints (13 -> 15, replacing
  the old set). product-launch-video, faceless-explainer, and pr-to-video now
  reference them via ../hyperframes-animation/{rules-index,blueprints-index}.md
  and the rules/blueprints dirs. Fixes the discrete-text-sequence broken links;
  blueprints no longer ship per-id runnable examples, so example references in
  the consumers were dropped.
- Default HeyGen TTS voice to Marcia (deterministic; was the API's first English
  voice, which drifts on catalog re-sort). Override with --voice.
- assemble-index pre-assembly frame guards: auto-repair a sub-comp root missing
  canvas dims; hard-fail on <video>/<audio> inside a sub-comp; hard-fail on a
  timed non-root element missing class="clip" or overlapping same-track clips.
- Lint/CLI: lint media inside sub-compositions as an error; stop false-positive
  caption layout/lint findings; contrast/layout-audit skip elements hidden by an
  invisible ancestor.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../src/commands/contrast-audit.browser.js    |  19 +
 .../cli/src/commands/layout-audit.browser.js  |  27 +-
 .../src/commands/layout-audit.browser.test.ts |  36 ++
 packages/core/src/lint/rules/captions.test.ts |  20 +
 packages/core/src/lint/rules/captions.ts      |  11 +-
 packages/core/src/lint/rules/media.test.ts    |  28 ++
 packages/core/src/lint/rules/media.ts         |  23 +
 skills-manifest.json                          |  12 +-
 .../references/visual-design.md               |   2 +-
 skills/hyperframes-animation/SKILL.md         |   6 +-
 .../hyperframes-animation/blueprints-index.md | 255 +++++-----
 .../blueprints/brand-reveal-assemble-zoom.md  | 183 --------
 .../blueprints/comparison-split-cards.md      | 141 ------
 .../blueprints/comparison-split.md            |  27 ++
 .../blueprints/concept-demo-decode-pan.md     | 179 -------
 .../blueprints/constellation-hub.md           |  44 ++
 .../blueprints/cta-morph-press.md             | 191 +-------
 .../blueprints/cta-orbit-collapse.md          | 189 --------
 .../blueprints/cursor-ui-demo.md              |  57 +++
 .../blueprints/dataviz-countup.md             |  46 ++
 .../blueprints/demo-page-scroll-spotlight.md  | 209 ---------
 .../blueprints/device-surface-showcase.md     |  53 +++
 .../blueprints/grid-card-assemble.md          |  66 +++
 .../blueprints/hook-counter-burst.md          | 161 -------
 .../blueprints/kinetic-type-beats.md          |  78 ++++
 .../blueprints/logo-assemble-lockup.md        |  69 +++
 .../blueprints/messaging-multi-phrase.md      | 126 -----
 .../blueprints/metric-video-text-pivot.md     | 212 ---------
 .../blueprints/overwhelm-surround.md          |  28 ++
 .../blueprints/problem-mockup-overwhelm.md    | 152 ------
 .../blueprints/proof-logo-chain.md            | 189 --------
 .../blueprints/spatial-pan-stations.md        |  37 ++
 .../blueprints/takeover-ticker-displace.md    | 168 -------
 .../blueprints/ticker-takeover.md             |  29 ++
 .../blueprints/titlecard-reveal.md            |  42 ++
 .../blueprints/typewriter-reveal.md           |  51 ++
 .../blueprints/video-text-pivot.md            |  30 ++
 .../blueprints/workflow-approve-press.md      | 192 --------
 skills/hyperframes-animation/rules-index.md   |  11 +-
 .../rules/ambient-glow-bloom.md               | 305 ++++++++++++
 .../rules/avatar-cloud-network.md             |   6 +-
 .../rules/cursor-click-ripple.md              |  24 +-
 .../rules/depth-of-field-blur.md              | 313 +++++++++++++
 .../rules/depth-scatter-assemble.md           | 303 ++++++++++++
 .../rules/dynamic-content-sequencing.md       |  14 +-
 .../rules/hacker-flip-3d.md                   |  10 +-
 .../rules/kinetic-beat-slam.md                |   6 +-
 .../rules/motion-blur-streak.md               | 328 +++++++++++++
 .../rules/orbit-3d-entry.md                   |  18 +-
 .../rules/sine-wave-loop.md                   |  11 +-
 .../rules/spring-pop-entrance.md              | 273 +++++++++++
 .../rules/stat-bars-and-fills.md              |   6 +-
 .../rules/vertical-spring-ticker.md           |   6 +-
 skills/hyperframes-media/references/tts.md    |   2 +-
 skills/hyperframes-media/scripts/lib/tts.mjs  |   6 +-
 .../pr-to-video/references/visual-design.md   |   2 +-
 skills/product-launch-video/SKILL.md          |  49 +-
 .../references/composition.md                 | 119 -----
 .../references/cut-catalog.md                 | 220 +++++++++
 .../references/motion-language.md             | 195 ++++----
 .../references/story-design.md                | 442 +++++++++++-------
 .../references/visual-design.md               | 127 +++--
 .../scripts/assemble-index.mjs                | 215 ++++++++-
 .../scripts/build-frame.mjs                   | 291 +++++++++++-
 .../product-launch-video/scripts/captions.mjs |  23 +-
 .../scripts/lib/tokens.mjs                    |  52 ++-
 .../sub-agents/frame-worker.md                |  27 +-
 67 files changed, 3810 insertions(+), 2982 deletions(-)
 delete mode 100644 skills/hyperframes-animation/blueprints/brand-reveal-assemble-zoom.md
 delete mode 100644 skills/hyperframes-animation/blueprints/comparison-split-cards.md
 create mode 100644 skills/hyperframes-animation/blueprints/comparison-split.md
 delete mode 100644 skills/hyperframes-animation/blueprints/concept-demo-decode-pan.md
 create mode 100644 skills/hyperframes-animation/blueprints/constellation-hub.md
 delete mode 100644 skills/hyperframes-animation/blueprints/cta-orbit-collapse.md
 create mode 100644 skills/hyperframes-animation/blueprints/cursor-ui-demo.md
 create mode 100644 skills/hyperframes-animation/blueprints/dataviz-countup.md
 delete mode 100644 skills/hyperframes-animation/blueprints/demo-page-scroll-spotlight.md
 create mode 100644 skills/hyperframes-animation/blueprints/device-surface-showcase.md
 create mode 100644 skills/hyperframes-animation/blueprints/grid-card-assemble.md
 delete mode 100644 skills/hyperframes-animation/blueprints/hook-counter-burst.md
 create mode 100644 skills/hyperframes-animation/blueprints/kinetic-type-beats.md
 create mode 100644 skills/hyperframes-animation/blueprints/logo-assemble-lockup.md
 delete mode 100644 skills/hyperframes-animation/blueprints/messaging-multi-phrase.md
 delete mode 100644 skills/hyperframes-animation/blueprints/metric-video-text-pivot.md
 create mode 100644 skills/hyperframes-animation/blueprints/overwhelm-surround.md
 delete mode 100644 skills/hyperframes-animation/blueprints/problem-mockup-overwhelm.md
 delete mode 100644 skills/hyperframes-animation/blueprints/proof-logo-chain.md
 create mode 100644 skills/hyperframes-animation/blueprints/spatial-pan-stations.md
 delete mode 100644 skills/hyperframes-animation/blueprints/takeover-ticker-displace.md
 create mode 100644 skills/hyperframes-animation/blueprints/ticker-takeover.md
 create mode 100644 skills/hyperframes-animation/blueprints/titlecard-reveal.md
 create mode 100644 skills/hyperframes-animation/blueprints/typewriter-reveal.md
 create mode 100644 skills/hyperframes-animation/blueprints/video-text-pivot.md
 delete mode 100644 skills/hyperframes-animation/blueprints/workflow-approve-press.md
 create mode 100644 skills/hyperframes-animation/rules/ambient-glow-bloom.md
 create mode 100644 skills/hyperframes-animation/rules/depth-of-field-blur.md
 create mode 100644 skills/hyperframes-animation/rules/depth-scatter-assemble.md
 create mode 100644 skills/hyperframes-animation/rules/motion-blur-streak.md
 create mode 100644 skills/hyperframes-animation/rules/spring-pop-entrance.md
 delete mode 100644 skills/product-launch-video/references/composition.md
 create mode 100644 skills/product-launch-video/references/cut-catalog.md

diff --git a/packages/cli/src/commands/contrast-audit.browser.js b/packages/cli/src/commands/contrast-audit.browser.js
index d1f5fe1478..7b45f6e7fb 100644
--- a/packages/cli/src/commands/contrast-audit.browser.js
+++ b/packages/cli/src/commands/contrast-audit.browser.js
@@ -88,6 +88,25 @@ window.__contrastAudit = async function (imgBase64, time) {
     var cs = getComputedStyle(el);
     if (cs.visibility === "hidden" || cs.display === "none") continue;
     if (parseFloat(cs.opacity) <= 0.01) continue;
+    // Also skip when an ANCESTOR is effectively invisible (opacity≈0 / hidden / display:none).
+    // Karaoke captions keep every word at opacity 1 but toggle the GROUP's opacity per beat,
+    // so an inactive word's OWN opacity is 1 — only an ancestor reveals it's hidden. Without
+    // this, the hidden caption words flood the audit with false ~1:1 contrast warnings.
+    var anc = el.parentElement,
+      ancHidden = false;
+    while (anc && anc !== document.body) {
+      var acs = getComputedStyle(anc);
+      if (
+        acs.visibility === "hidden" ||
+        acs.display === "none" ||
+        parseFloat(acs.opacity) <= 0.01
+      ) {
+        ancHidden = true;
+        break;
+      }
+      anc = anc.parentElement;
+    }
+    if (ancHidden) continue;
     var rect = el.getBoundingClientRect();
     if (rect.width < 8 || rect.height < 8) continue;
     if (rect.right <= 0 || rect.bottom <= 0 || rect.left >= w || rect.top >= h) continue;
diff --git a/packages/cli/src/commands/layout-audit.browser.js b/packages/cli/src/commands/layout-audit.browser.js
index 76ca106a8a..b3722ecb37 100644
--- a/packages/cli/src/commands/layout-audit.browser.js
+++ b/packages/cli/src/commands/layout-audit.browser.js
@@ -27,14 +27,18 @@
     return Math.round(value * 100) / 100;
   }
 
-  function overflowFor(subject, container, tolerance) {
+  function overflowFor(subject, container, tolerance, vTolerance) {
+    // Horizontal axis uses `tolerance`; vertical axis uses `vTolerance` (defaults to the same).
+    // A separate vertical tolerance lets text overflow checks absorb glyph ink that exceeds a
+    // snug line-height — see textOverflowIssues.
+    if (vTolerance == null) vTolerance = tolerance;
     const overflow = {};
     if (subject.left < container.left - tolerance)
       overflow.left = round(container.left - subject.left);
     if (subject.right > container.right + tolerance)
       overflow.right = round(subject.right - container.right);
-    if (subject.top < container.top - tolerance) overflow.top = round(container.top - subject.top);
-    if (subject.bottom > container.bottom + tolerance)
+    if (subject.top < container.top - vTolerance) overflow.top = round(container.top - subject.top);
+    if (subject.bottom > container.bottom + vTolerance)
       overflow.bottom = round(subject.bottom - container.bottom);
     return Object.keys(overflow).length > 0 ? overflow : null;
   }
@@ -319,9 +323,22 @@
 
     const container = nearestConstraint(element, root, rootRect);
     const containerRect = container === root ? rootRect : toRect(container.getBoundingClientRect());
-    const containerOverflow = overflowFor(textRect, containerRect, tolerance);
+    // Glyph ink (ascenders / descenders / accents / heavy display faces) routinely exceeds a
+    // snug line-height box by a few px, proportional to font size. When the constraining box
+    // does NOT clip, that vertical spill is normal typography — it shows in the padding, nothing
+    // is hidden — not a layout defect (it false-flagged caption words). Allow a font-metric
+    // vertical tolerance there; keep it tight when the box actually clips (a real cut-off) and
+    // always tight horizontally (too-wide text is a real wrap/legibility issue).
+    const elementStyle = getComputedStyle(element);
+    const containerClips = clipsOverflow(
+      container === root ? getComputedStyle(root) : getComputedStyle(container),
+    );
+    const verticalTolerance = containerClips
+      ? tolerance
+      : Math.max(tolerance, parsePx(elementStyle.fontSize) * 0.2);
+    const containerOverflow = overflowFor(textRect, containerRect, tolerance, verticalTolerance);
     if (containerOverflow && !hasAllowOverflowFlag(element)) {
-      const style = getComputedStyle(element);
+      const style = elementStyle;
       issues.push({
         code: "text_box_overflow",
         severity: "error",
diff --git a/packages/cli/src/commands/layout-audit.browser.test.ts b/packages/cli/src/commands/layout-audit.browser.test.ts
index ab592ae2de..b6917f00a1 100644
--- a/packages/cli/src/commands/layout-audit.browser.test.ts
+++ b/packages/cli/src/commands/layout-audit.browser.test.ts
@@ -98,6 +98,42 @@ describe("layout-audit.browser", () => {
 
     expect(runAudit()).toEqual([]);
   });
+
+  it("does not flag glyph-ink vertical spill within the font-metric band on a non-clipping box", () => {
+    // A painted, non-clipping caption-word-like box whose glyph ink (text rect) exceeds its snug
+    // line-height box by a few px vertically — normal typography, nothing is clipped. (fontSize
+    // 36 → vertical tolerance ~7.2px; the ink spills ~5px each side, well within it.)
+    document.body.innerHTML = `
+      <div id="root" data-composition-id="main" data-width="640" data-height="360">
+        <div id="bubble"><div id="headline">crews,</div></div>
+      </div>
+    `;
+    installGeometry({
+      root: rect({ left: 0, top: 0, width: 640, height: 360 }),
+      bubble: rect({ left: 80, top: 120, width: 400, height: 80 }),
+      text: rect({ left: 100, top: 115, width: 300, height: 90 }),
+    });
+    installAuditScript();
+
+    expect(runAudit().some((issue) => issue.code === "text_box_overflow")).toBe(false);
+  });
+
+  it("still flags vertical text overflow beyond the font-metric band", () => {
+    // Ink is 40px / 80px beyond the box — far past the ~7px font-metric band: a real overflow.
+    document.body.innerHTML = `
+      <div id="root" data-composition-id="main" data-width="640" data-height="360">
+        <div id="bubble"><div id="headline">two crammed lines</div></div>
+      </div>
+    `;
+    installGeometry({
+      root: rect({ left: 0, top: 0, width: 640, height: 360 }),
+      bubble: rect({ left: 80, top: 120, width: 400, height: 80 }),
+      text: rect({ left: 100, top: 80, width: 300, height: 200 }),
+    });
+    installAuditScript();
+
+    expect(runAudit().some((issue) => issue.code === "text_box_overflow")).toBe(true);
+  });
 });
 
 describe("layout-audit.browser content overlap", () => {
diff --git a/packages/core/src/lint/rules/captions.test.ts b/packages/core/src/lint/rules/captions.test.ts
index a954145088..6977acb6e6 100644
--- a/packages/core/src/lint/rules/captions.test.ts
+++ b/packages/core/src/lint/rules/captions.test.ts
@@ -72,6 +72,26 @@ describe("caption rules", () => {
     expect(finding).toBeUndefined();
   });
 
+  it("does not warn on a content frame that only mentions karaoke in a comment", async () => {
+    const html = `<template id="06-one-platform-template">
+  <div id="root" data-composition-id="06-one-platform" data-width="1920" data-height="1080">
+    <script>
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+      // "Minutes, not weeks" lands with a karaoke-style keyword glow
+      SCREENS.forEach(function (s, i) {
+        var el = document.getElementById("screen-" + i);
+        tl.to(el, { y: -40, opacity: 0, duration: 0.3 }, i * 1.3);
+      });
+      window.__timelines["06-one-platform"] = tl;
+    </script>
+  </div>
+</template>`;
+    const result = await lintHyperframeHtml(html, { isSubComposition: true });
+    const finding = result.findings.find((f) => f.code === "caption_exit_missing_hard_kill");
+    expect(finding).toBeUndefined();
+  });
+
   it("warns when caption group has nowrap without max-width", async () => {
     const html = `
 <html><body>
diff --git a/packages/core/src/lint/rules/captions.ts b/packages/core/src/lint/rules/captions.ts
index d5c9d0e3ab..21af66d0e7 100644
--- a/packages/core/src/lint/rules/captions.ts
+++ b/packages/core/src/lint/rules/captions.ts
@@ -30,8 +30,17 @@ function extractArrayLiteral(src: string, varMatch: RegExpExecArray): string | n
 
 export const captionRules: Array<(ctx: LintContext) => HyperframeLintFinding[]> = [
   // caption_exit_missing_hard_kill
-  ({ scripts }) => {
+  ({ scripts, styles, options, rootCompositionId }) => {
     const findings: HyperframeLintFinding[] = [];
+    // Only the ACTUAL captions composition. A content frame that merely mentions
+    // "karaoke" / "caption-*" in a comment (or uses an unrelated forEach + opacity:0
+    // screen-swap) is NOT captions — gating here prevents the false positive that fired
+    // on a content frame whose only caption signal was a descriptive comment.
+    const isCaptionComposition =
+      Boolean(options.filePath && /caption/i.test(options.filePath)) ||
+      rootCompositionId === "captions" ||
+      styles.some((s) => /\.caption[-_]?(?:group|word|line|block)\b|\.cg-/.test(s.content));
+    if (!isCaptionComposition) return findings;
     for (const script of scripts) {
       const content = script.content;
       const hasExitTween = /\.to\s*\([^,]+,\s*\{[^}]*opacity\s*:\s*0/.test(content);
diff --git a/packages/core/src/lint/rules/media.test.ts b/packages/core/src/lint/rules/media.test.ts
index 68efbed88e..5a38bf02c5 100644
--- a/packages/core/src/lint/rules/media.test.ts
+++ b/packages/core/src/lint/rules/media.test.ts
@@ -220,4 +220,32 @@ describe("media rules", () => {
     const finding = result.findings.find((f) => f.code === "imperative_media_control");
     expect(finding).toBeUndefined();
   });
+
+  it("flags <video> inside a sub-composition (media must be a host-root child)", async () => {
+    const html = `<template id="scene-template">
+  <div id="root" data-composition-id="scene" data-width="1920" data-height="1080">
+    <video id="v1" src="clip.mp4" data-start="0" data-duration="5" muted playsinline></video>
+    <script>window.__timelines = window.__timelines || {}; window.__timelines["scene"] = gsap.timeline({ paused: true });</script>
+  </div>
+</template>`;
+    const result = await lintHyperframeHtml(html, { isSubComposition: true });
+    const finding = result.findings.find((f) => f.code === "media_in_subcomposition");
+    expect(finding).toBeDefined();
+    expect(finding?.severity).toBe("error");
+    expect(finding?.elementId).toBe("v1");
+    expect(finding?.message).toContain("sub-composition");
+  });
+
+  it("does not flag media in a host-root (non-sub) composition", async () => {
+    const html = `
+<html><body>
+  <div id="root" data-composition-id="c1" data-width="1920" data-height="1080">
+    <video id="v1" src="clip.mp4" data-start="0" data-duration="5" muted playsinline></video>
+  </div>
+  <script>window.__timelines = window.__timelines || {}; window.__timelines["c1"] = gsap.timeline({ paused: true });</script>
+</body></html>`;
+    const result = await lintHyperframeHtml(html);
+    const finding = result.findings.find((f) => f.code === "media_in_subcomposition");
+    expect(finding).toBeUndefined();
+  });
 });
diff --git a/packages/core/src/lint/rules/media.ts b/packages/core/src/lint/rules/media.ts
index f6bca03233..03d5f53bfa 100644
--- a/packages/core/src/lint/rules/media.ts
+++ b/packages/core/src/lint/rules/media.ts
@@ -342,6 +342,29 @@ export const mediaRules: Array<(ctx: LintContext) => HyperframeLintFinding[]> =
     return findings;
   },
 
+  // media_in_subcomposition — <video>/<audio> only render as a DIRECT child of the host
+  // root (index.html). Inside a sub-composition <template> the runtime never seeks/decodes
+  // them, so they render BLANK/black in preview and renders — and the other lint/validate
+  // passes otherwise miss it (only a per-frame snapshot reveals the blank panel).
+  ({ tags, options }) => {
+    const findings: HyperframeLintFinding[] = [];
+    if (!options.isSubComposition) return findings;
+    for (const tag of tags) {
+      if (tag.name !== "video" && tag.name !== "audio") continue;
+      const elementId = readAttr(tag.raw, "id") || undefined;
+      findings.push({
+        code: "media_in_subcomposition",
+        severity: "error",
+        message: `<${tag.name}${elementId ? ` id="${elementId}"` : ""}> is inside a sub-composition. The runtime only drives media that is a DIRECT child of the host root (index.html); media inside a sub-comp <template> is never seeked/decoded and renders BLANK/black in preview and renders.`,
+        elementId,
+        fixHint:
+          "Move the media OUT of the sub-composition: place the <video>/<audio> as a direct child of #root in index.html, positioned over the scene, and drive any per-scene motion on the MAIN timeline at global time (a sub-comp timeline cannot reach host elements). See composition-patterns.md archetype B.",
+        snippet: truncateSnippet(tag.raw),
+      });
+    }
+    return findings;
+  },
+
   // self_closing_media_tag
   ({ source }) => {
     const findings: HyperframeLintFinding[] = [];
diff --git a/skills-manifest.json b/skills-manifest.json
index 303a4a5cb5..4edefa4dc8 100644
--- a/skills-manifest.json
+++ b/skills-manifest.json
@@ -6,7 +6,7 @@
       "files": 144
     },
     "faceless-explainer": {
-      "hash": "d6beeca6029b815a",
+      "hash": "e50186bf73e5092e",
       "files": 17
     },
     "general-video": {
@@ -18,8 +18,8 @@
       "files": 1
     },
     "hyperframes-animation": {
-      "hash": "ced7bd16b3cdb376",
-      "files": 108
+      "hash": "57458f4308708e21",
+      "files": 115
     },
     "hyperframes-cli": {
       "hash": "ed24d781c2ae462b",
@@ -34,7 +34,7 @@
       "files": 67
     },
     "hyperframes-media": {
-      "hash": "ce80c5a15ecaf0fc",
+      "hash": "096b2ab0a43b05dd",
       "files": 40
     },
     "hyperframes-registry": {
@@ -54,11 +54,11 @@
       "files": 132
     },
     "pr-to-video": {
-      "hash": "d7acaeb6281f99ac",
+      "hash": "f8f7691af263bf03",
       "files": 21
     },
     "product-launch-video": {
-      "hash": "5669874d3bdd5bd4",
+      "hash": "d47b790f109c8077",
       "files": 18
     },
     "remotion-to-hyperframes": {
diff --git a/skills/faceless-explainer/references/visual-design.md b/skills/faceless-explainer/references/visual-design.md
index f6aa37f851..6533caa46b 100644
--- a/skills/faceless-explainer/references/visual-design.md
+++ b/skills/faceless-explainer/references/visual-design.md
@@ -32,7 +32,7 @@ Entrance: the snowball seats upper-left on a dim hill gradient. Development: it
 ```
 
 - **`effects`** — name atomic effect **ids** from `hyperframes-animation`'s rules index. **Cite ≥3 when you name no `blueprint`** (the worker composes them into the beat; fewer than 3 reads as generic motion); 1+ as accents when a blueprint already carries the choreography. With no blueprint, those **≥3 effects are the shot's phases** — your note must **sequence them** (one enters, one develops, one emphasizes), not list them as a flat set that all fires at entry. You cite; the worker **reads the recipe body and reproduces it** (not a name-guess).
-- **`blueprint`** — name **one** multi-phase blueprint id from `hyperframes-animation/blueprints-index.md` when a frame's beat wants a proven multi-phase shape. Two postures — both require the worker to read the recipe body (and run its `examples/<id>.html`) first:
+- **`blueprint`** — name **one** multi-phase blueprint id from `hyperframes-animation/blueprints-index.md` when a frame's beat wants a proven multi-phase shape. Two postures — both require the worker to read the recipe body first:
   - **Reproduce** — the blueprint fits the beat cleanly and the frame's content maps onto its slots; write the composition note shot-by-shot to match.
   - **Adapt** — the blueprint is the right _structure_ but the content / beat doesn't fit its exact form (or you want a fresher surface). Lead the note with a **`Base / Keep / Depart`** line — `Base:` the blueprint id · `Keep:` its **signature** move (never drop this) · `Depart:` what you change and why. Adapt may **extend or vary, never reduce below the shot model** — never flatten a multi-phase blueprint into a single entrance.
 
diff --git a/skills/hyperframes-animation/SKILL.md b/skills/hyperframes-animation/SKILL.md
index 5e62d43ce9..416c7c10a4 100644
--- a/skills/hyperframes-animation/SKILL.md
+++ b/skills/hyperframes-animation/SKILL.md
@@ -15,10 +15,10 @@ Pick 2-4 rules from `rules-index.md`, glue them together with a single paused GS
 
 ## Load a blueprint when
 
-- The scene matches an existing pre-designed multi-phase template (brand-reveal, social-proof, demo-page-scroll-spotlight, etc.) and reusing its phase pipeline saves real authoring time
+- The scene matches an existing pre-designed multi-phase template (brand-reveal, social-proof, etc.) and reusing its phase pipeline saves real authoring time
 - You want runnable ground-truth code for a complex 4-5 phase choreography
 
-Blueprints live in `blueprints-index.md`. Each entry points to `blueprints/<id>.md` (recipe) and `examples/<id>.html` (runnable sample). Do not read it speculatively; load it when you've already decided you need scene-level orchestration.
+Blueprints live in `blueprints-index.md`. Each entry points to `blueprints/<id>.md` (recipe). Do not read it speculatively; load it when you've already decided you need scene-level orchestration.
 
 ## Routing
 
@@ -27,7 +27,7 @@ Blueprints live in `blueprints-index.md`. Each entry points to `blueprints/<id>.
 | Pick an atomic motion pattern by trigger / tag                                 | `rules-index.md`                                    |
 | Read one rule's full HTML / CSS / GSAP recipe                                  | `rules/<name>.md`                                   |
 | Pick a multi-phase scene template                                              | `blueprints-index.md`                               |
-| Read one blueprint's full recipe                                               | `blueprints/<id>.md` + `examples/<id>.html`         |
+| Read one blueprint's full recipe                                               | `blueprints/<id>.md`                                |
 | Author a scene transition (CSS-driven, between two clips)                      | `transitions/overview.md`, `transitions/catalog.md` |
 | Look up a broader motion-design technique                                      | `techniques.md`                                     |
 | Analyze an existing composition's animation map                                | `scripts/animation-map.mjs`                         |
diff --git a/skills/hyperframes-animation/blueprints-index.md b/skills/hyperframes-animation/blueprints-index.md
index 9a296a8b8e..55409a4c84 100644
--- a/skills/hyperframes-animation/blueprints-index.md
+++ b/skills/hyperframes-animation/blueprints-index.md
@@ -1,173 +1,146 @@
-# Scene Blueprints (load on demand)
+# Blueprints (the proven shapes)
 
-> Read this file **only when** authoring a full scene from a pre-designed multi-phase choreography template. For atomic motion techniques, the rules index in [SKILL.md](./SKILL.md) is the default starting point.
+> Entry point to the blueprint layer. Read this to find the shape for a frame; read `blueprints/<id>.md` to instantiate it. The Step-4 method (Reproduce / Adapt / Compose, what to write per frame) lives in `visual-design.md` — this file is the menu + the picker.
 
-A **blueprint** describes a complete multi-phase scene with phase pipeline, glue code, and a working sample composition. Each blueprint has a runnable HTML example under `examples/` you can use as ground truth.
+A **blueprint** is a product-agnostic, **time-coded shot template** — `Scene N (a–b s): …` with `[slots]` and one named **signature move** — reverse-engineered from 50 golden product-launch clips (plus 13 hyperframes-animation blueprints reverse-translated to the same brief format). It encodes a whole shot across its full duration — reveals paced to the spoken line, not dumped at t=0 — so instantiating one structurally keeps content arriving instead of freezing. The full template lives in `blueprints/<id>.md`. **Step 4 (visual design) instantiates one blueprint per frame** (or composes from the motion vocabulary when none fits).
 
-## Picking a blueprint
+## The 15 blueprints
 
-Match your scene's narrative role to a blueprint role: `social-proof`, `concept-demo`, `brand-reveal`, `takeover`, `demo`, `opening-hook`, `workflow`, `problem`, `cta`, `comparison`, `metric`, `messaging`.
-
-If two blueprints fit, pick the one whose `uses` rules are closer to your visual plan — composing existing rules is cheaper than reinventing.
-
-If no blueprint fits, **compose rules directly** from [SKILL.md](./SKILL.md) — blueprints are starting points, not requirements.
+<blueprints>
+<blueprint id="kinetic-type-beats" roles="Hook, Problem, Product_Intro, Benefits, CTA, Brand_Outro" duration="3.4–12s">
+Flat, centered, bold-type shot where the **motion IS the words changing** — a fixed line swaps tokens in place by hard cut, or a statement builds across full-screen beats (each its own move) onto a spring-pop payoff. The workhorse (6 roles). Reach for it whenever the words carry the shot and there's no set, surface, or click.
+</blueprint>
 
-## Blueprints
+<blueprint id="typewriter-reveal" roles="Hook, Brand_Outro" duration="3.6–7s">
+A live text caret **types (and edits) a line as a human would**, then collapses it and pops a brand payoff, or holds it under a persistent mark while a sub-line types into the final CTA. Reach for it when "someone is typing this" should be the engine — a relatable typed pain → brand, or a standing logo + a typed CTA rail.
+</blueprint>
 
-<blueprints>
-<blueprint
-  id="proof-logo-chain"
-  path="blueprints/proof-logo-chain.md"
-  example="examples/proof-logo-chain.html"
-  role="social-proof"
-  duration="6-10s"
-  phases="5"
-  uses="hacker-flip-3d, vertical-spring-ticker, coordinate-target-zoom, avatar-cloud-network"
-  triggers="brand reveal, social proof, #1 tool, million users, trusted by">
-  Logo threads through 5 phases: hacker-flip text → text swap → logo centers → avatar cloud + counter → partner brand logos. Example (8s): hacker-flip 'HyperFrames' → 'HTML Video' lockup with rolling `render / ship` ticker → logo recenters → '60 FPS' static label with scale-pulse + avatar cloud + SVG connection lines → partner brand-logo strip. Single paused GSAP timeline drives all five phases.
+<blueprint id="spatial-pan-stations" roles="Hook, Problem" duration="7–10s">
+Pre-placed labeled **stations on one oversized canvas, traversed by a single virtual camera** — repeated lateral/diagonal pans centering each station and revealing a callout, landing held on the last. Reach for it for a milestone timeline panned to "us," or a connected web of pain stations ending in a tangled knot.
 </blueprint>
 
-<blueprint
-  id="concept-demo-decode-pan"
-  path="blueprints/concept-demo-decode-pan.md"
-  example="examples/concept-demo-decode-pan.html"
-  role="concept-demo"
-  duration="6-10s"
-  phases="4"
-  uses="hacker-flip-3d, camera-cursor-tracking, discrete-text-sequence"
-  triggers="decode effect, scene transition, search bar typing, show then demonstrate">
-Shot 1 hacker-flip decode → horizontal camera pan with parallax → Shot 2 cursor-tracked typing. Example (7s): Shot 1 "HyperFrames renders" static rise + hacker-flip decode of accent word "video" → horizontal pan with parallax exit + scale-in → Shot 2 cursor-tracked typing "HTML, CSS and JS become MP4" inside a pre-allocated search-bar. Demonstrates browser-native text measurement (no charWidthRatio constant) and piecewise Math.min camera tracking.
+<blueprint id="constellation-hub" roles="Hook, Social_Proof" duration="5–6s">
+Iconned **nodes spring into a ring around a center**, then resolve on the core — a camera push-IN (depth-of-field collapsing onto it) or a held hub mark with satellites orbiting it. Reach for it for "it connects everything / one hub" or "sits at the center of your stack."
 </blueprint>
 
-<blueprint
-  id="brand-reveal-assemble-zoom"
-  path="blueprints/brand-reveal-assemble-zoom.md"
-  example="examples/brand-reveal-assemble-zoom.html"
-  role="brand-reveal"
-  duration="4-6s"
-  phases="5"
-  uses="discrete-text-sequence, coordinate-target-zoom, sine-wave-loop"
-  triggers="brand reveal, zoom into logo, hero focus, wide to close-up">
-Companion text assembles beside hero → companion exits + recenters → camera zooms into hero → hero breathes. Example (5s): 'Just use' discrete-assembly companion beside 'Hyperframes' + logo image → companion slides out and container recenters → camera zooms 5.5× into the logo → logo breathes (sine onUpdate, multiplicative). Demonstrates three nested transform layers (scale → translate → recenter) and brandTextWidth measurement after fonts.ready.
+<blueprint id="grid-card-assemble" roles="Key_Feature, Benefits, Social_Proof" duration="3.0–10.5s">
+N items (tiles / cards / logos / list-lines) **self-assemble in a staggered cascade** into a grid or vertical list and hold; an optional camera zoom-OUT reveals the array inside a vaster whole. Reach for it to enumerate breadth at once — a feature grid, an accumulating benefit list, or a logo wall.
 </blueprint>
 
-<blueprint
-  id="takeover-ticker-displace"
-  path="blueprints/takeover-ticker-displace.md"
-  example="examples/takeover-ticker-displace.html"
-  role="takeover"
-  duration="5-8s"
-  phases="4"
-  uses="vertical-spring-ticker, reactive-displacement, sine-wave-loop"
-  triggers="rolling text then logo, push text away, slot machine, logo enters forcefully">
-Typewriter + ticker build context → hero enters from off-screen and physically pushes the text out → hero breathes. Example (7.5s): 'Ask about any' typewriter + 'audience → topic → market' ticker → pink-magenta logo enters from offscreen-right with rotation+scale impact → text pushed left and fades (40-50% of hero duration) → logo breathes with dual-frequency sine (1.0s scale, 1.33s rotation). Demonstrates reactive-displacement causal link and multiplicative breathing on a non-1 final scale.
+<blueprint id="logo-assemble-lockup" roles="Product_Intro, CTA, Brand_Outro" duration="4.6–11s">
+A brand mark / wordmark **builds itself from parts** (elements assemble/orbit, letters cascade, an outline draws on, or a camera pushes through negative space) and resolves into a centered lockup, optionally extended to a URL/CTA. Reach for it for a wordless premium brand sting, or a logo build leading into the final ask.
 </blueprint>
 
-<blueprint
-  id="demo-page-scroll-spotlight"
-  path="blueprints/demo-page-scroll-spotlight.md"
-  example="examples/demo-page-scroll-spotlight.html"
-  role="demo"
-  duration="5-9s"
-  phases="4"
-  uses="3d-page-scroll, asr-keyword-glow"
-  triggers="show the feature, product demo, webpage in 3D, scroll to feature">
-3D-tilted webpage card → scrolls to feature section → keywords glow synced to ASR → key element pops forward in 3D with a radial spotlight. Example (9s): OpusClip landing page recreated as a 3D-tilted card with navbar, hero title, CTA row, and video carousel. Six title keywords ('1 long video, 10 viral clips') glow synced to ASR timestamps via CSS `--glow` variable + per-word two-tween envelopes. Page scrolls down 280 px to reveal the carousel; main video pops forward 80 px in 3D with a radial spotlight dimming surroundings.
+<blueprint id="cursor-ui-demo" roles="Product_Intro, Key_Feature" duration="4.0–9.3s">
+A visible custom **cursor drives a reconstructed app UI** through clicks/hovers/drags so the screen changes state shot-to-shot, while the camera chases each interaction. Reach for it for a first cursor-led look at the surface (Product_Intro) or one workflow demonstrated end-to-end onto the action button (Key_Feature).
 </blueprint>
 
-<blueprint
-  id="hook-counter-burst"
-  path="blueprints/hook-counter-burst.md"
-  example="examples/hook-counter-burst.html"
-  role="opening-hook"
-  duration="3-5s"
-  phases="4"
-  uses="counting-dynamic-scale, center-outward-expansion, multi-phase-camera, svg-icon-enrichment"
-  triggers="opening hook, statistic, counter, dramatic number">
-Counter grows + enriched SVG icons expand outward from center, wrapped in multi-phase camera. Example (3.5s): Counter "0 → 90 %" with dynamic font scaling (0.20W → 0.42W), four enriched SVG icons (clock with linearly rotating minute hand, scissors oscillating ±15°, video frame with phase-offset pulsing red dot, play button with scale pulse) expanding outward from center, multi-phase camera (0.92 → 1.0 → 1.08). Demonstrates shared-ease lockstep sync between counter and icon expansion + a single scene-ticker onUpdate consolidating all internal SVG motion.
+<blueprint id="device-surface-showcase" roles="Key_Feature" duration="7.8–9.6s">
+A **device mockup or floating window held as hero** while its screens cycle through a real flow, presented by a camera ranging from a static hold to a continuous 3D push. Role-narrow (Key_Feature only) but mechanic-rich (static tour · floating-window push-scroll · 3D-hand demo). Reach for it to show a feature experienced *inside its real interface*.
 </blueprint>
 
-<blueprint
-  id="workflow-approve-press"
-  path="blueprints/workflow-approve-press.md"
-  example="examples/workflow-approve-press.html"
-  role="workflow"
-  duration="4-6s"
-  phases="4"
-  uses="press-release-spring"
-  triggers="review and approve, step-by-step workflow, user control, approve button, with-you metaphor">
-Headline top + center video demo + 3D-tilted step indicators left + action button right that presses to confirm. Example (5.5s): "AI edits WITH you" headline slides down → center editor mockup scales in → 3 review steps stagger-enter on the left flank (3D-tilted +15°) and snap through pending → active → complete via `tl.set({ attr: data-state })` → Approve button (3D-tilted -15°) bouncy entry with finite-yoyo glow pulse → linear depression then linear return → backgroundColor crossfades to success green + label swaps + checkmark pops with back.out(1.6). Demonstrates a discrete state machine driven by timeline-positioned `tl.set` calls.
+<blueprint id="dataviz-countup" roles="Problem, Product_Intro" duration="6–12s">
+Numbers and charts are the hero — a **count-up ring/number, trend chart, tilted stat grid** — traversed by a camera that pushes THROUGH (or scrolls across) them to land on one hero metric. Reach for it when the data carries the argument: quantify a worsening problem, or open confidently on "look at the result."
 </blueprint>
 
-<blueprint
-  id="problem-mockup-overwhelm"
-  path="blueprints/problem-mockup-overwhelm.md"
-  example="examples/problem-mockup-overwhelm.html"
-  role="problem"
-  duration="4-6s"
-  phases="4"
-  uses="card-morph-anchor"
-  triggers="too many platforms, overwhelmed creator, complex workflow, surrounded by tasks">
-Mockups appear → platform icons scatter → center mockup scales down + crossfades into avatar → task bubbles surround. Example (6s): Three video-platform mockups (YouTube Studio, TikTok Creator, Instagram Reels) spring-in → nine scattered platform icons stagger-enter → at 3.20s center mockup morphs via uniform `scale: 1 → 0.6875` + paint-only `borderRadius`/`background`/`boxShadow` → at 85% of morph the mockup container fades revealing an avatar circle underneath → 8 task bubbles stagger-enter in radial pattern → continuous motion consolidated into one shared `onUpdate` scene-ticker reading `tl.time()`.
+<blueprint id="titlecard-reveal" roles="Benefits, Social_Proof" duration="3–5s">
+The calm **breather/landing beat** — one clean title or single brand/proof card revealed with exactly ONE restrained move (slide-up crossfade, or wipe-away-to-reveal), then a still hold. Low motion is the payload, not a deficiency. Reach for it for a two-line value title, or a busy open wiped to a clean lockup + a "loved by N+ teams" stat.
 </blueprint>
 
-<blueprint
-  id="cta-orbit-collapse"
-  path="blueprints/cta-orbit-collapse.md"
-  example="examples/cta-orbit-collapse.html"
-  role="cta"
-  duration="5-8s"
-  phases="5"
-  uses="orbit-3d-entry, cursor-click-ripple, center-outward-expansion, sine-wave-loop"
-  triggers="works for any genre, multiple categories, click to generate, versatile tool">
-Category icons enter with 3D flip and orbit a center CTA → cursor clicks → icons collapse inward → product demo springs out and floats. Example (6.5s): Six genre icons (Music, Gaming, Education, Sports, Vlogs, Podcast) enter staggered with 3D flip and orbit a central CTA at 0.25 rad/s → cursor slides to white button via `back.out(1.3)`, depresses cursor + button + ripple → icons collapse via `gsap.parseEase("back.out(1.6)")` → demo card springs out from collapse point → CTA + cursor fade out → demo floats with finite-yoyo breathing. Three nested wrappers per icon separate orbit / collapse / entry concerns.
+<blueprint id="comparison-split" roles="Key_Feature" duration="4–6s">
+Two paired items of equal weight enter from opposite wings with **mirrored 3D "book-open" tilts** and hold side-by-side, then an inner-edge pill badge spring-pops on each to punctuate. Reach for it for an A/B or "X + Y together" — two complementary capabilities weighed at once (not >2 items, not sequential steps).
 </blueprint>
 
-<blueprint
-  id="cta-morph-press"
-  path="blueprints/cta-morph-press.md"
-  example="examples/cta-morph-press.html"
-  role="cta"
-  duration="4-6s"
-  phases="4"
-  uses="sine-wave-loop, scale-swap-transition, physics-press-reaction"
-  triggers="logo morphs into button, CTA animation, cursor clicks button, brand to action">
-Hero enters and breathes → morphs into CTA via scale-swap → cursor enters via spring path → physics-based click compresses cursor + CTA together. Example (5.5s): "GWI Spark" lockup with breathing-rotated star logo → morphs into a pink "Find out more" CTA pill via scale-swap (hero shrinks + fades, CTA pops with back.out(2)) → cursor hard-cuts in at off-screen bottom-right and approaches via spring path → physics-based click compresses both cursor and CTA together using a single GSAP target array.
+<blueprint id="overwhelm-surround" roles="Problem" duration="6–9s">
+Overwhelm by accumulation — recognizable surfaces assemble, density-marker icons scatter in, the center one **morphs into the viewer's own avatar**, then elements close in from all sides (surrounded, not zoomed-into). Reach for it when the pain is "you're buried in tools," ending on a claustrophobic crowd.
 </blueprint>
 
-<blueprint
-  id="comparison-split-cards"
-  path="blueprints/comparison-split-cards.md"
-  example="examples/comparison-split-cards.html"
-  role="comparison"
-  duration="4-6s"
-  phases="3"
-  uses="split-tilt-cards, sine-wave-loop"
-  triggers="two features, side by side, brand + team, dual capabilities, scale your">
-Title slides down → two feature cards enter from opposite sides with opposing 3D tilts (+12° / -12°) → floating pill badges attach to each card's inner edge. Example (5s): Title slides down → left card (+18° rotateY, shadow falls right) and right card (-18° rotateY, shadow falls left) enter from their sides with `power3.out` over 0.7s (right staggers ~0.33s after left) → pill badges pop in at the cards' inner edges with `back.out(1.7)`. Continuous floating consolidated in one scene-ticker onUpdate with `Math.PI` phase offset between left and right.
+<blueprint id="ticker-takeover" roles="Hook, Brand_Outro" duration="5–7s">
+A typed lead-in + an accent word cycling through options, then a hero **crashes in from off-screen and physically shoves the text aside** — a collision, not a fade — settling alone. Reach for it when a "could be many things" build should be violently replaced by "this is it."
 </blueprint>
 
-<blueprint
-  id="metric-video-text-pivot"
-  path="blueprints/metric-video-text-pivot.md"
-  example="examples/metric-video-text-pivot.html"
-  role="metric"
-  duration="5-8s"
-  phases="4"
-  uses="3d-text-depth-layers, sine-wave-loop"
-  triggers="accuracy rate, engagement increase, show feature then stat, big number reveal, metric emphasis">
-Product video centered + floating → video slides left and giant stat (3D depth layers) appears right → both exit and kinetic text types center-screen with accent keywords → gradient pill scales behind a closing phrase. Example (6.5s): "Hyper**Frames**" badge top; mock captioned video card centered (3D-tilted +15° rotateY) → at 2.20s video slides to 29% W and "MP4" appears on right as a 5-layer green depth stack → at 3.86s both exit and 23-char "HTML pages become video" + 15-char "frame by frame." type center-screen → gradient pill (purple → green) scales in behind line 2.
+<blueprint id="video-text-pivot" roles="Product_Intro, Key_Feature" duration="6–8s">
+A product video holds center and breathes, then **slides aside to hand its weight to a hero stat**, then both clear and kinetic text types into the vacated center, sealed by a gradient pill. Reach for it for "see the feature → see the impact" where the video must stay visible (slides, never cuts).
 </blueprint>
 
-<blueprint
-  id="messaging-multi-phrase"
-  path="blueprints/messaging-multi-phrase.md"
-  example="examples/messaging-multi-phrase.html"
-  role="messaging"
-  duration="7-8s"
-  phases="3"
-  uses="dynamic-content-sequencing, context-sensitive-cursor"
-  triggers="multiple phrases typing, sequential statements, typing with highlight, dual-color text">
-Multiple phrases type sequentially in hard cuts; each phrase has main + accent segments with a context-sensitive cursor whose color switches at the segment boundary. Timeline computed from `chars × charSpeed + hold`. Example (7.5s): "Build video with **HTML**" → "Seek **any frame**" → "Render to **MP4**" typed at 150px on black. Three phrases in `SCRIPT`, timeline computed from `chars × 0.083s + hold`. One master `onUpdate` writes `textContent`, switches cursor `background-color` between white and cyan at segment boundaries, and drives a 1.0s square-wave blink.
+<blueprint id="cta-morph-press" roles="CTA" duration="4–6s">
+A resting brand mark **condenses at the same center into a brighter CTA**, then a cursor arrives and lands a human-aimed click with feedback. Reach for it for a focused "click here" sign-off that walks the eye from identity to action — no spatial set, no multi-step UI.
 </blueprint>
 </blueprints>
+
+## Role → blueprint menu
+
+A **SOFT** menu: story truth comes first. Story-design reaches in **when the product's own beat calls for that shape** — it suggests a proven shape, it never dictates which beats exist. Each role has 2–4 options; if none fits the beat, compose freely (the menu is not a checklist). Each line is the **trigger** that should make you reach for that blueprint.
+
+Roles here map 1:1 to the storyboard frame `type` enum: **Hook**=`hook` · **Problem**=`pain_point` · **Product_Intro**=`product_intro` · **Key_Feature**=`feature_showcase` · **Benefits**=`benefit_highlight` · **Social_Proof**=`social_proof` · **CTA**=`cta` · **Brand_Outro**=`branding`.
+
+**Hook**
+
+- `kinetic-type-beats` — a punchy rhetorical line / "you keep doing X" callout where the in-place word-swap is the joke, OR an escalating multi-beat statement landing a spring-pop payoff.
+- `typewriter-reveal` — type a relatable line, collapse it, pop the brand (logo or product-UI) — "here's the everyday pain, now here's us."
+- `spatial-pan-stations` — a timeline of milestones panned to the present ("evolution leading up to us").
+- `constellation-hub` — a constellation of tools/nodes + a camera push-in ("it connects everything").
+- `ticker-takeover` — a cycling accent word ("could be X, or Y…") violently replaced by a hero crashing in from off-screen.
+
+**Problem**
+
+- `kinetic-type-beats` — 3–5 short pain statements, each landing alone on a bare canvas, no product yet.
+- `spatial-pan-stations` — pan a connected web of pain "stations" ending in a tangled knot.
+- `dataviz-countup` — a count-up ring / chart / stat grid pushed-through to dramatize a worsening or large problem.
+- `overwhelm-surround` — recognizable tools that morph into the viewer, then task bubbles close in from all sides ("you're buried").
+
+**Product_Intro**
+
+- `kinetic-type-beats` — "Introducing…" hard-cut name-drop resolving on the brand name/logo.
+- `logo-assemble-lockup` — a wordless premium brand sting (elements pulse/orbit and assemble around the mark).
+- `cursor-ui-demo` — first look at the product surface; a cursor sweeps in to introduce the app.
+- `dataviz-countup` — hard-cut into a data-viz card grid, camera scrolls to a glowing hero metric + a kinetic tagline.
+- `video-text-pivot` — a product video that slides aside to hand its weight to a hero stat, then yields the center to kinetic impact text.
+
+**Key_Feature**
+
+- `grid-card-assemble` — a labeled feature tile/pill grid that self-assembles (or glass cards revealed by a camera zoom-out).
+- `cursor-ui-demo` — a specific multi-step workflow demonstrated end-to-end, landing on the action button/result.
+- `device-surface-showcase` — a device/window hero whose screens cycle (static tour · floating-window push-scroll · 3D-hand demo).
+- `comparison-split` — two paired capabilities side-by-side with mirrored book-open tilts (an A/B / "X + Y together").
+- `video-text-pivot` — a feature clip that slides aside to a frame-filling metric, then a typographic impact line.
+
+**Benefits**
+
+- `kinetic-type-beats` — a rapid-fire staccato montage of 8–12 short value phrases.
+- `grid-card-assemble` — a vertical benefit list that accumulates or steps.
+- `titlecard-reveal` — a calm two-line value title card (a breather/stillness beat).
+
+**Social_Proof**
+
+- `constellation-hub` — product mark as the hub, partner logos orbiting it ("works with your stack").
+- `grid-card-assemble` — a logo wall that builds then pulls back to reveal a vast ecosystem.
+- `titlecard-reveal` — wipe a busy open away to a clean brand lockup + a "loved by N+ teams" stat.
+
+**CTA**
+
+- `kinetic-type-beats` — a punchy closing line (or short value stack) snapping beat-by-beat onto the logo/URL.
+- `logo-assemble-lockup` — a logo build → camera push-through into the final URL/CTA verb.
+- `cta-morph-press` — a brand mark that condenses into the CTA at one center, then a cursor lands a human-aimed click.
+
+**Brand_Outro**
+
+- `kinetic-type-beats` — a rapid verb barrage resolving on the brand's one defining word.
+- `typewriter-reveal` — a persistent brand mark with a typed/swapping CTA rail beneath it.
+- `logo-assemble-lockup` — feature/UI elements clear the stage and the lockup draws itself in.
+- `ticker-takeover` — options cycle, then the brand mark crashes in and owns the frame.
+
+> Coverage: every role has ≥2 options; every blueprint serves ≥1 role. `kinetic-type-beats` is the workhorse (6 roles); `device-surface-showcase` is role-narrow (Key_Feature only) but mechanic-rich. Five shapes — `comparison-split`, `overwhelm-surround`, `ticker-takeover`, `video-text-pivot`, `cta-morph-press` — were added from the hyperframes-animation blueprints.
+
+## Picking guidance
+
+1. Find the frame's **role** in the menu above; pick the blueprint whose **shape fits this beat** (story may already have named a candidate id — confirm or override). If two fit, prefer the one whose motions are closer to your plan.
+2. Open `blueprints/<id>.md` — read its time-coded template, `[slots]`, and named **signature move**.
+3. Choose a posture — **Reproduce** (slots map cleanly), **Adapt** (structure fits, content/surface differs; keep the signature move), or **Compose** (nothing fits → build from the motion vocabulary). The _how_ of writing each — what to keep/change, the per-frame fields — is `visual-design.md`'s job; defer to it.
+4. If nothing in the menu fits the beat, **compose** from the motion vocabulary in `motion-language.md` — still pace the reveals to the VO across the shot. Don't force a wrong blueprint.
+
+## Motion coverage
+
+Every recurring move in the golden vocabulary is backed by this skill's local `rules/` — including five added to round out the corpus: `depth-of-field-blur`, `motion-blur-streak`, `depth-scatter-assemble`, `spring-pop-entrance` (the canonical entrance pop, distinct from the click/press `press-release-spring`), and `ambient-glow-bloom`. Each blueprint's `rule mapping` cites the real rule.
+
+One genuine out-of-scope special remains: `device-surface-showcase`'s **3D-hand gesture-input + WebGL bloom/portal** needs R3F/Three.js + WebGL — a heavier capability than the rule library. Use it sparingly, or pick a simpler `device-surface-showcase` variant.
diff --git a/skills/hyperframes-animation/blueprints/brand-reveal-assemble-zoom.md b/skills/hyperframes-animation/blueprints/brand-reveal-assemble-zoom.md
deleted file mode 100644
index b8646a593e..0000000000
--- a/skills/hyperframes-animation/blueprints/brand-reveal-assemble-zoom.md
+++ /dev/null
@@ -1,183 +0,0 @@
----
-id: brand-reveal-assemble-zoom
-role: brand-reveal
-duration_seconds: [4, 6]
-phases: 5
-visual_arc: wide-composition → companion-exit → tight-focus → idle
-uses_rules: [discrete-text-sequence, coordinate-target-zoom, sine-wave-loop]
-element_roles:
-  companion: Supporting element (tagline, slogan, intro text) that provides context then exits
-  hero: Focal element (logo, icon, product image) that remains and receives camera focus
-when_to_use:
-  - Brand / logo / product reveal needs context-then-focus flow
-  - Wide-shot → close-up cinematic narrowing
-  - Two elements share screen, one dominates the final frame
-when_not_to_use:
-  - All elements remain throughout (no exit phase)
-  - Scene is purely text-based, no visual hero
-  - Multiple elements need equal focus
-  - Interactive elements required — see cta-morph-press
-triggers: [brand reveal, zoom into logo, text leads to, wide to close-up, hero focus]
----
-
-# Brand Reveal · Assemble & Zoom (HyperFrames)
-
-This is a "context → focus → idle" emotional arc: the viewer first watches the companion text type itself out and understands what they're looking at; then the hero (logo / icon) pops in to declare where the focus lies; companion yields its space, the layout's center of gravity collapses toward the hero, and the camera pushes in for a close-up; finally the hero settles into a subtle breathing motion, saying "this is the brand, it lives here."
-
-The whole thing runs on a single paused GSAP timeline. Five phases, no hard cuts — every adjacent pair gets a 0.06–0.3s breath of buffer to absorb the previous phase's spring tail.
-
-## When to Use
-
-- Need a progressive narrowing from wide composition to tight close-up on a hero
-- A supporting element (slogan, category word, tagline) appears first to give context, then exits
-- Final frame is a close-up of the hero with subtle ambient motion
-- Not for: all elements equally important, pure text scenes, or scenes requiring interaction (use cta-morph-press)
-
-## Orchestration
-
-This scene weaves four kinds of motion together; each maps to a rule or an inline pattern:
-
-- **Phase 1 — companion typing**: use [discrete-text-sequence](../rules/discrete-text-sequence.md), but in its **monotonic simplified form** (a string of `tl.set` calls, not the reverse-search `onUpdate`). Brand-reveal companions usually don't have the dramatic stuff — no typos, no backspaces — they're just "one phrase that builds out quickly." The full SEQUENCE array machinery from the rule is overkill. Still, drop at least one pacing hold in the middle so the cadence doesn't read as machine-typed.
-- **Phase 2 — hero pop**: no rule needed, just inline a single `back.out(BOUNCE_FACTOR)` tween that springs the hero from `scale: 0` to `scale: 1`. One tween, no orchestration — making this a rule would be overengineering. For a rubberier feel, swap to `elastic.out(amp, period)`.
-- **Phase 3 — companion exit + layout recenter**: the "glue" unique to this blueprint, not covered by any rule. Three concurrent tweens at the same timeline position, sharing `duration` and `ease` (companion fade-slides, `.recenter-shift` pulls brand-group toward the viewport center). See "Phase 3 seam" below.
-- **Phase 4 — zoom into hero**: use [coordinate-target-zoom](../rules/coordinate-target-zoom.md), **but its default offset derivation doesn't fit here.** The rule's formula assumes a row of N equal-width cards; our layout is the three-piece "companion + brand text + hero icon" assembly, which needs its own offset derivation. See "Phase 4 seam" below.
-- **Phase 5 — hero breathing**: use [sine-wave-loop](../rules/sine-wave-loop.md) in its **multiplicative `onUpdate` form** (the one in the rule's GSAP Timeline section), **not** `fromTo` + yoyo. Phase 2 already set hero's scale to `1.0` and Phase 4 pushed an outer wrapper to `TARGET_SCALE` — the breath must multiply onto hero's existing scale, never overwrite it. See "Phase 5 seam" below.
-
-## Phase Timing
-
-All boundaries are in seconds. Design pass: pick each phase's internal duration first, then back-derive its start time from the constraints below.
-
-| Phase | Start ≥                           | Internal duration      | Notes                                                      |
-| ----- | --------------------------------- | ---------------------- | ---------------------------------------------------------- |
-| 1     | `0` (or end of previous scene)    | `TEXT_END - 0`         | Monotonic sequence. End must precede `POP_START`           |
-| 2     | `TEXT_END + ~0.06s`               | `POP_DUR`              | Tiny gap so companion settles before pop fires             |
-| 3     | `POP_START + POP_DUR + ~0.2s`     | `SLIDE_DUR`            | Let `back.out` spring tail settle                          |
-| 4     | `SLIDE_START + SLIDE_DUR + ~0.3s` | `ZOOM_DUR`             | Let recenter visually land before zooming                  |
-| 5     | `ZOOM_START + ZOOM_DUR + ~0.1s`   | `TOTAL - BREATH_START` | Zoom spring tail must finish; otherwise sine fights spring |
-
-The 0.06s gap between Phase 1 and 2 exists so "typing done → next beat" reads as two events, not one. The 0.2s gap between Phase 2 and 3 is the most critical: `back.out` overshoots past 1.0 and rebounds — pull the layout while that tail is still settling and the hero appears to jitter. The 0.1s gap between Phase 4 and 5 is the same idea: `power2.out` decays to near-zero velocity but never literally zero, and a sine wave starting on top of that produces visible chatter.
-
-## Initial DOM Nesting (Critical)
-
-Phase 3 and Phase 4 each need their own wrapper to carry their transform, for the reason stated directly in [coordinate-target-zoom's "Transform order" principle](../rules/coordinate-target-zoom.md#key-principles): scale must wrap translate, never the other way around — otherwise the translation gets multiplied by the outer scale and the hero "drifts and accelerates." This blueprint adds one extra layer (`.recenter-shift`) beyond what the rule shows, because Phase 3's recenter shift and Phase 4's counter-translate are two different motions and cannot share an element.
-
-```
-.zoom-scale        ← Phase 4 scale
-  .zoom-translate  ← Phase 4 counter-translate
-    .recenter-shift ← Phase 3 layout recenter
-      .layout-row
-        .companion         ← fixed width, right-aligned, lighter font-weight
-          .companion-text  ← Phase 1 typing target
-        .brand-group
-          .brand-text      ← heavier font-weight; fades + slides out during Phase 4
-          .hero            ← Phase 2 pop target + Phase 5 breath target
-```
-
-`.companion` is a fixed-width container with `justify-content: flex-end` and `white-space: nowrap`. The reason maps directly to [discrete-text-sequence's "fixed-width container" principle](../rules/discrete-text-sequence.md#key-principles): as characters appear, content length grows; without a fixed width, brand-group gets shoved around as the companion's edge moves. With a fixed width, overflow gets pushed off the container's left edge (not into the brand). The design-time obligation is therefore `COMPANION_WIDTH ≥ widthOf(longest SEQUENCE state)` — otherwise text leaks past the viewport.
-
-Brand text uses a heavier `font-weight` than the companion. Even while companion is still on screen, the hero side must read as dominant — otherwise the Phase 3 "weight transfer" feels abrupt rather than inevitable.
-
-## Phase 3 Seam: Companion Exit + Recenter
-
-This step has no existing rule — it's the blueprint's core glue. Three tweens fire at the same timeline position, sharing `SLIDE_DUR` and `power3.out`:
-
-1. `.companion` fade-slides out (`opacity → 0, x → COMPANION_EXIT_X`)
-2. `.recenter-shift` pulls left by `FINAL_RECENTER_OFFSET`, bringing brand-group to the horizontal midline
-3. (Optional) brand text picks up a slight "dragged toward center" lateral slide
-
-**`FINAL_RECENTER_OFFSET` is the most common point of failure in this blueprint.** Theoretical baseline: shift left by half the (companion + gap) width:
-
-```
-FINAL_RECENTER_OFFSET ≈ -(COMPANION_WIDTH + COMPANION_GAP) / 2
-```
-
-But in practice you'll always find the hero ending up slightly off-center to the left. Reason: brand text's visual center of mass isn't its geometric midpoint (bold weights, serifs, letter-spacing all bias the perceived center). Tuned values are usually smaller in magnitude than the theoretical baseline. **Tune by eye, then bake the result as a `const` — never recompute per frame.** The Phase 4 zoom multiplies everything by 5×+, so any sub-pixel drift in this value becomes visible jitter.
-
-## Phase 4 Seam: Zoom into Hero (offset derivation)
-
-The default offset derivation in [coordinate-target-zoom](../rules/coordinate-target-zoom.md) assumes "N equal-width cards in a horizontal row" — that formula doesn't apply here. Our layout is `companion + gap + brandText + heroGap + hero`, with the hero not at center. The hero's distance from viewport center after Phase 3 has to be derived separately:
-
-```
-baseHeroOffset = (COMPANION_WIDTH + COMPANION_GAP + brandTextWidth + HERO_GAP) / 2
-HERO_FINAL_OFFSET_X = baseHeroOffset + FINAL_RECENTER_OFFSET
-counterTranslateX  = -HERO_FINAL_OFFSET_X     // feeds .zoom-translate's x tween
-```
-
-**`baseHeroOffset` does NOT include `HERO_SIZE`** — the `S` in "total flex width" cancels against the `S/2` in "icon center to row center distance":
-
-```
-Total flex width  T = C + G + B + L + S
-Icon center         = C + G + B + L + S/2
-Layout center       = T / 2
-Offset = (C + G + B + L + S/2) − T/2
-       = C/2 + G/2 + B/2 + L/2
-       = (C + G + B + L) / 2
-```
-
-Including `S` would make the counter-translation overshoot, leaving the icon center-left after zoom.
-
-**`brandTextWidth` must be measured with a hidden DOM probe after `document.fonts.ready`, then baked.** Before fonts load, `getBoundingClientRect()` uses fallback metrics — easily off by 10–30 px, which becomes tens of visible pixels after a 5× zoom. The standard DOM probe (placed before timeline registration):
-
-```js
-await document.fonts.ready;
-const probe = document.createElement("span");
-probe.style.cssText =
-  "position:absolute; left:-99999px; white-space:pre; " +
-  `font: ${BRAND_WEIGHT} ${BRAND_FONT_SIZE}px ${BRAND_FONT_STACK};`;
-probe.textContent = BRAND_TEXT;
-document.body.appendChild(probe);
-const brandTextWidth = probe.getBoundingClientRect().width;
-probe.remove();
-// Use brandTextWidth to compute HERO_FINAL_OFFSET_X, bake as const
-```
-
-The zoom itself (outer scale + inner counter-translate tweens) follows [coordinate-target-zoom's critical constraints](../rules/coordinate-target-zoom.md#critical-constraints) verbatim: shared `ZOOM_DUR` + ease, no recomputing offset in onUpdate, `transform-origin: 50% 50%`.
-
-During the zoom, brand text fades + slides out (duration `ZOOM_DUR * 0.3–0.5`, finishing well before the zoom climax) — otherwise at 5× scale it fills the frame and covers the hero.
-
-## Phase 5 Seam: Why Breath Must Be Multiplicative
-
-The multiplicative `onUpdate` form in [sine-wave-loop](../rules/sine-wave-loop.md) (`gsap.set(hero, { scale: HERO_FINAL_SCALE * (1 + sin(ω) * AMP) })`) isn't a recommendation here — it's a **hard requirement**:
-
-- Phase 2 tweens hero's scale to `1.0` (or `HERO_FINAL_SCALE`) — this is hero's resting state
-- Phase 4 pushes `.zoom-scale` (outer wrapper) to `TARGET_SCALE` — but this is on the wrapper, **not** on hero itself
-- Phase 5 must let hero breathe **on top of its own resting scale** — so it has to multiply onto `HERO_FINAL_SCALE` as a baseline
-
-Using the rule's alternative `fromTo` + yoyo form here would re-tween hero from 0 to 1, undoing Phase 2's final state (even if "0 to 1" looks identical on paper, GSAP's from-state gets re-applied on every yoyo cycle, killing the post-pop scale).
-
-`SCALE_AMP` 0.02–0.04 (product photography → small; stylized logo → large), `ROTATE_AMP` 0–2°, `SCALE_PERIOD` ~1.5–2s reads as natural breathing — ranges live in the rule, pick by scene.
-
-## Key Values to Choose (Not Already in the Rules)
-
-Only listing the parameters **unique to this blueprint** below; standard parameters (`POP_DUR`, `BOUNCE_FACTOR`, `SCALE_AMP`, etc.) — go to the referenced rule.
-
-- **COMPANION_WIDTH**: theoretical floor = width of the longest SEQUENCE state in companion font (measure with a probe); 30–50% of viewport width is the practical range. Too small → text leaks past viewport; too large → `FINAL_RECENTER_OFFSET` grows with it and Phase 3 drags.
-- **FINAL_RECENTER_OFFSET**: theoretical `-(COMPANION_WIDTH + COMPANION_GAP) / 2`, but tuned value is typically smaller in magnitude. **Must be tuned by eye and baked as a const**, never per-frame (see Phase 3 seam).
-- **TARGET_SCALE**: 3× (modest) → 5.5× (cinematic) → 8× (extreme close-up). Constraint: hero source resolution ≥ `HERO_SIZE × TARGET_SCALE`, otherwise rasters go soft.
-- **BRAND_EXIT_X**: magnitude ≥ half viewport width — ensures brand text clears the frame before zoom climax.
-- **BRAND_FADE_RATIO**: 0.3–0.5; brand text disappears before zoom's halfway mark, leaving the climax framed on hero alone.
-
-## Critical Constraints (ordered by failure frequency)
-
-- **Bake all pre-calculated offset constants**: `FINAL_RECENTER_OFFSET`, `HERO_FINAL_OFFSET_X`, `HERO_FINAL_OFFSET_Y` are all `const`. Per-frame recomputation → sub-pixel drift → visible jitter at 5× zoom.
-- **Scale wraps translate** (see DOM nesting): `.zoom-scale` outer, `.zoom-translate` inner. Reversed → translation gets multiplied by scale → hero drifts during zoom.
-- **Companion container width ≥ max text width**: overflow during assembly is invisible, but explodes at the final state.
-- **`baseHeroOffset` excludes heroSize**: see Phase 4 seam derivation.
-- **Breath must be multiplicative**: see Phase 5 seam.
-- **Breath gate: BREATH_START ≥ zoom end + 0.1s**: sine and spring tail cannot coexist.
-- **Measure brand text after `document.fonts.ready`**: otherwise hero offset is off by 10–30 px.
-- **Three nested wrappers only tween GSAP transform aliases** (`x` / `y` / `scale` / `rotation`) — never `width` / `height` / `left` / `top`.
-- **Single paused timeline**: `gsap.timeline({ paused: true })`, registered to `window.__timelines[data-composition-id]`.
-
-## Spring → Ease Selection
-
-Four phases, four spring feels, four ease choices. The complete spring → ease mapping table lives in [hyperframes-animation/SKILL.md](../SKILL.md); this blueprint's defaults are:
-
-- Phase 2 elastic pop → `back.out(BOUNCE_FACTOR)` (swap to `elastic.out` for rubberier feel)
-- Phase 3 tight exit → `power3.out`
-- Phase 4 cinematic push → `power2.out`
-- Phase 5 continuous oscillation → `onUpdate Math.sin`
-
-## Golden Sample
-
-- [brand-reveal-assemble-zoom.html](../examples/brand-reveal-assemble-zoom.html) — runnable 5-second composition with concrete values for every named constant above; single paused GSAP timeline drives all five phases. Run this first, then change values — much faster than building from scratch.
diff --git a/skills/hyperframes-animation/blueprints/comparison-split-cards.md b/skills/hyperframes-animation/blueprints/comparison-split-cards.md
deleted file mode 100644
index d8beb2ef09..0000000000
--- a/skills/hyperframes-animation/blueprints/comparison-split-cards.md
+++ /dev/null
@@ -1,141 +0,0 @@
----
-id: comparison-split-cards
-role: comparison
-duration_seconds: [4, 6]
-phases: 3
-visual_arc: title-entry → cards-split-enter → badges-attach
-uses_rules: [split-tilt-cards, sine-wave-loop]
-element_roles:
-  title: Scene heading with accent keyword establishing the concept
-  left_card: Left feature card with positive rotateY tilt (faces right)
-  right_card: Right feature card with negative rotateY tilt (faces left)
-  badges: Floating pill badges that attach near each card with supporting context
-when_to_use:
-  - Two complementary features shown side-by-side
-  - Comparison or A/B presentation of related capabilities
-  - Message is "X + Y together" (paired concepts of equal weight)
-  - Need visual balance with 3D depth on both sides
-when_not_to_use:
-  - More than 2 items to compare (use a different layout)
-  - Items are sequential, not parallel (use step indicators)
-  - Cards contain interactive elements (use workflow-approve-press)
-triggers: [two features, side by side, comparison, dual capabilities, paired concepts]
----
-
-# Comparison · Split Cards (HyperFrames)
-
-A "concept → dual proof" emotional arc: the title states the idea, then two cards arrive from opposite wings with mirrored 3D tilts so the eye reads them as equal weight, and finally a pair of pill badges land at the cards' inner edges to punctuate them. The whole scene runs on one paused GSAP timeline with a single shared scene-ticker for all idle motion, so cards and badges share one rhythm instead of competing on three independent clocks.
-
-## When to Use
-
-- Two paired features of equal weight, presented simultaneously rather than sequentially
-- Premium "book-open" depth feel from mirrored card tilts adds value to the comparison
-- Badges or short labels need to attach visually to each card, not float in empty space
-
-## Orchestration
-
-Three phases, two rules. The middle phase is the heaviest.
-
-- **Phase 1 — title slide-down**: inline. A single `power3.out` opacity/`y` tween. Making this a rule would be overengineering — there's no orchestration to share. Direction is `y: -TITLE_RISE → 0` so the title drops in from above the final position; that direction matters because the cards in Phase 2 come from the _sides_, and a downward-arriving title plus side-arriving cards forms a non-conflicting T-shape of motion vectors.
-- **Phase 2 — split cards entry**: use [split-tilt-cards](../rules/split-tilt-cards.md), but in a **two-layer DOM variation** the rule's template doesn't show: `.card-pos` carries the slide-in `x` and `scale` and the idle `y`; `.card-tilt` (a child) carries the static `rotationY` plus the idle rotation float. The rule's single-layer template tweens both on the same element, which works for its yoyo bob but conflicts here because Phase 2's entry `x` and Phase 3's continuous `y` would land on the same element and the sine ticker would overwrite the entry's final state. Splitting the transforms across two layers means each tween owns one alias and nothing collides. The tilts are mirrored per the rule (`+BASE_TILT` left, `-BASE_TILT` right) and shadow direction follows from the rule's tilt-shadow principle.
-- **Phase 3 — badges attach**: inline `back.out(BOUNCE_FACTOR)` spring per badge. This is the **floating-badge variation** of split-tilt-cards' "Asymmetric content density" section — badges live on the stage, NOT inside the card divs, so they don't inherit the cards' `rotationY`. One inline tween per badge; making it a rule would not earn its keep.
-- **Continuous (from `t = 0`) — shared scene-ticker**: use [sine-wave-loop](../rules/sine-wave-loop.md) in its **`onUpdate` form driven by `tl.time()`** (not the rule's preferred "drive a phase tween that starts at IDLE_START_TIME" form). One onUpdate writes y/rotation onto both cards and y onto both badges. The reason for choosing `tl.time()` over the rule's `phase` tween is laid out in the seam section below; the reason for one onUpdate instead of three is also there.
-
-## Phase Timing
-
-All boundaries in seconds. Pick each phase's internal duration first; back-derive starts from the gap constraints below.
-
-| Phase | Start ≥                            | Internal duration | Notes                                                                   |
-| ----- | ---------------------------------- | ----------------- | ----------------------------------------------------------------------- |
-| 1     | `0`                                | `TITLE_DUR`       | `TITLE_AT` typically 0.1–0.3s; lower = punchier opener, higher = breath |
-| 2L    | `TITLE_AT + TITLE_DUR * 0.5`       | `ENTRY_DUR`       | Intentional overlap: title's tail and cards' beginnings co-arrive       |
-| 2R    | `LEFT_AT + 0.1–0.4s`               | `ENTRY_DUR`       | Small stagger; 0 reads mechanical, >0.4s fragments the pair             |
-| 3L    | `RIGHT_AT + ENTRY_DUR + BADGE_GAP` | `BADGE_ENTRY_DUR` | Let `power3.out` tail settle on the cards before badges punctuate       |
-| 3R    | `BADGE_LEFT_AT + 0.2–0.4s`         | `BADGE_ENTRY_DUR` | Mirror the card stagger feel                                            |
-| Idle  | `0` (runs the whole composition)   | `TOTAL_DUR`       | `sin(0) = 0` ⇒ the float is invisible during entries                    |
-
-Two gaps deserve specific reasoning.
-
-The **Phase 1→2 overlap** is deliberate: `LEFT_AT` lands while the title is still tweening (`TITLE_AT + TITLE_DUR * 0.5 ≤ LEFT_AT < TITLE_AT + TITLE_DUR`). Read separately, "title done THEN cards" feels like two beats; read overlapped, the title's tail and the cards' wings read as one arrival. If `LEFT_AT > TITLE_AT + TITLE_DUR`, the scene develops dead air.
-
-The **Phase 2→3 gap** (`BADGE_GAP` ≈ 0.1–0.3s) is the inverse: badges must NOT overlap the card entry. Cards use `power3.out` which decays smoothly — popping a `back.out` badge on top of a card that's still moving makes the badge's overshoot read as the card jittering. 0.1s feels continuous, 0.3s reads as deliberate punctuation. Pick higher when the scene is editorial, lower when it's snappy.
-
-The **idle ticker starts at `t = 0`**, not at "entry end + buffer" as the rule defaults. This works only because `sin(0) = 0`: at composition start, every floating offset evaluates to zero, so the cards' `y` is 0 and the badges' `y` is 0 — meaning the entry tweens see no floating contribution to fight. By the time entries end, the sine is already mid-cycle and the float is naturally visible. The alternative (gating idle to start after entry settles) would require setting a separate idle-start time per element; running from `t = 0` shares one phase across the whole stage.
-
-## DOM Nesting (the two-layer card)
-
-The two-layer structure inside each card is the difference between this blueprint and the rule's single-layer template — keep it strict:
-
-```
-.cards-row                ← single perspective parent (rule's `perspective` principle)
-  .card.card-left
-    .card-pos             ← Phase 2 entry x, scale; idle y
-      .card-tilt          ← static rotationY (+BASE_TILT); idle rotation float
-        .card-image / .card-label / .card-subtitle
-  .card.card-right
-    .card-pos             ← Phase 2 entry x, scale; idle y
-      .card-tilt          ← static rotationY (−BASE_TILT); idle rotation float
-        ...
-.badge.badge-left         ← stage-level, NOT inside .card (rule's badge variation)
-.badge.badge-right
-```
-
-The rule's "Shadow direction must match tilt" still applies — left card's box-shadow falls right, right card's falls left. `.card-tilt` needs `transform-style: preserve-3d` because it has nested transformed children that should render in the 3D plane.
-
-## Phase 2 Seam: Why two layers, not one
-
-If you tween `x`, `scale`, AND `rotationY` on the same element (`.card`) — which is what the rule's template implies — then the Phase 2 entry tween and the continuous sine-ticker both want write access to that element's transform alias bucket. The entry tween animates `x: -SLIDE_DIST → 0`; the ticker writes `y: sin(t * FLOAT_Y_SPEED) * FLOAT_Y_AMP`. GSAP merges these correctly _for one frame_, but the rotation float (`rotationY: ±BASE_TILT + sin(...) * FLOAT_R_AMP`) wants the same alias the entry tween's mirrored `rotationY` would otherwise drive. Separate the concerns:
-
-- `.card-pos` owns translation (`x` for entry, `y` for float) and `scale` (entry only). The ticker writes only `y`.
-- `.card-tilt` owns `rotationY` (static + float). The ticker writes only `rotationY`.
-
-The static tilt is set once at composition init via `gsap.set('.card-left .card-tilt', { rotationY: BASE_TILT })` and the float adds onto it inside onUpdate: `gsap.set(leftTilt, { rotationY: BASE_TILT + Math.sin(t * FLOAT_R_SPEED) * FLOAT_R_AMP })`. The `BASE_TILT` term must be re-added every frame because `gsap.set` writes absolute values, not deltas.
-
-## Phase 3 Seam: Badge anchoring
-
-Badges are absolutely positioned on the stage at each card's **inner edge** — the edge between the card and the gap, not the outer corner and not floating in empty viewport space. The eye must read them as belonging to their card. A rule of thumb: a badge's outer edge should overlap its card by 10–20% of badge width so it visually attaches rather than orbits.
-
-Badges are NOT nested inside `.card-left` / `.card-right` because that would inherit `rotationY` and tilt the badge off-axis with the card — see split-tilt-cards' "Don't put badges inside the card divs" constraint. The trade-off is that the badge's `x` / `y` no longer auto-follow the card's idle float; the shared ticker handles that explicitly by writing a small `y` onto the badge.
-
-## Idle Seam: One onUpdate, six writes
-
-Five DOM nodes participate in the idle (two `.card-pos`, two `.card-tilt`, two `#badge-*`). The naive structure is five independent `tl.to(...{ onUpdate })` tweens, each evaluating its own sine and writing one alias. That fires five callbacks per frame, with five separate transform-write barriers.
-
-The blueprint uses one `tl.to({ tick: 0 }, { tick: 1, duration: TOTAL_DUR, ease: 'none', onUpdate })` over the full composition. Inside the callback, read `tl.time()` once, evaluate four sines (cards-y, cards-rotation, badges-y, plus the `Math.PI` phase-opposed companions), and issue six `gsap.set` calls. The browser batches the transform writes within a single tick — measurably cheaper than five independent tweens, and conceptually the cards and badges share one clock.
-
-The two **per-card opposition (`+ Math.PI` between left and right)** isn't optional: synchronized floating makes the pair look conveyor-belted. Opposed floating makes them feel like two living things sharing a rhythm. The badges are typically in-phase with each other (both pop in the same direction) because they read as a pair of satellites, not as another comparison axis — but opposing them is a valid stylistic choice if the scene wants extra differentiation.
-
-The four sine frequencies are intentionally non-harmonic. `FLOAT_Y_SPEED` and `FLOAT_R_SPEED` for cards differ by ~25% so the y bob and the rotation wobble don't visibly sync into a single rocking motion. `BADGE_Y_SPEED` runs faster than the card y so badges feel like lighter satellites — heavy bodies move slowly, light bodies move faster. Tune `BADGE_Y_AMP < FLOAT_Y_AMP` for the same reason: a badge that out-bobs its card looks like a balloon escaping.
-
-## Key Values to Choose (Not Already in the Rules)
-
-Standard parameters (`BASE_TILT` range, `BOUNCE_FACTOR` range, `FLOAT_AMP` range, `SCALE_AMP` range) live in the referenced rules. The values unique to this blueprint:
-
-- **TITLE_RISE** — pixels above resting position the title starts from. 24–64 px; below 24 barely reads as motion, above 64 reads as "dropped from offscreen" rather than "slid into place from just above."
-- **ENTRY_SCALE** — initial scale of each card before settling to 1. 0.7–0.95. Lower combined with the side-slide reads as "popping into focus from a distance"; higher reads as a near-flat lateral slide. Couples with `SLIDE_DIST`: high slide + high entry scale reads as conveyor-belt, low slide + low entry scale reads as zoom-pop.
-- **BADGE_GAP** — settle beat between cards finishing entry and badges starting (0.1–0.3s). See Phase 2→3 gap reasoning above.
-- **GLOW_OPACITY** — opacity of the dual-glow ambient (0.08–0.18). Below 0.08 invisible; above 0.18 the glow competes with the card content. The two glow colors are usually the comparison's two brand accents, one centered at 30%, one at 70% — the layout's symmetry axis is at 50%, so the glows reinforce the side-identity without bleeding into each other.
-
-## Critical Constraints (ordered by failure frequency)
-
-- **Two layers per card (`.card-pos` outside `.card-tilt`)**: collapsing into one layer is the most common mistake. The static tilt and the rotation float both want `rotationY`; the entry `x`/`scale` and the idle `y` both want the position bucket. Two layers, two scopes. See Phase 2 seam.
-- **Badges on the stage, not inside cards**: nesting badges inside `.card-*` makes them inherit the tilt and the float — they end up tilted off-axis and translated twice. Position absolutely on the stage at each card's inner edge.
-- **Cards entered opposite-direction with phase-opposed float (`+ Math.PI`)**: left enters from `-x`, right from `+x`; left floats sin(t), right floats sin(t + π). Same direction or same phase makes the pair look mechanical.
-- **`BADGE_GAP ≥ 0.1s` between card entry end and badge entry start**: badges popping while cards are still settling reads as card jitter, not badge bounce.
-- **Sine ticker runs continuously from `t = 0`, not gated**: the invariant `sin(0) = 0` is what makes this safe — gating to start after entry would require per-element start times and lose the shared phase.
-- **`BADGE_Y_AMP ≤ FLOAT_Y_AMP`**: a badge that out-bobs its card looks like a runaway accessory.
-- **Equal card width + shared single `perspective` parent**: per-card perspective produces inconsistent depth, and unequal widths break the comparison symmetry that the whole layout is selling.
-- **Idle ticker writes only one alias per element**: `y` on `.card-pos`, `rotationY` on `.card-tilt`, `y` on badges. Mixing in `scale` or `opacity` inside the ticker would overwrite the entry's final state.
-
-## Spring → Ease Selection
-
-Three different feels across the three phases — full mapping table lives in [hyperframes-animation/SKILL.md](../SKILL.md).
-
-- Phase 1 title settle → `power3.out`
-- Phase 2 card entries → `power3.out` (consistency: the scene's "arriving" feel)
-- Phase 3 badge pops → `back.out(BOUNCE_FACTOR)` (the only spring with overshoot — earns the punctuation)
-- Continuous idle → `Math.sin(tl.time() * …)` in onUpdate, ticker tween uses `ease: 'none'`
-
-## Golden Sample
-
-- [comparison-split-cards.html](../examples/comparison-split-cards.html) — runnable composition with concrete values for every constant above. Single paused GSAP timeline drives all three phases over `TOTAL_DUR` seconds, with the shared scene-ticker handling cards-and-badges floating. Start here, then change values.
diff --git a/skills/hyperframes-animation/blueprints/comparison-split.md b/skills/hyperframes-animation/blueprints/comparison-split.md
new file mode 100644
index 0000000000..625cf89d2e
--- /dev/null
+++ b/skills/hyperframes-animation/blueprints/comparison-split.md
@@ -0,0 +1,27 @@
+# comparison-split — Comparison Split-Cards
+
+**intent**: Two paired items of equal weight shown side-by-side with mirrored 3D "book-open" tilts — the eye reads them as a balanced comparison, then a pill badge lands at each card's inner edge to punctuate. The motion IS the symmetry: two cards arriving from opposite wings into a held spread.
+
+**roles served**
+
+- Key_Feature (from `comparison-split-cards`): when two complementary features / capabilities of equal weight should be presented **simultaneously, not sequentially** — an A/B, a "X + Y together," paired concepts the viewer must weigh side-by-side. Not for >2 items (use `grid-card-assemble`) or sequential steps.
+
+**duration**: 4–6s
+
+**shot structure** (a `[bg]` canvas carrying two faint ambient glow blooms — `[accent A]` near 30%, `[accent B]` near 70% — so each side owns a color identity across a 50% symmetry axis; equal-width cards under one shared perspective parent)
+
+- **Scene 1 (0.0–~0.8s) — title sets the concept.** A centered `[title line]` with an `[accent keyword]` slides DOWN into place from just above (a short smooth settle). The downward arrival is deliberate: it forms a non-conflicting T-shape against the cards, which arrive from the sides next.
+- **Scene 2 (~0.4–1.9s) — the split-tilt entry (signature move).** Two equal-width feature cards arrive from opposite wings — `[left card]` from the left, `[right card]` from the right ~0.2s behind — each carrying a **mirrored 3D `rotateY` tilt** (left faces right, right faces left, opening like a book) and scaling ~0.85→1 as it lands. The entry overlaps the title's tail so the whole thing reads as ONE arrival, not two beats. Each card holds `[image / label / subtitle]`; box-shadows fall **outward** from the tilt (left shadow right, right shadow left).
+- **Scene 3 (~1.9–end) — badges punctuate, then hold.** A pill `[badge]` lands at each card's **inner edge** (left then right, ~0.3s apart), overlapping its card ~15% so it reads as attached, not orbiting. This is the lone overshoot in the shot — it earns the punctuation. Settles and holds.
+
+**motion vocabulary**: title slide-down from above; mirrored opposite-wing card entry; static book-open `rotateY` tilt (`+tilt` left, `−tilt` right); tilt-matched outward box-shadow; inner-edge badge spring-pop; gentle phase-opposed idle float (left vs right, never synchronized) registered as subtle jitter; dual side-glow ambient.
+
+**rule mapping**
+
+- two cards entering from opposite wings with mirrored `rotateY` tilts + tilt-matched shadow → `split-tilt-cards` (the signature; keep the two-layer split so the entry `x`/`scale` and the idle never collide on one alias)
+- title slide-down settle → `gsap-effects` (translate + opacity on a long-tail `power3`)
+- inner-edge pill badge pop (the one overshoot) → `spring-pop-entrance` (overshoot register — earns the punctuation)
+- phase-opposed idle float on the pair → `sine-wave-loop` (low-amplitude register — subtle jitter, NOT lazy breathing; left `sin(t)`, right `sin(t+π)` so they never conveyor-belt)
+- the two faint side glows behind the cards → `ambient-glow-bloom` (un-triggered soft bloom, one per accent)
+
+**camera modifier**: camera-static by default — the symmetry is the subject and a move would break the balance.
diff --git a/skills/hyperframes-animation/blueprints/concept-demo-decode-pan.md b/skills/hyperframes-animation/blueprints/concept-demo-decode-pan.md
deleted file mode 100644
index 334c059df6..0000000000
--- a/skills/hyperframes-animation/blueprints/concept-demo-decode-pan.md
+++ /dev/null
@@ -1,179 +0,0 @@
----
-id: concept-demo-decode-pan
-role: concept-demo
-duration_seconds: [6, 10]
-phases: 4
-visual_arc: text-decode → scene-pan → cursor-track
-uses_rules: [hacker-flip-3d, camera-cursor-tracking, discrete-text-sequence]  # discrete-text-sequence = smooth-slice variant
-element_roles:
-  shot1_static: Context-setting text that fades in (tagline, slogan)
-  shot1_accent: Accent word that decrypts via hacker-flip 3D (the hook)
-  shot2_interactive: Interactive element (search bar, input field) with cursor-tracked typing
-when_to_use:
-  - Two visually distinct shots connected by a cinematic transition
-  - First shot reveals text dramatically (decode / decrypt)
-  - Second shot demonstrates product interaction (typing, search, input)
-  - "Reveal the concept → show it in action" flow
-when_not_to_use:
-  - Single scene, no transition — see brand-reveal-assemble-zoom or takeover-ticker-displace
-  - Shots should cross-fade rather than pan
-  - No text decode in the first shot
-  - Second shot is static (no dynamic tracking)
-triggers: [decode effect, decrypt, scene transition, search bar typing, horizontal pan, show then demonstrate]
----
-
-# Concept-Demo · Decode & Pan (HyperFrames)
-
-This is a "tease → reveal → demonstrate" emotional arc: the viewer reads a static phrase, then the accent word decrypts in front of them like an old flap-display — the _concept_ has just been declared. Before they can dwell, the camera pans sideways into a second shot where the product itself starts typing, answering "and here's what it does." Shot 1 is the hook; the pan is the bridge; Shot 2 is the proof.
-
-Four phases on one paused GSAP timeline. The pan is the only place two unrelated rules' end-states have to align in screen space, and it's the failure-prone joint.
-
-## When to Use
-
-- Promo has two narrative beats: concept reveal, then product demo
-- First beat needs a dramatic text effect (decode / decrypt)
-- Second beat shows interactive behavior (typing, searching, input)
-- Need spatial continuity between beats (pan, not cut)
-
-## Orchestration
-
-This scene combines three rules plus one inline phase, threaded together by a horizontal "shot strip" that the camera slides through.
-
-- **Phase 1 — Shot 1 entry**: no rule, inline `fromTo` on `.shot1-content` (`opacity: 0 → 1`, `y: RISE_DIST → 0`, `power2.out`). This is a context-setting fade-rise — too small a motion to deserve its own rule, and giving it `back.out` would compete with the decode's elasticity in Phase 2.
-- **Phase 2 — accent word decode**: use [hacker-flip-3d](../rules/hacker-flip-3d.md) at the rule's default `transform-origin: bottom` (flap-display look). Reason for the default here: the accent word reads as a "verdict landing" — the bottom-hinge flap feels mechanical and authoritative, where a top hinge would feel like the text is falling away from the viewer just when we want it to arrive. The static phrase next to it stays still — only the accent word gets the 3D treatment, so visual hierarchy reads cleanly.
-- **Phase 3 — horizontal pan + parallax + Shot 2 entry**: no rule, this is the blueprint's core glue. Three concurrent tweens at the same timeline position, all sharing `PAN_DUR`. See "Phase 3 Seam" below for the pan-ease constraint and the parallax math.
-- **Phase 4 — cursor-tracked typing**: use [camera-cursor-tracking](../rules/camera-cursor-tracking.md) in its **continuous-typing-driver variation** (the one called out in that rule's Variations section, not the default `maxWidth` form). Reason: the cursor's screen X has to feed the _parent strip's_ `x` transform, not just the world container's, because the strip is already carrying the Shot 1→Shot 2 pan. Two cameras nested would be untenable. The typing driver itself is [discrete-text-sequence](../rules/discrete-text-sequence.md) in its **smooth-slice variation** (continuous typewriter, no typos). We don't want the human-typing chaos here — the demo is selling product confidence, not realism.
-
-## Phase Timing
-
-| Phase | Start ≥                               | Internal duration                   | Notes                                                             |
-| ----- | ------------------------------------- | ----------------------------------- | ----------------------------------------------------------------- |
-| 1     | `0` (or end of previous scene)        | `ENTRY_DUR`                         | Static text + accent placeholder both fade in together            |
-| 2     | `ENTRY_START + ENTRY_DUR` (no buffer) | `FLIP_STAGGER × (N − 1) + FLIP_DUR` | Decode starts the instant entry lands — no breath, builds urgency |
-| 3     | `FLIP_END + ~0.2s`                    | `PAN_DUR`                           | Decode needs to _visually settle_ before the camera tears away    |
-| 4     | `PAN_START + PAN_DUR + ~0.15–0.2s`    | until `TOTAL_DURATION − dwell`      | Eye needs a beat to find the bar before reading typing            |
-
-Phase 1 → Phase 2 has **no gap** on purpose. The accent slot is already in its final layout position during Phase 1 (the flip rotates from `90°` to `0°` in place, no translation), so kicking the decode the instant the fade lands stacks the two beats into one continuous "here it comes — and there it is." Inserting a buffer here makes the decode feel detached from the phrase.
-
-The 0.2s gap between Phase 2 and 3 is the most failure-prone one. `back.out` on the per-glyph flip overshoots and rebounds (see [hacker-flip-3d](../rules/hacker-flip-3d.md)'s default ease); if you pan while the last glyph is still settling, the strip is sliding sideways while one character is still rotating, and the eye reads it as a glitch. The 0.2s is roughly the spring tail of the last character's `back.out(FLIP_BOUNCE)` — pad it more if you pick a larger `FLIP_BOUNCE`.
-
-The 0.15–0.2s gap between Phase 3 and 4 is a reading buffer, not a spring buffer. The pan ends cleanly (`power3.inOut` has no overshoot), but the viewer's eye needs ~150ms to re-anchor on Shot 2's bar before typing starts. Cut this gap and the first few characters get missed.
-
-## Initial DOM Nesting (Horizontal Shot Strip)
-
-The "shot strip" architecture is the spatial backbone — both Phase 3 (pan) and Phase 4 (cursor tracking) tween the same `.strip` element, so the order of layers below it must not bake any pan offset into Shot 2's internal world space.
-
-```
-.viewport            (overflow: hidden — clips off-screen shots)
-  .strip             (flex row; Phase 3 + Phase 4 both tween its x)
-    .shot.shot1
-      .shot1-content (Phase 1 fade-rise target; Phase 3 parallax target)
-        .shot1-row
-          .shot1-static          (static phrase, no animation)
-          .shot1-accent          (Phase 2 hacker-flip container)
-            .flip-glyph × N      (one per char of accentWord)
-    .shot.shot2
-      .shot2-bar     (Phase 3 fade-scale target; cursor sits here in Phase 4)
-        .search-text (Phase 4 typing target; smooth-slice variation)
-        .search-cursor
-```
-
-Each `.shot` is exactly `VIEWPORT_W` wide with `flex-shrink: 0`; the strip width is therefore implicit (`shots × VIEWPORT_W`) and the pan distance equals one `VIEWPORT_W`. Letting flex compress the shots would silently shrink the pan distance and the camera would over-shoot in Shot 2.
-
-`.shot2-bar` ships with `opacity: 0` and `transform-origin: left center` so Phase 3's `back.out` scale lands the bar correctly when it arrives. The bar's width is pre-allocated from a font probe before the timeline registers — see Phase 4 Seam.
-
-## Phase 3 Seam: The Pan (Strip + Parallax + Shot 2 Entry)
-
-Three tweens fire at the same timeline position, all sharing `PAN_DUR`:
-
-1. `.strip` tweens `x: 0 → -VIEWPORT_W` with `power3.inOut` (the camera)
-2. `.shot1-content` tweens `x: 0 → -PARALLAX_DIST` with `power3.inOut` (the near-plane, moves faster than the camera so depth reads)
-3. `.shot1-content` _also_ tweens `opacity: 1 → 0` with `power2.out`, duration `PAN_DUR × FADE_RATIO` — the fade finishes before the pan does so the eye is on Shot 2 well before the strip stops
-4. `.shot2-bar` tweens `opacity: 0 → 1` and `scale: ENTRY_SCALE_FROM → 1` with `back.out(ENTRY_BOUNCE)` over `PAN_DUR` (the landing)
-
-**The pan ease is the most common point of failure here.** `back.out` on the _strip_ reads as a UI bounce — the viewer's brain says "menu sliding in," not "camera moving." Use `power3.inOut` (slow start, slow finish — feels cinematic) or `power2.out` (quicker, snappier — feels like a UI swipe but still not a bounce). Reserve `back.out` for the `.shot2-bar` _entry_, where overshoot reads as the bar landing into place.
-
-The parallax is additive: `.shot1-content`'s `x` displacement is _on top of_ the strip's `x`. When the strip has moved `-VIEWPORT_W` and `.shot1-content` has moved an extra `-PARALLAX_DIST`, the Shot 1 layer has effectively moved `-(VIEWPORT_W + PARALLAX_DIST)` in world space — so it leaves the frame faster than the camera passes it, which is what "near plane moves faster" means optically. `PARALLAX_DIST` in the 15–25% of viewport width range reads as strong depth without throwing Shot 1 away.
-
-`FADE_RATIO` should land Shot 1's opacity at 0 around the 30–50% mark of the pan — fading later leaves stale content on screen during the climax, fading earlier kills the parallax (you can't perceive depth on an invisible layer).
-
-## Phase 4 Seam: Cursor-Tracked Typing Inside the Already-Panned Strip
-
-This is the joint that the rule alone can't solve. [camera-cursor-tracking](../rules/camera-cursor-tracking.md) describes a `.world` container that translates inside a `.viewport`. In this scene, the strip _is_ the world — and it's already at `x: -VIEWPORT_W` from Phase 3. Phase 4's tracking offset has to add to that, not replace it.
-
-The piecewise camera handoff:
-
-```js
-// In an onUpdate driven by a typing-progress tween (smooth-slice form):
-const charsTyped = Math.floor(progress * FULL_TEXT.length);
-const typedWidth = measuredCharOffsets[charsTyped]; // pre-measured per-char left edges
-const cursorWorldX = BAR_LEFT_MARGIN + PADDING_LEFT + typedWidth;
-const targetScreenX = CURSOR_TARGET_FRACTION * VIEWPORT_W;
-const trackingStripX = -VIEWPORT_W + (targetScreenX - cursorWorldX);
-const finalStripX = Math.min(STRIP_BASE_X + INITIAL_OFFSET, trackingStripX);
-gsap.set(".strip", { x: finalStripX });
-```
-
-Three things matter and the rule does not say them because they only make sense in this composite scene:
-
-- **`STRIP_BASE_X = -VIEWPORT_W`** by construction (Phase 3 ended there). The `Math.min` baseline is that value plus `INITIAL_OFFSET` (typically 0), not 0.
-- **Per-character offsets are pre-measured once** from the full target string, then stored as an array. Measuring `getBoundingClientRect()` on a growing text node per frame works but adds layout cost on every seek; the array form is O(1) per frame.
-- **`Math.min` (not an `if` branch).** The handoff between "static" and "tracking" is mathematically continuous: while the cursor is left of the target screen X, `trackingStripX` is _less negative_ than the baseline, so `Math.min` returns the baseline. The instant the cursor crosses, `trackingStripX` overtakes it and tracking begins — no jump. An `if (charsTyped > threshold)` branch will visibly snap on the boundary character.
-
-The bar's pixel width must be pre-allocated from a real font measurement before the timeline registers, so the typing doesn't reflow the bar (which would invalidate `measuredCharOffsets`):
-
-```js
-const probe = document.createElement("span");
-probe.style.cssText =
-  "position:absolute; left:-99999px; white-space:pre; " +
-  `font: ${BAR_FONT_WEIGHT} ${BAR_FONT_SIZE}px ${BAR_FONT_STACK};`;
-probe.textContent = FULL_TEXT;
-document.body.appendChild(probe);
-const fullTextWidth = probe.getBoundingClientRect().width;
-probe.remove();
-document.querySelector(".shot2-bar").style.width =
-  PADDING_LEFT + fullTextWidth + CURSOR_VIS_W + PADDING_RIGHT + "px";
-```
-
-Build the timeline **synchronously** without a `document.fonts.ready` gate — that gate causes worker-race flicker on parallel-frame renders. See [camera-cursor-tracking](../rules/camera-cursor-tracking.md#critical-constraints) for the rationale; this is a hard constraint inherited from that rule. Fallback-font measurement error of a few percent is recoverable; missing timeline registration is not.
-
-If the typing finishes before `TOTAL_DURATION`, extend the dwell with the rule's GSAP-driven finite-yoyo cursor blink so the GSAP timeline and the root composition's `data-duration` end together. CSS `@keyframes blink infinite` will flicker non-deterministically under HF's seek-by-frame.
-
-## Key Values to Choose (Not Already in the Rules)
-
-Only values **specific to this blueprint** below; standard parameters (`FLIP_DUR`, `FLIP_STAGGER`, `CURSOR_TARGET_FRACTION`, `BAR_FONT_SIZE`, etc.) live in the referenced rules.
-
-- **`VIEWPORT_W` / `VIEWPORT_H`**: must equal the scene root's `data-width` / `data-height` and are the per-shot width on the strip. Any mismatch makes the pan over- or under-shoot by exactly that delta.
-- **`PARALLAX_DIST`**: extra pixels Shot 1 content travels beyond the strip. 15–25% of `VIEWPORT_W` reads as cinematic depth; over 30% feels like Shot 1 is being thrown away, under 10% reads as no parallax at all.
-- **`FADE_RATIO`**: 0.3–0.5 of `PAN_DUR`. Shot 1's opacity reaches 0 at this fraction — fade later and stale content sits on the climax; fade earlier and the parallax has nothing visible to move.
-- **`PAN_DUR`**: 0.5–1.0s. Under 0.4s reads as a whip-pan (disorienting between two distinct shots); over 1.2s drags the bridge.
-- **`ENTRY_SCALE_FROM`**: 0.7–0.9 on the bar. Smaller exaggerates the landing; the `back.out(ENTRY_BOUNCE)` ease assumes some headroom, so don't go above 0.95 or the overshoot has nothing to do.
-- **`STATIC_WEIGHT` vs `ACCENT_WEIGHT`**: discrete font weights, but with `ACCENT_WEIGHT > STATIC_WEIGHT` so the accent word reads as dominant even before it decodes. The decode then _confirms_ a hierarchy the eye already saw — pleasant, not surprising.
-- **`BAR_LEFT_MARGIN`**: 40–120 px from the left edge of Shot 2. This is where the empty bar sits before tracking starts; pick it visually, the Phase 4 math compensates for whatever you choose.
-- **`INITIAL_OFFSET`**: usually 0 (bar sits where `BAR_LEFT_MARGIN` puts it). Non-zero values pre-shift the bar in screen space if the bar needs to feel "already mid-frame" at the start of typing.
-
-## Critical Constraints (ordered by failure frequency)
-
-- **Pan ease is `power3.inOut` or `power2.out`, never `back.out`** — overshoot on the strip reads as a UI menu, not a camera. Reserve `back.out` for `.shot2-bar` entry inside Shot 2.
-- **Phase 4 uses `Math.min`, not an `if` branch** — the static→tracking handoff must be mathematically continuous, or the camera snaps on the boundary character.
-- **Pre-allocate the bar's width from a real font probe before timeline registration** — letting the bar grow with the typed text invalidates the per-character offset array and the cursor falls behind by ~1 character.
-- **Build the timeline synchronously, no `document.fonts.ready` gate** — see [camera-cursor-tracking constraints](../rules/camera-cursor-tracking.md#critical-constraints); worker-race flicker is unacceptable.
-- **`STRIP_BASE_X = -VIEWPORT_W` is the baseline for Phase 4, not 0** — Phase 3 ended the strip there. Forgetting this resets the camera to Shot 1 the instant typing starts.
-- **`.shot { width: VIEWPORT_W; flex-shrink: 0 }`** — without `flex-shrink: 0`, flex compresses both shots into one viewport, pan distance becomes wrong, parallax silently breaks.
-- **Cursor blink via finite GSAP yoyo, not CSS `@keyframes blink infinite`** — CSS animation clocks don't sync with HF's per-frame seek.
-- **Phase 1 → Phase 2: no gap; Phase 2 → Phase 3: ≥ 0.2s; Phase 3 → Phase 4: ≥ 0.15s** — see Phase Timing for the per-gap rationale.
-- **Three concurrent tweens in Phase 3 must share `PAN_DUR`** — pan, parallax, and Shot 2 entry are read as one cinematic event; differing durations decouple them visually.
-
-## Spring → Ease Selection
-
-Four phases, four feels. The complete spring → ease mapping table lives in [hyperframes-animation/SKILL.md](../SKILL.md); this blueprint's defaults:
-
-- Phase 1 settle → `power2.out`
-- Phase 2 character flip → `back.out(FLIP_BOUNCE)` (rule default)
-- Phase 3 camera pan + parallax + Shot 1 fade → `power3.inOut` (pan/parallax), `power2.out` (fade)
-- Phase 3 Shot 2 landing → `back.out(ENTRY_BOUNCE)` (mild overshoot)
-- Phase 4 typing driver → `"none"` (linear); camera tracking driven by `gsap.set` in `onUpdate`, no ease
-
-## Golden Sample
-
-- [concept-demo-decode-pan.html](../examples/concept-demo-decode-pan.html) — runnable composition with concrete values for every named constant above. Single paused GSAP timeline drives all four phases; the strip's `x` is shared between Phase 3's pan tween and Phase 4's `gsap.set` cursor tracking. Run it first, then change values — far faster than building from scratch.
diff --git a/skills/hyperframes-animation/blueprints/constellation-hub.md b/skills/hyperframes-animation/blueprints/constellation-hub.md
new file mode 100644
index 0000000000..0d472861a1
--- /dev/null
+++ b/skills/hyperframes-animation/blueprints/constellation-hub.md
@@ -0,0 +1,44 @@
+# constellation-hub — Constellation / Hub + Satellites
+
+**intent**: Labeled/iconned nodes spring into a ring/cluster around a center, then the shot resolves on the core — either by pushing the camera INTO the center (depth-of-field collapsing onto it) or by holding a hub mark while the satellites ORBIT it; the "everything connects to / sits around one center" beat.
+
+**roles served**
+
+- Hook (from `hook-cluster-push-in`): a constellation of tool/app nodes springs into a wide ring, then a sustained camera push-in with depth-of-field resolves on the inner core — "it connects everything / one hub for all your tools."
+- Social_Proof (from `social-proof-orbit-ecosystem`): the product brand mark lands as the center hub and partner logos spring onto a ring and revolve around it — "plugs into / sits at the center of your stack."
+- CTA (from `cta-orbit-collapse`): the ring resolves by COLLAPSE rather than a push-in — category icons drift around an empty central CTA, a cursor click implodes the orbit toward the click point, and the product demo springs OUT of that collapse as the answer (scope → choice → consequence → product).
+- Social_Proof (from `proof-logo-chain`): a persistent center logo accrues proofs — its wordmark decodes, a claim ticker swaps, the logo glides to center, then avatars cascade into orbit with drawn connectors while partner logos scroll the bottom strip; four claims read as one statement.
+
+**duration**: 5–8s (Hook 5–6s · Social_Proof 5–8s · CTA orbit-collapse ~6s)
+
+**shot structure**
+
+Consolidated template — nodes ring a center, then one of two finishers resolves on the core.
+
+- Scene 1 (0.0–~1.5s): `[bg]` (dark/space field, optionally slow-drifting diffused gradient blobs). `[primary nodes]` (circles carrying `[icon]` + label) SPRING-POP in (scale 0→1, ~1.15 elastic overshoot, staggered) arranged in a wide ring/cluster around an empty or marked center `[hub]`.
+- Scene 2 (~0.7–2.5s, overlapping): smaller `[secondary nodes]` (platform / partner-logo chips) pop in staggered with the same elastic spring, filling the gaps; optional thin `[accent]` connector lines / orbit ring draw from hub→nodes. Camera holds.
+- Scene 3 (~2.5–Xs, the resolve): see finisher variant below; lands and HOLDS on the magnified / orbited center to the end.
+
+- Variant — Hook (push-in finisher): from Scene 3, a continuous smooth CAMERA PUSH-IN toward the center inner cluster — inner nodes scale up and stay sharp while outer nodes are pushed toward the edges and progressively BLUR (depth-of-field), background scales up smoothly; holds magnified on the core.
+- Variant — Social_Proof (orbit finisher): the center `[brand mark]` snaps in via a quick 3D rotate that decelerates and settles; a thin `[accent]` orbit ring draws around it; `[N partner badges]` spring onto the ring (staggered overshoot) and revolve CLOCKWISE while staying upright, under a continuous slow camera ZOOM-OUT (ecosystem reveal).
+- Variant — Social_Proof (optional type-push-through opener, prepended before Scene 1): centered `[headline]` types/slides in with a huge transparent-fill OUTLINE copy of the same words behind it; the outline text scales up exponentially toward camera (high-speed dolly / push-through), breaches the frame, then HARD-CUTS to the hub bg of Scene 1.
+
+**motion vocabulary**: staggered elastic spring-pop node entrances (~1.15 overshoot); slow gradient-blob drift; connector-line / orbit-ring draw-on; 3D snap-rotate-settle on the hub mark; continuous camera push-in (inner sharp, outer depth-of-field blur, bg scale-up); clockwise orbital revolve of upright badges; continuous slow camera zoom-out (ecosystem reveal); optional outline-text push-through dolly entry.
+
+**rule mapping** (motion verb → `rules/<id>.md`)
+
+- staggered spring-pop node entrances → `spring-pop-entrance` (elastic overshoot) + `gsap-effects` (stagger recipe); 3D-flip-in flavor → `orbit-3d-entry`
+- ring / cluster layout of nodes around a center → `avatar-cloud-network` (nodes on an elliptical ring + SVG lines to a center)
+- icons on the nodes → `svg-icon-enrichment`
+- connector lines hub→node → `svg-path-draw`
+- orbit-ring draw-on → `svg-path-draw`
+- slow gradient-blob drift → `sine-wave-loop` (idle looped drift)
+- 3D snap-rotate-settle on hub mark → `orbit-3d-entry` (3D-flip entry); technique CSS-3D
+- clockwise orbital revolve of upright badges → `orbit-3d-entry` (continuous elliptical orbit); technique MotionPath
+- camera push-in toward center → `multi-phase-camera` (PUSH-in) + `coordinate-target-zoom` (target the core)
+- background scale-up during push-in → `multi-phase-camera`
+- continuous slow zoom-out (ecosystem reveal) → `multi-phase-camera` (pull-back) / `coordinate-target-zoom`
+- outline-text push-through dolly opener (Social_Proof) → `3d-text-depth-layers` (outline copy behind) + `multi-phase-camera` (push-through)
+- depth-of-field blur on outer nodes during push-in → `depth-of-field-blur` (progressive DOF/focus-falloff blur on the off-center outer nodes while the inner core stays sharp)
+
+**camera modifier**: push-in-with-DOF (Hook) — `multi-phase-camera` PUSH-in targeted via `coordinate-target-zoom` onto the core; the focus-falloff blur half of it is backed by `depth-of-field-blur`. Orbit finisher (Social_Proof) — slow continuous zoom-out via `multi-phase-camera` (pull-back) while satellites revolve.
diff --git a/skills/hyperframes-animation/blueprints/cta-morph-press.md b/skills/hyperframes-animation/blueprints/cta-morph-press.md
index a742e00a39..98856763e3 100644
--- a/skills/hyperframes-animation/blueprints/cta-morph-press.md
+++ b/skills/hyperframes-animation/blueprints/cta-morph-press.md
@@ -1,183 +1,28 @@
----
-id: cta-morph-press
-role: cta
-duration_seconds: [4, 6]
-phases: 4
-visual_arc: hero-entrance → morph-swap → cursor-approach → press-react
-uses_rules: [sine-wave-loop, scale-swap-transition, physics-press-reaction]
-element_roles:
-  hero: Initial focal element (logo, brand lockup, product) that establishes presence then exits via shrink-fade
-  cta: Interactive target (button, card, link) that enters via bouncy scale-swap at the hero's position
-  cursor: Pointer that enters from off-screen along a spring path, then performs a physical click
-when_to_use:
-  - Scene transitions from brand presence to a call-to-action
-  - Two elements occupy the same screen position sequentially (morph illusion)
-  - Simulated user interaction (cursor click) on the final element
-  - Hero should feel "alive" before transforming (breathing idle)
-when_not_to_use:
-  - Hero and CTA coexist on screen — see brand-reveal-assemble-zoom
-  - CTA enters from off-screen — see takeover-ticker-displace
-  - No click interaction — use scale-swap-transition alone
-  - Multiple CTAs need sequential interaction
-triggers:
-  [logo morphs into button, CTA animation, cursor clicks button, brand to action, morph transition]
----
+# cta-morph-press — CTA Morph & Press
 
-# CTA · Morph & Press (HyperFrames)
+**intent**: A resting brand mark condenses at the same screen center into a smaller, brighter CTA, then a cursor arrives from off-stage and lands a human-aimed click on it. The viewer's eye is walked from "this is who we are" to "and this is what you do." The morph and the click are the two headline beats.
 
-This is a "presence → action" arc: the hero establishes the brand for a beat or two — alive but resting, just a faint rotational breath on the logo — then condenses into a smaller, brighter CTA at the same screen center; a cursor arrives from off-stage and lands a physical click on it. The viewer's eye is moved from "this is who we are" to "and this is what you do."
+**roles served**
 
-Four phases on a single paused GSAP timeline. The morph (Phase 2) and the click (Phase 4) are the headline beats; Phases 1 and 3 are the setup and approach that make those beats legible.
+- CTA (from `cta-morph-press`): when the close moves from brand identity to a single user action, two elements share the same center sequentially (a morph, not a cut), and the payoff is a simulated click with physical feedback. Reach for it for a focused "click here" sign-off — no spatial set, no multi-step UI (that's `cursor-ui-demo`).
 
-## When to Use
+**duration**: 4–6s
 
-- Scene arc moves from brand identity to user action
-- Two elements share the same screen center but appear sequentially (morph)
-- Final beat is a simulated click interaction with physical feedback
-- Hero needs subtle ambient motion before transformation
+**shot structure** (a `[bg]` canvas; hero and CTA are flex-centered siblings sharing one `transform-origin`)
 
-## Orchestration
+- **Scene 1 (0.0–~1.4s) — presence.** The `[hero mark / brand lockup]` holds dead-center, alive but resting — only a faint rotational breath on the mark; any title text under it stays rock-stable. Camera static.
+- **Scene 2 (~1.4–2.4s) — the morph (signature move).** The hero CONDENSES at the same screen center into a smaller, brighter `[CTA]` (button / card): the outgoing mark shrink-fades exactly as the CTA scales up in its place. Because they share one `transform-origin`, the eye reads it as one element transforming, not a swap.
+- **Scene 3 (~2.4–3.4s) — approach.** A `[cursor]` arrives from off-stage on a **decelerating** path (it "arrives," it does not pass through) and lands a few px **off** the CTA's geometric center, so the aim reads human, not scripted.
+- **Scene 4 (~3.4–end) — press.** The cursor lands a physical CLICK — cursor and CTA compress together in lockstep, then release with feedback (an optional ripple / glow bloom). Holds on the clicked state.
 
-Each phase maps to one rule (or an inline pattern) — pick the variation that fits this scene's specific constraints, not the rule's default:
+**motion vocabulary**: faint rotation-only resting breath (logo scope only); same-center morph-swap (shrink-fade ↔ scale-up sharing `transform-origin`); cursor decel-arrival from off-stage; off-center human aim; lockstep press compression; release feedback ripple / glow.
 
-- **Phase 1 — hero entrance + breath**: inline `power3.out` fade-and-rise for the entrance, plus [sine-wave-loop](../rules/sine-wave-loop.md) in its **rotation-only, scope-restricted** variation. The rule's main form breathes scale + y on the entire focal element; here we deliberately apply it **only to `.hero-logo`**, not the whole hero. Reason: the hero's `scale` gets overwritten by the Phase 2 morph exit, and a scale-breath on the hero itself would fight that tween in the overlap. Rotation alone reads as alive, and scoping it to the logo keeps the title text rock-stable. Scale-breath below ~0.012 is under the perception threshold anyway — skip it without regret.
-- **Phase 2 — morph swap**: use [scale-swap-transition](../rules/scale-swap-transition.md), but **without the rule's `inset: 0` card-in-fixed-wrap container**. Hero and CTA are flex-centered siblings here, not stacked cards. They still share `transform-origin: 50% 50%` (which is what actually sells the morph), but their footprint is governed by flex and intrinsic content size, not a `SWAP_WRAP_W × SWAP_WRAP_H` box. The CTA's `position: absolute` keeps it from displacing the hero in the document flow during the brief overlap. See "Phase 2 seam" below.
-- **Phase 3 — cursor approach**: no rule — inline. [physics-press-reaction](../rules/physics-press-reaction.md) does include an APPROACH sub-phase, but its default lands the cursor dead-center on the button (`BUTTON_CENTER`) with `power2.inOut`. This scene wants a **`power2.out` deceleration from off-screen** (cursor "arrives" rather than "passes through"), and the landing point must be **a few px off the button's geometric center** so the click reads as human, not scripted. Cursor opacity also hard-cuts in via a near-zero-duration `fromTo` — see "Phase 3 seam."
-- **Phase 4 — press + release**: use [physics-press-reaction](../rules/physics-press-reaction.md), but **only the PRESS_DOWN + RELEASE portion** — Phase 3 has already handled the APPROACH inline. The press fires with the rule's signature `["#cta", "#cursor"]` single-target-array tween so both elements compress in perfect lockstep. See "Phase 4 seam" for why we lean on GSAP's auto-overwrite rather than composing scales manually.
+**rule mapping**
 
-## Phase Timing
+- hero → CTA condense at one center → `scale-swap-transition` (shared `transform-origin: 50% 50%` is what sells the morph; CTA `position: absolute` so it doesn't shove the hero during the brief overlap)
+- resting-hero aliveness (rotation only, scoped to the mark so the Phase-2 scale doesn't fight it) → `sine-wave-loop` (low-amplitude rotation register — subtle jitter, not a scale breath)
+- cursor press + release in lockstep (single-target-array so both compress together) → `physics-press-reaction` (PRESS_DOWN + RELEASE portion)
+- cursor approach (decel from off-stage, off-center landing, hard-cut opacity in) → `gsap-effects` (translate on `power2.out`)
+- click ripple / release glow → `cursor-click-ripple` (attack-decay ring) and/or `ambient-glow-bloom` (release bloom)
 
-All boundaries are in seconds.
-
-| Phase | Start ≥                             | Internal duration                  | Notes                                                        |
-| ----- | ----------------------------------- | ---------------------------------- | ------------------------------------------------------------ |
-| 1     | `0.1–0.4s` (`INTRO_START`)          | `INTRO_DUR` (0.35–0.7s)            | Breath rotation runs from `t=0`, invisible until entry fades |
-| 2     | `INTRO_START + INTRO_DUR + 1–2s`    | `MORPH_EXIT_DUR` / `MORPH_ENT_DUR` | The 1–2s presence-dwell is the most important gap here       |
-| 3     | `MORPH_AT + MORPH_ENT_DUR + ~0.1s`  | `CURSOR_PATH_DUR` (0.7–1.4s)       | CTA's back.out tail must settle before the cursor enters     |
-| 4     | `CURSOR_ENTER_AT + CURSOR_PATH_DUR` | `CLICK_DOWN_DUR + CLICK_UP_DUR`    | **Exactly equal**, not "greater than" — see Phase 3→4 seam   |
-
-The 1–2s **presence-dwell** between Phase 1 and Phase 2 is the gap that almost everyone gets wrong by making it too short. Morphing the hero away half a second after it lands robs the brand of any actual presence — the viewer registers the morph as the headline and forgets the hero ever existed. Dwell long enough that the breath rotation completes most of a cycle (so the viewer's eye notices the aliveness) before transforming.
-
-The `~0.1s` between Phase 2 and Phase 3 is the same idea as brand-reveal's `back.out` settling gap: the CTA's overshoot is still oscillating fractionally for a few frames after its nominal duration, and a cursor entering during those frames "shakes the camera." Wait for the spring tail.
-
-The `CLICK_DOWN_AT == CURSOR_ENTER_AT + CURSOR_PATH_DUR` constraint between Phase 3 and Phase 4 is **a strict equality, not a buffer**. The viewer perceives "cursor lands" and "button compresses" as a single causal event; any gap, even one frame, reads as the cursor pausing then clicking. Bind these two values to the same expression in code.
-
-After the release, hold at least one full second of climax dwell (`TOTAL_DUR ≥ CLICK_UP_AT + CLICK_UP_DUR + 1s`) so the spring rebound is legible — otherwise the comp ends mid-overshoot and the press never quite "lands."
-
-## Initial DOM Nesting
-
-The relevant fact is that hero and CTA are **siblings sharing the same flex-centered viewport position**, not stacked `inset:0` cards as in `scale-swap-transition`'s default. The cursor is a third sibling living at scene-root level, free to translate anywhere.
-
-```
-.stage  (flex; align/justify center; relative)
-├── #hero
-│     ├── .hero-text
-│     └── .hero-logo   ← Phase 1 breath target (rotation only)
-├── #cta  (position: absolute; z-index 10)
-│     └── .cta-text    ← reveals after container reaches recognizable scale
-└── #cursor (position: absolute; z-index 100)
-```
-
-The CTA's `position: absolute` is essential — without it, the CTA would push the hero out of the flex layout the moment it materialises, and both elements would shift sideways instead of morphing in place. Hero stays in flow; CTA layers on top.
-
-## Phase 1 Seam: Why Breath Lives on `.hero-logo`, Not `.hero`
-
-The breath rotation uses the `onUpdate` form from [sine-wave-loop](../rules/sine-wave-loop.md) but written against `tl.time()` directly (not a phase-tween from 0 → 2π), and the target is **the logo sub-element only**. Three reasons stack here:
-
-1. The Phase 2 morph exit tweens `#hero { scale: EXIT_SCALE }`. If the breath were also writing `scale` onto `#hero`, the two tweens would race and GSAP's auto-overwrite would silently drop one.
-2. Scoping breath to the logo lets the hero's title text stay rigid — moving text reads as instability, not life.
-3. Pure rotation at `±2–6°` is enough to communicate "alive but resting"; adding a sub-threshold scale-breath only complicates the morph exit math without adding perceptible motion.
-
-This is a one-sentence variation of `sine-wave-loop` worth flagging: the rule's main example writes both scale and y; the rotation-only sub-element form is a real pattern but barely shown.
-
-## Phase 2 Seam: Same Center, Different Container Topology
-
-[scale-swap-transition](../rules/scale-swap-transition.md) assumes both swap targets share an `inset: 0` parent inside a fixed `SWAP_WRAP_W × SWAP_WRAP_H` wrap. This scene breaks that assumption because the hero is a typographic group whose intrinsic width depends on `{Brand}` — pre-locking a wrap size would either crop the brand or pad the CTA with dead space.
-
-The substitute: both elements rely on the parent `.stage`'s `align-items: center; justify-content: center` for centering, and `#cta` is taken out of flow with `position: absolute` so its existence doesn't perturb the hero. Both still need `transform-origin: 50% 50%` (the rule's central principle), and `z-index: 10` on the CTA (above hero) so the hero's fade tail doesn't bleed through.
-
-The morph reads as **condensation** only when `ctaTotalWidth < heroGroupWidth`. Inverted, the same scale-swap reads as expansion (small thing becoming big thing) which is the wrong narrative for "brand condenses into a focused action." `CTA_MAX_REL_HERO` (0.5–0.8) is the safety rail; values above 0.8 visibly invert the illusion. Measure both widths after `document.fonts.ready` if you want this guaranteed at render time.
-
-Inside the CTA, the inner text reveals at `MORPH_AT + 0.17s` (or `~0.3 × MORPH_ENT_DUR`) **after** the container has scaled past the early micro-frames of the `back.out`. Revealing text during the early bounce makes it pop at micro-scale and look like a glitch.
-
-## Phase 3 Seam: Cursor Entry — Hard-Cut Opacity, Offset Landing
-
-Two scene-specific tricks the rule doesn't spell out:
-
-**Hard-cut opacity.** Real cursors don't fade in — they're either there or not. Implement with a near-zero-duration `fromTo`:
-
-```js
-tl.fromTo(
-  "#cursor",
-  { opacity: 0 },
-  { opacity: 1, duration: HARD_CUT_DUR, ease: "none" },
-  CURSOR_ENTER_AT,
-);
-```
-
-`HARD_CUT_DUR` lives in the 0.001–0.01s range — small enough to read as instant under HF's frame-stepped seek, but non-zero so it produces an actual step change in the seekable timeline rather than a `set()` that might be missed during a reverse seek.
-
-**Offset landing, not dead-center.** The cursor's target is the button's center **plus** a small (`±30–150 px`) offset on both axes — typically a hair right and below. Real cursors land where eye + hand coordinate, which biases slightly toward the visible mass of the button rather than its geometric midpoint. Dead-center lands too perfectly and reads as scripted.
-
-```js
-const CURSOR_TARGET_X = W / 2 + CURSOR_TARGET_OFFSET_X_PX;
-const CURSOR_TARGET_Y = H / 2 + CURSOR_TARGET_OFFSET_Y_PX;
-```
-
-`W` and `H` are the composition's `data-width` / `data-height`. The starting point lives `CURSOR_OFFSCREEN_X_PX / Y_PX` beyond `W` and `H` — far enough that the spring approach reads as inbound motion, not a teleport. Path duration sits at 0.7–1.4s; faster reads as urgent, slower as deliberate.
-
-## Phase 4 Seam: Synchronized Press via Single Target Array
-
-The press is the only place in this blueprint where two elements must move in literal lockstep. The mechanism that guarantees that is using a single GSAP target array:
-
-```js
-tl.to(
-  ["#cta", "#cursor"],
-  { scale: 1 - PRESS_INTENSITY, duration: CLICK_DOWN_DUR, ease: "power3.out" },
-  CLICK_DOWN_AT,
-);
-tl.to(["#cta", "#cursor"], { scale: 1.0, duration: CLICK_UP_DUR, ease: "power2.out" }, CLICK_UP_AT);
-```
-
-The temptation is to split this into per-element tweens with subtly different eases ("the cursor should feel slightly heavier than the button"). Don't. Any desync, even a few frames, breaks the illusion that the two are touching — the cursor floats off the button surface. One array, one ease, one duration, one start time.
-
-By the time `CLICK_DOWN_AT` fires, the CTA's `back.out` entrance has long since settled at `scale: 1`. The press tween's `scale: 1 - PRESS_INTENSITY` overwrites cleanly via GSAP's `overwrite: "auto"`, and `scale: 1.0` overwrites back on release. No manual scale composition needed — that's only required when two tweens overlap in time, and here they don't.
-
-## Key Values to Choose (Not Already in the Rules)
-
-Only the parameters this blueprint introduces; for sizing ratios, eases, BOUNCE_FACTOR, PRESS_INTENSITY ranges, see the linked rules.
-
-- **CTA_MAX_REL_HERO**: 0.5–0.8. Maximum ratio of CTA width to hero group width. Above 0.8 the morph inverts and reads as expansion — wrong narrative.
-- **CURSOR_TARGET_OFFSET_X_PX / Y_PX**: ±30–150 px. Small non-zero offsets from viewport center for the cursor's landing point. Zero reads as scripted; ±200+ misses the button.
-- **CURSOR_OFFSCREEN_X_PX / Y_PX**: 50–300 px beyond the composition edge. Cursor's starting position. Larger values make the approach more dramatic; too small and the cursor "pops in from the edge."
-- **HARD_CUT_DUR**: 0.001–0.01s. Near-zero duration that creates a step change in opacity rather than a fade. Must be non-zero to survive frame-stepped seeking.
-- **MORPH_FADE_DUR**: 25–40% of `MORPH_EXIT_DUR`. Hero's opacity fades faster than its scale shrinks, so it's gone before it lands at small scale (otherwise you see a tiny ghost-hero behind the CTA).
-- **LOGO_ROT_AMP_DEG**: 2–6°. Breath rotation amplitude on the logo only. Bigger reads as a wobble; smaller is below the perception threshold.
-
-## Critical Constraints (ordered by failure frequency)
-
-- **`CLICK_DOWN_AT === CURSOR_ENTER_AT + CURSOR_PATH_DUR`** — exact equality, not "approximately." Bind these in code via the same expression. Any gap breaks the cursor-lands-and-clicks single-event perception.
-- **Presence-dwell ≥ 1s before morph** — the most common mistake is making `MORPH_AT - (INTRO_START + INTRO_DUR)` too small. Without dwell, the hero never registers as the brand.
-- **Single target array for the press** (`["#cta", "#cursor"]`, not two tweens) — desynced press = floating cursor = no contact illusion.
-- **Cursor hard-cut, not fade** — a 0.4s fade-in cursor reads as a ghost; use `HARD_CUT_DUR` in the 0.001–0.01s range.
-- **Breath rotation on `.hero-logo` only**, never on `#hero` — Phase 2's morph exit overwrites the hero's scale; breath on the same element would race.
-- **CTA `position: absolute`** — without it, the appearing CTA shifts the hero out of flex flow at `MORPH_AT` and the morph "jumps sideways."
-- **CTA z-index above hero** (`z-index: 10`) — hero's fade tail at opacity 0.3–0.5 will bleed through the popping CTA otherwise.
-- **Cursor z-index above CTA** (`z-index: 100`) — during the press, the cursor must visibly sit on top of the button.
-- **CTA total width < hero group width** (enforced by `CTA_MAX_REL_HERO`) — inverted ratios make the morph read as expansion, breaking the narrative.
-- **Cursor landing offset from dead-center** — dead-center reads as scripted; ±30–150 px sells humanness.
-- **`CLICK_UP_AT > CLICK_DOWN_AT + CLICK_DOWN_DUR`** — reversed timing inverts the press into a "lift-then-press" misplay.
-- **Climax dwell ≥ 1s after release** — comps ending mid-spring rebound never feel like the press "landed."
-
-## Spring → Ease Selection
-
-Four distinct feels; the full mapping table lives in [hyperframes-animation/SKILL.md](../SKILL.md). This blueprint's defaults:
-
-- Phase 1 hero entrance → `power3.out`; breath rotation → `onUpdate Math.sin`
-- Phase 2 hero exit → `power3.out`; CTA pop-in → `back.out(BOUNCE_FACTOR)`
-- Phase 3 cursor approach → `power2.out` (deceleration into landing)
-- Phase 4 press down → `power3.out`; release → `power2.out`
-
-## Golden Sample
-
-- [cta-morph-press.html](../examples/cta-morph-press.html) — runnable four-phase composition on a single paused GSAP timeline. Run this before tuning values from scratch; most of the cursor-offset and dwell numbers are easier to dial in by changing constants than by deriving from text.
+**camera modifier**: camera-static — the morph and click happen in element space; a camera move would compete with the click as the climax.
diff --git a/skills/hyperframes-animation/blueprints/cta-orbit-collapse.md b/skills/hyperframes-animation/blueprints/cta-orbit-collapse.md
deleted file mode 100644
index 86683bbdd2..0000000000
--- a/skills/hyperframes-animation/blueprints/cta-orbit-collapse.md
+++ /dev/null
@@ -1,189 +0,0 @@
----
-id: cta-orbit-collapse
-role: cta
-duration_seconds: [5, 8]
-phases: 5
-visual_arc: icons-orbit → cursor-click → collapse → demo-appears → demo-floats
-uses_rules: [orbit-3d-entry, cursor-click-ripple, center-outward-expansion, sine-wave-loop]
-element_roles:
-  orbit_icons: 3D-entry icons representing categories / use-cases, orbiting the centerpiece
-  center_cta: Central CTA element (input bar, button) that receives the click
-  cursor: Animated cursor that moves to the CTA and clicks with ripple feedback
-  demo: Product demo (video / image) that appears from the collapse point and floats
-when_to_use:
-  - Show product versatility (works for many categories / use-cases)
-  - Icons represent different content types, genres, modes, or technology surfaces
-  - User-click metaphor triggers transformation from categories → result
-  - "Many options → one action → one result" narrative compression
-when_not_to_use:
-  - Categories have no distinct iconography (use a text list)
-  - No user-action metaphor — product works automatically
-  - Scene is purely informational
-triggers: [works for any genre, multiple categories, click to generate, versatile tool, one click result]
----
-
-# CTA · Orbit Collapse (HyperFrames)
-
-This is a "scope → choice → consequence → product" emotional arc: the viewer first sees a ring of categories drifting around an empty CTA (the product handles many things), a cursor walks in and decisively clicks (the user picks one), the orbit implodes toward the click point (the choice consumes the options), and the demo springs out of that collapse point as the answer. A final breathing yoyo says "this is what you get."
-
-One paused GSAP timeline, five phases. Phase 1 (orbit) and Phase 3 (collapse) share a single master `onUpdate` clock — they cannot be independent tweens, see Phase 1↔3 seam.
-
-## When to Use
-
-- Versatility scene: the product handles many categories, and you need the eye to feel that span before the pivot
-- The transformation from "options" to "result" should feel **physical** — a click pulls the icons inward, not a fade
-- A cursor click drives the narrative pivot (versus a zoom, a wipe, a swap)
-- Total duration sits in 5–8 s; shorter and the orbit doesn't register as ambient
-
-## Orchestration
-
-Each phase, the rule (or `inline`) that drives it, and why this variation:
-
-- **Phase 1 — orbit entry**: use [orbit-3d-entry](../rules/orbit-3d-entry.md) for the per-icon 3D flip-in (`back.out(ENTRY_BACK)`, mild end of the rule's range). **But the orbit motion itself is NOT taken from the rule's per-item `onUpdate`** — it's folded into the master clock in Phase 3, because the same clock must also drive the collapse. See Phase 1↔3 seam.
-- **Phase 2 — cursor click**: use [cursor-click-ripple](../rules/cursor-click-ripple.md) end to end — cursor move (`back.out(CURSOR_BACK)` for a calm settle, since the click must read as deliberate not darting), depression yoyo on cursor + CTA button, and the rule's **keyframed attack-decay ripple variation** (the explicit `0 → peak → 0` envelope), because the click is the narrative climax and a linear fade reads as weak. Single ring — the orbit is already busy enough that multiple rings would muddy the moment.
-- **Phase 3 — collapse**: use [center-outward-expansion](../rules/center-outward-expansion.md) in its **reversed driver form** — the rule's `progress * (target - center)` math run with progress going `0 → 1` becomes the inward path. The reversal is the only thing we keep; the rule's per-item tweens are replaced by the same master `onUpdate` that runs the orbit (see Phase 1↔3 seam). Ease: `back.out(COLLAPSE_BACK)` consumed via `gsap.parseEase` (see Phase 3 ease seam).
-- **Phase 4 — demo entry**: inline single `fromTo` with `back.out(DEMO_BACK)` on `.demo` from `scale: 0` to `scale: 1`. One tween, no orchestration — making this a rule would be overengineering, same call as the brand-reveal hero pop.
-- **Phase 5 — demo floats**: use [sine-wave-loop](../rules/sine-wave-loop.md) in its **simple `fromTo` + finite yoyo form** (not the multiplicative `onUpdate` form). The demo settles at exact `scale: 1` after Phase 4 (no outer-wrapper zoom is composing onto it), so a direct `y` + `rotation` yoyo is the simplest expression. If you change Phase 4 so the demo lands at a non-1 scale, switch to the rule's multiplicative form — see Phase 5 seam.
-
-## Phase Timing
-
-| Phase | Start ≥                                      | Internal duration                   | Notes                                                               |
-| ----- | -------------------------------------------- | ----------------------------------- | ------------------------------------------------------------------- |
-| 1     | `0`                                          | `(N-1) * ENTRY_STAGGER + ENTRY_DUR` | Orbit clock starts at t=0 even before flips finish                  |
-| 2     | `last-entry-finish + ~0.3s settle gap`       | `CURSOR_MOVE + decision_pause`      | Settle gap lets the orbit read as ambient before the cursor arrives |
-| 3     | `CLICK_AT`                                   | `COLLAPSE_DUR`                      | Orbit and collapse share one `onUpdate` — see seam                  |
-| 4     | `CLICK_AT + COLLAPSE_DUR − COLLAPSE_OVERLAP` | `DEMO_DUR`                          | **Negative gap (overlap)** — energy transfer, not a hard cut        |
-| 5     | `DEMO_AT + DEMO_DUR + ~0.2s IDLE_TAIL`       | `TOTAL − IDLE_START`                | Spring tail must finish before sine takes over                      |
-
-The Phase 1 → 2 settle gap (≥ 0.3 s after the last icon lands) is what lets the orbit read as **ambient motion** rather than "still entering" — without it, the cursor's entry overlaps the cascade and the viewer doesn't know what to look at. The Phase 2 → 3 transition has no gap by design: the click instant IS the collapse pivot. The Phase 3 → 4 step is intentionally **negative** (`COLLAPSE_OVERLAP`, 0.05–0.20 s) — the demo entry begins just before the collapse fully completes so the click reads as energy transferring into the demo, not as two separate events. The Phase 4 → 5 gap (`IDLE_TAIL`, ~0.2 s) is the same logic as every other spring→sine handoff: `back.out` decays to near-zero velocity but never literally zero, and a sine wave starting on top of that produces visible chatter.
-
-## Initial DOM Nesting (Critical)
-
-Each icon needs **three nested wrappers** because three independent sources write to it: the master `onUpdate` writes orbit-position to the outermost layer, the same `onUpdate` writes collapse scale/opacity to the middle layer, and the per-icon entry `fromTo` writes 3D rotation to the innermost layer. Tweening the same property on the same element from two sources is undefined behavior in GSAP, so these cannot share an element.
-
-```
-.icon-pos        ← outermost — orbit x/y (from master onUpdate)
-  .icon-collapse ← middle    — collapse scale/opacity (from master onUpdate)
-    .icon-entry  ← innermost — 3D flip rotateX/rotateY/z/scale/opacity (per-icon tween)
-      <svg> + label
-```
-
-`perspective` is applied to `.icon-pos` (the layer that owns the orbit transform) so the inner 3D rotation has depth — without it the flip-in reads as 2D scale. The orbit's elliptical radii (`RADIUS_X`, `RADIUS_Y`) are baked into the `onUpdate` math, not into per-icon CSS.
-
-The cursor sits at `z-index: 999` and the ripple at `z-index ≈ 6` — between the CTA card and the cursor. This ordering matters more here than in a plain `cursor-click-ripple` scene because the orbiting icons can pass in front of the CTA at any angle; without the explicit cursor z-index the cursor flickers behind icons mid-move.
-
-## Phase 1↔3 Seam: One Master `onUpdate` for Orbit + Collapse
-
-This is the blueprint's core glue and the single most important decision in the file. **The orbit must keep advancing while the radius shrinks** — otherwise the icons "snap" inward in a way that doesn't read as collapse. So orbit angle and collapse radius are computed in the **same** `onUpdate` that runs continuously from t=0 through the end of Phase 3:
-
-```js
-const COLLAPSE_EASE = gsap.parseEase(`back.out(${COLLAPSE_BACK})`);
-const ORBIT_END = DEMO_AT; // master clock stops once icons are gone
-
-tl.to(
-  { tick: 0 },
-  {
-    tick: 1, // unused — this is just a clock target
-    duration: ORBIT_END,
-    ease: "none",
-    onUpdate: () => {
-      const t = tl.time();
-      const collapseLinear = Math.max(0, Math.min(1, (t - CLICK_AT) / COLLAPSE_DUR));
-      const collapseEased = COLLAPSE_EASE(collapseLinear); // proxy spring
-      const radiusFactor = 1 - collapseEased; // 1 → 0 over Phase 3
-      const collapseScale = 1 - collapseEased * COLLAPSE_SCALE_DEPTH;
-
-      // Two-segment opacity envelope — see Opacity Knee seam below
-      const o = collapseEased;
-      const collapseOpacity =
-        o < OPACITY_KNEE_T
-          ? 1 - o * ((1 - OPACITY_KNEE) / OPACITY_KNEE_T)
-          : (OPACITY_KNEE * (1 - o)) / (1 - OPACITY_KNEE_T);
-
-      ICONS.forEach(({ sel, initialAngle, entryDelay }) => {
-        const localT = Math.max(0, t - entryDelay);
-        const angle = initialAngle + localT * ORBIT_SPEED;
-        gsap.set(`${sel}.icon-pos`, {
-          x: Math.cos(angle) * RADIUS_X * radiusFactor,
-          y: Math.sin(angle) * RADIUS_Y * radiusFactor,
-        });
-        gsap.set(`${sel} .icon-collapse`, { scale: collapseScale, opacity: collapseOpacity });
-      });
-    },
-  },
-  0,
-);
-```
-
-Three things are doing real work here and won't be obvious if you skim:
-
-**`tl.time()`, not the proxy tween's progress.** The orbit must be a pure function of the timeline clock so HF seek lands deterministically at every frame. Using the proxy tween's `progress` would be equivalent under play but drifts under seek-after-pause.
-
-**`gsap.parseEase` instead of a separate eased proxy tween.** A proxy tween (`tl.to(driver, { v: 1, ease: 'back.out(...)' })`) and `gsap.parseEase('back.out(...)')(progress)` produce identical values for the same progress fraction, but `parseEase` is anchored to `tl.time()` directly. A sibling proxy tween can drift from the master clock after seek, leaving the orbit and collapse out of step by a frame.
-
-**`entryDelay` shows up in `localT`, not in a conditional `if (t < entryDelay) skip`.** Each icon's orbit phase advances from the moment that icon's entry tween fires, not from t=0 — so icons that flipped in later are at an earlier angle on the orbit when the collapse begins. This is what gives the orbit its "cascade-into-motion" feel. A naive `if` gate around the `gsap.set` produces a hard jump when each icon's gate opens.
-
-## Phase 3 Ease Seam: Two-Segment Opacity Knee
-
-The `[1 → OPACITY_KNEE → 0]` opacity envelope is what makes the collapse read as **energy converging** rather than pop-vanish. A linear `1 → 0` fade across the collapse duration looks like the icons are simply being deleted — fine for a transition but wrong for a click-driven implosion. The knee form keeps icons mostly opaque through `OPACITY_KNEE_T` (typically 0.7–0.9 of the collapse), then drops sharply to 0 at the end — visually, the icons stay solid as they accelerate inward and only dissolve at the moment of impact.
-
-The two segments meet at `(OPACITY_KNEE_T, OPACITY_KNEE)`. The first segment is a line from `(0, 1)` to that point; the second is a line from there to `(1, 0)`. Both segments are computed against `collapseEased` (post-`back.out`), not `collapseLinear` — so the dissolve also gets the spring's late-stage slowdown, which makes the energy-release feel more deliberate.
-
-## Phase 3↔4 Seam: Collapse Origin = Demo Origin (Exactly)
-
-The demo's CSS-centering offsets must align **exactly** with the viewport-center point the icons collapse toward. The icons collapse to `(0, 0)` in `.icon-pos` translate-space, which (because of the rule's `xPercent: -50, yPercent: -50` centering) maps to the centroid of `.orbit-stage`. The demo uses `left: 50%; top: 50%` plus `xPercent: -50, yPercent: -50` (via GSAP, since the demo also takes a scale tween).
-
-This match must be exact. The eye is extremely good at picking up a few-pixel misalignment between the collapse target and the demo entry point — it reads as a teleport rather than emergence. If `.orbit-stage` is not the full viewport (e.g. a fixed-size centered stage), the demo must live inside the same stage container, not as a sibling — otherwise their viewport-center math differs by the stage's offset.
-
-`COLLAPSE_OVERLAP` (0.05–0.20 s) controls how much the demo entry overlaps the tail of the collapse. Too small (< 0.05) and the click reads as two disconnected events; too large (> 0.20) and the icons appear to pass _through_ the visible demo, breaking the energy-transfer illusion.
-
-## Phase 4↔5 Seam: Why the Simple Yoyo (Not Multiplicative)
-
-[sine-wave-loop](../rules/sine-wave-loop.md) has two implementation forms: a simple `fromTo + yoyo` and a multiplicative `onUpdate` that adds the breath onto an existing scale. We pick the simple form here because Phase 4 lands the demo at exact `scale: 1` with no outer wrapper composing onto it (unlike brand-reveal's hero, which has a `.zoom-scale` parent). The yoyo's `from` of `y: 0, rotation: 0` matches the demo's settled state at `IDLE_START`, so `sin(0) = 0` translates directly into "no jump at the seam."
-
-The repeat count is computed to land **before** the composition ends:
-
-```js
-const halfCycles = Math.max(0, Math.floor((TOTAL - IDLE_START) / HALF_CYCLE) - 1);
-```
-
-The `-1` keeps a half-cycle of buffer — without it, you risk the last visible frame catching the demo mid-breath. HyperFrames forbids `repeat: -1`, so this finite computation is mandatory.
-
-If you later add a scale overshoot that leaves the demo at, say, `scale: 1.05` after Phase 4 settles, switch to sine-wave-loop's multiplicative form — the simple yoyo would re-tween from `scale: 1`, undoing the overshoot.
-
-## Key Values to Choose (Not Already in the Rules)
-
-Only listing parameters unique to this blueprint — standard ranges (`ENTRY_DUR`, `STAGGER`, `RADIUS_X`, `BOUNCE_FACTOR`, etc.) live in the referenced rules.
-
-- **COLLAPSE_OVERLAP** (0.05–0.20 s): the negative gap between Phase 3 and Phase 4. Tune by eye against the demo's spring overshoot — a stiffer `DEMO_BACK` wants a smaller overlap, a softer one tolerates more.
-- **COLLAPSE_SCALE_DEPTH** (0.3–0.7): how far each icon shrinks during the collapse (`1 → 1 - depth`). Low values keep icons visible at the moment of impact (reads as "they were absorbed"); high values let them disappear into the click point (reads as "they were consumed"). Pick by narrative intent.
-- **OPACITY_KNEE / OPACITY_KNEE_T** (knee 0.3–0.6, knee_t 0.7–0.9): the kink in the two-segment opacity envelope. A high `knee_t` with a moderate `knee` is the "energy converging then released" curve. Lower `knee_t` reads as a normal fade.
-- **N (icon count)**: 4–12 is the comfort range. The `2π / N` angular spacing must leave room for the icon glyph plus label — measure the worst case (icon directly above or below CTA, where label sits closest to the CTA card).
-- **CURSOR_TARGET (X, Y)**: must align with the **visual centroid of the CTA button**, not the CTA card center. A 4-pixel miss reads as missing the button.
-
-## Critical Constraints (ordered by failure frequency)
-
-- **Three nested wrappers per icon — never collapse them**. Tweening orbit position, collapse scale, and 3D flip on the same element produces silent GSAP last-write-wins behavior. This is the failure people hit first and stare at longest.
-- **`COLLAPSE_BACK > ENTRY_BACK`**: the collapse must feel snappier than the entry, otherwise the click feels uncaused — the eye reads the cascade and the implosion as one continuous motion instead of cause-and-effect. The narrative pivot lives in this contrast.
-- **Demo origin matches collapse center exactly**: see Phase 3↔4 seam. A few-pixel misalignment reads as a teleport.
-- **Orbit angle is a function of `tl.time()`, not proxy tween progress**: see Phase 1↔3 seam. The proxy form drifts under HF seek.
-- **One master `onUpdate` for orbit + collapse, not two tweens**: independent tweens cannot keep orbit advancing while radius shrinks. The blueprint's name (orbit-collapse) is implementing exactly this composition.
-- **Orbit speed constant before and during collapse** — only radius shrinks. Slowing the orbit during collapse breaks the "snappy contraction" feel; speeding it up looks like the icons spin into a drain.
-- **Cursor `z-index: 999`**: orbiting icons can pass in front of the CTA at any angle and will occlude a non-elevated cursor.
-- **Ripple `z-index` between CTA and cursor** (~6): above the CTA card, below the cursor.
-- **CTA button visibly depresses on click**: the press-scale tween on `.cta-button` is the causal trigger. Without it, the collapse feels uncaused even though the cursor lands on target.
-- **Phase 5 simple yoyo assumes demo settles at scale 1**: if you change Phase 4's spring to leave residual scale, switch to the multiplicative form in sine-wave-loop.
-
-## Spring → Ease Selection
-
-Five spring-shaped beats, four `back.out` coefficients plus one sine yoyo. Full mapping table lives in [hyperframes-animation/SKILL.md](../SKILL.md); the intent-to-ease pairing here is:
-
-- Phase 1 icon flip → `back.out(ENTRY_BACK)` (calm arrive, low end of range)
-- Phase 2 cursor move → `back.out(CURSOR_BACK)` (calm settle)
-- Phase 3 collapse → `back.out(COLLAPSE_BACK)` via `gsap.parseEase` (snappy — must exceed `ENTRY_BACK`)
-- Phase 4 demo spring → `back.out(DEMO_BACK)` (snappy arrive with overshoot)
-- Phase 5 breath → `sine.inOut` yoyo with finite repeat
-
-## Golden Sample
-
-- [cta-orbit-collapse.html](../examples/cta-orbit-collapse.html) — runnable 6.5-second composition with concrete values for every named constant above. Demonstrates the three-wrapper icon anatomy and the `gsap.parseEase` pattern for a spring-shaped driver consumed inside a master `onUpdate`. Run it first, then change values — much faster than building from scratch.
diff --git a/skills/hyperframes-animation/blueprints/cursor-ui-demo.md b/skills/hyperframes-animation/blueprints/cursor-ui-demo.md
new file mode 100644
index 0000000000..7ca0332b2e
--- /dev/null
+++ b/skills/hyperframes-animation/blueprints/cursor-ui-demo.md
@@ -0,0 +1,57 @@
+# cursor-ui-demo — Cursor-Driven UI Demo
+
+**intent**: A visible custom cursor drives a real (reconstructed) app UI through clicks / hovers / drags so the screen changes state shot-to-shot, while the camera chases each interaction — the product surface is the subject and the cursor is the actor.
+
+**roles served**
+
+- Product*Intro (from `product-intro-cursor-ui-demo` / #14 Product_Intro_02, #15 Product_Intro_2, #17 Product_Intro_04): first look at the product surface — the cursor sweeps/hovers to \_introduce* the app and reveal what it is, landing on a hovered hero element or freshly-popped result. Light, exploratory; backdrop steps colors as it goes.
+- Key*Feature (from `key-feature-cursor-ui-demo` / #23 Key_Feature_2, #24 Key_Feature_03, #27 Key_Feature_06): one specific multi-step workflow demonstrated \_end-to-end* (edit / configure / select across 2–4 discrete beats), each beat a real edit the UI responds to live, landing locked on the primary action button or the produced result.
+- Key_Feature (from `workflow-approve-press`): an agency / confirmation workflow framed by a cockpit of 3D-tilted flanks — a step list ticks pending → active → complete (a snap state machine, CSS responding to `[data-state]`), and a flank button takes the PRESS as the payoff (its color flips to success, a checkmark stamps). The click is the climax, not a passing gesture.
+
+**duration**: 4.0–9.3s (union of Key_Feature 4.0–7.3s and Product_Intro 6.1–9.3s)
+
+**shot structure** (a `[product UI surface]` — fixed app window, dashboard/editor, parallax `[content card]` stack, or a `[container object/icon]` — centered over `[bg color/gradient]`, shown `[flat]` or `[3D-isometric]`; a custom `[brand-colored cursor with icon]` is the protagonist and the camera servos to whatever it touches; UI responds _live_ and in sync with each cursor action. Two role-tuned tempos fold in — Product_Intro **sweeps to introduce**, Key_Feature **performs a workflow**.)
+
+- **Scene 1 (0.0–~Xs) — surface establishes + first touch.** The `[product UI surface]` arrives centered over `[bg color/gradient]` — either it is simply present (fixed window / dashboard / editor), a 3D-parallax stack of `[content cards]`, or a `[container object/icon]` that FLIES IN with a 3D tumble and settles. The custom `[cursor]` enters. The cursor performs the FIRST action on `[cursor target 1]` and the UI responds live in the same beat. Camera holds or begins a slow push-in toward the acted-on region.
+  - _Variant — Product_Intro_: low-commitment first touch — cursor HOVERS/sweeps a control or SWEEP-HIGHLIGHTS a field to `[accent color]`, OR the `[container]` fans open. An optional label/title fades/morphs onto the surface. The point is to _show the surface exists_ and is touchable.
+  - _Variant — Key_Feature_: a concrete edit — cursor DRAGS a scrollbar / TYPES into a field / DRAGS a handle, and the UI responds materially (`[scroll]` / value climbs / region resizes). If the surface opened in `[3D-isometric]`, it may snap perspective-FLAT here to read the workflow.
+
+- **Scene 2 (~Xs–~Ys) — camera chases to the next interaction (the engine).** The camera MOVES to the next target — push-in + pan / whip-pan / pan-down to `[cursor target k]` — and the cursor performs action k as the UI updates live. Each beat is a discrete interaction connected by a fast camera move; the surface's inner content SWAPS per interaction.
+  - _Variant — Product_Intro_: navigation is exploratory — a slow camera pan + depth-of-field FOCUS-PULL across a parallax `[content card]` stack, or the `[container]` fanning into `[N option/content cards]` that SPRING to position. As content swaps, the supporting backdrop STEPS its color (`[bg step 1]` → step 2 → …). Typically one or two such moves.
+  - _Variant — Key_Feature_: repeat for `[2–4 beats total]`, each a distinct operation the UI answers — counter COUNTS UP, `[pill/swatch]` SELECTS, a modal SLIDES UP and TYPES — connected by whip-pans / progressive zoom. The workflow visibly advances toward a result.
+
+- **Scene 3 (~Ys–end) — payoff state, camera settles, HOLD.** The cursor lands on its final target and the screen reaches the payoff state; the camera comes to rest (static) and holds.
+  - _Variant — Product_Intro_: the cursor HOVERS the hero element — a `[content card]` SCALES UP on hover, a node gets an `[Available]`-style pill, or a `[result card]` POPS/springs in — the "here's the product" payoff. Settles static, holds.
+  - _Variant — Key_Feature_: locked close-up on the OUTCOME — cursor lands on the `[primary action button: Export / Save / Reimburse]` and a `[hover backdrop / highlight]` SPRING-pops in (the climax is the action button / produced result). Holds.
+
+**motion vocabulary**: cursor-driven click / hover / sweep-highlight / drag / type; per-interaction live UI response (scroll, value climb, region resize, content swap); camera push-in + pan / whip-pan / pan-down servoing to each target; coordinate zoom onto the acted region; press-and-ripple on a clicked control; button press-compress; screen-state swap shot-to-shot; card fan-out to corners (spring); 3D container fly-in & tumble-settle; perspective-flatten (3D→2D snap); paginated/stepped backdrop color advance; depth-of-field focus-pull across a parallax card stack; counter count-up; pill/swatch select; modal slide-up + typing; label/title morph between states; UI-keyword highlight glow; terminal hover-scale or result-card pop-in; spring hover-backdrop on the final action button.
+
+**rule mapping**
+
+- viewport follows the cursor / camera servos to whatever it touches (primary) → `camera-cursor-tracking`
+- cursor moves to a target, presses, emits a ripple (the click itself — primary interaction primitive) → `cursor-click-ripple`
+- screen-state swap shot-to-shot (surface inner content changes between beats) → `scale-swap-transition`
+- camera push-in + pan / whip-pan / pan-down to the next target → `viewport-change` (pan/zoom across the UI)
+- sequencing the chase into discrete interaction beats → `multi-phase-camera`
+- zoom onto the specific acted-on UI region → `coordinate-target-zoom`
+- cursor icon/state changing with context (e.g. pointer↔grab over a draggable handle) → `context-sensitive-cursor`
+- which content appears per beat / step-by-step UI state progression / per-interaction swaps → `dynamic-content-sequencing`
+- sweep-highlight a field, highlight a UI keyword to `[accent color]` → `asr-keyword-glow` (keyword glow on the touched element)
+- clicked button compresses on press, springs back on release → `press-release-spring`
+- cursor + button compress together on a heavier press → `physics-press-reaction`
+- panel/card morphs between two states (e.g. card → expanded card, surface state A → B) → `card-morph-anchor`
+- terminal hover-scale, `[result card]` pop-in, spring hover-backdrop on the final action button → `spring-pop-entrance`
+- card fan-out to corners / option cards springing to position → `split-tilt-cards` (fan/spread into tilted positions) + `spring-pop-entrance` (the spring settle)
+- 3D-parallax content-card stack as the surface; UI shown 3D-isometric → `3d-page-scroll` (UI as a tilted scrolling/parallax card)
+- node gets an `[Available]`-style pill / tracked badge appears on an element → `ai-tracking-box`
+- counter / value count-up as the UI responds → `counting-dynamic-scale`
+- a result bar / number FILLS as the workflow's outcome → `stat-bars-and-fills`
+- a live `[video]` screen-capture clip used as the surface → technique: video compositing
+- perspective-flatten (3D-isometric → flat 2D snap) and the 3D-isometric tilt itself → technique: CSS-3D (no dedicated rule; the tilt/flatten transform is a CSS-3D primitive)
+- camera settles static on the payoff and HOLDS → (settle phase of `spring-pop-entrance` on the payoff element; the static hold itself needs no rule)
+- 3D container/object fly-in & tumble-settle → `depth-scatter-assemble` (free-tumbling 3D object/container entrance that flies in and tumble-settles; `orbit-3d-entry` only orbits a flat element into place)
+- depth-of-field focus-pull across the parallax card stack → `depth-of-field-blur` (rack-focus / DoF blur transition between near and far cards; `3d-page-scroll` supplies the tilted parallax stack and `viewport-change` the pan)
+- paginated/stepped backdrop color advance synced to interactions (`[bg step 1]`→step 2→…) → `discrete-text-sequence` (discrete state stepping, here applied to a background-color state rather than text)
+- modal slide-up + in-modal typing as one combined beat → `card-morph-anchor` / `scale-swap-transition` (the panel slide-in) + `discrete-text-sequence` (the in-modal typed text)
+
+**camera modifier**: The defining motion is the camera CHASE — the viewport follows the cursor from target to target via `camera-cursor-tracking` (primary), realized as concrete push-in + pan / whip-pan / pan-down moves under `viewport-change`, sequenced into discrete interaction beats by `multi-phase-camera`, with each beat's destination targeted via `coordinate-target-zoom` (zoom to the acted-on region). Product_Intro biases toward a slow, exploratory pan + focus-pull that sweeps the surface; Key_Feature biases toward snappier whip-pans / progressive zoom that march through the workflow and lock static on the action button. This camera-servo-to-cursor is what separates the blueprint from hands-off camera scrolls (dataviz-scroll-reveal) and static device/window tours.
diff --git a/skills/hyperframes-animation/blueprints/dataviz-countup.md b/skills/hyperframes-animation/blueprints/dataviz-countup.md
new file mode 100644
index 0000000000..6b61b4d8c2
--- /dev/null
+++ b/skills/hyperframes-animation/blueprints/dataviz-countup.md
@@ -0,0 +1,46 @@
+# dataviz-countup — Data-Viz / Count-Up
+
+**intent**: Make numbers and charts the hero — a count-up ring/number, a trend chart, a tilted stat/card grid — and traverse the data instruments with a camera that pushes THROUGH them (or scrolls across them) to land on one hero metric, so the data itself carries the argument.
+
+**roles served**
+
+- Problem (from `problem-dataviz-pushthrough` / #9 Problem_1): quantifies the pain with real-looking instruments — a count-up ring → a trend chart → a stat grid — the camera pushing THROUGH each object into the next to dramatize a worsening / large-scale problem ("X% of people struggle with…").
+- Product_Intro (from `product-intro-dataviz-scroll-reveal` / #19 Product_Intro_06): a confident "look at the result / the data" open — hard-cut from a hook word into a perspective-tilted grid of data-viz cards, then a hands-off camera scroll lands one glowing hero metric while a kinetic tagline assembles word-by-word.
+- Hook (from `hook-counter-burst`): a cold-open hook on ONE dramatic statistic — the frame opens dark and empty, 3–5 thematic icons puncture in clustered at center, then the headline number EXPLODES upward in size as the icons fling outward to their marks (the count-up and the spread are one beat), closed by a slow camera lean-in. Kinetic from frame 1.
+
+**duration**: ~4–12s (Hook ~4s · Product_Intro ~6s · Problem ~11–12s)
+
+**shot structure**
+Data-viz field on `[bg color]` (dark or light, soft corner glows); `[gradient A→B]` brand stroke on charts/rings; clean sans-serif white/dark text; a continuous camera move runs underneath that traverses 2–3 data instruments and resolves on a hero metric. One instrument per beat; the camera carries the cut.
+
+- Scene 1 (0.0–Xs): the first data instrument establishes centered — a `[stat]` reads as the hero. A bold center number COUNTS UP `[start]`→`[end]` (font-size growing with the value), with `[stat label]` below; its paired graphic (a circular progress RING sweeping to `[pct]` with a `[gradient]` stroke, or a bar/fill) animates in on the SAME ease so number + graphic land as one beat. Supporting `[avatar/object]` elements pop in with spring overshoot into a scattered glowing orbit; a `[headline]` fades up. A very slow continuous camera zoom-in runs throughout.
+- Scene 2 (Xs–Ys): the camera traverses to the next instrument and that instrument animates — a `[gradient]` trend line / area chart DRAWS left→right on grid lines (Problem), or off-center cards SCROLL away as the layout glides (Product_Intro). The arriving `[stat-2]` number counts up / the chart resolves.
+- Scene 3 / Scene N (…–end): the camera lands the `[hero metric card]` (big number + label + delta + rising chart) in dead-center; a soft `[accent]` glow blooms behind it; the move reaches its peak then eases to a settled, slightly wider composition with the hero centered and supporting cards flanking it. HOLD on the final frame.
+
+- Variant — Problem (push-THROUGH, count-up → trend → grid): Scene 1 is a centered circular progress ring + count-up center number with scattered glowing `[avatar/object]` orbit. Scene 2 is a fast camera PUSH-IN straight through the center of the ring (ring, number, orbiting elements scale up and fly out of frame) into a rounded `[card]` holding `[stat-2 header]` over a `[gradient]` line chart with grid lines + translucent area fill that draws left→right; camera pushes through then settles. Scene 3: camera PANS to a second `[card]` whose number counts up, holding a grid of the `[avatar/object]` elements — a subset dim/blur while the rest receive `[accent]` circular checkmark badges that SPRING-POP; camera settles to the end. The traversal is z-depth push-through between instruments.
+- Variant — Product_Intro (scroll-to-hero + word-by-word tagline): a brief opener — Scene 0 (~0.0–0.85s): a full-frame `[hero-color orb]` with a bold white `[hook phrase]` over it; static shimmer, then HARD CUT. Scene 1 cuts to a slightly perspective-TILTED grid of `[data-viz / product cards]` (charts, heatmaps, stat cards with deltas + source footers) with `[tagline word 1]` centered; the grid begins SCROLLING (e.g. toward upper-left) with its tilt held. Scene 2: the grid keeps scrolling so the `[hero metric card]` glides into dead-center as off-center cards slide away; `[tagline word 1]` translates out and `[word 2]` rises in from a frame edge. Scene 3: hero card settles centered, `[accent]` glow blooms behind it, camera PUSHES IN slightly; `[word 2]` holds near it. Scene 4: `[word 2]` slides out, the final `[tagline word]` drops in from the opposite edge above the still-glowing hero, push-in peaks. Scene 5: overlay type clears, camera eases BACK OUT to a settled wider tilted composition — hero centered with glow, supporting cards flanking. The traversal is a hands-off camera SCROLL across a tilted card plane (no cursor, no clicks) + a one-word-at-a-time kinetic headline + push-in-then-out bookend.
+
+**motion vocabulary**
+count-up number with font-size growing on the value; circular progress-ring sweep; growth bar / progress fill; gradient trend-line + area-fill left→right draw; spring-overshoot pop-in of scattered glowing avatar/object elements; perspective-tilted card grid; directional grid scroll (cards glide in/out of center); hero-card centering; soft accent glow bloom behind the hero; slow continuous zoom-in; fast camera push-IN / push-THROUGH the center of an instrument; lateral/vertical camera pan between cards; gentle push-in that peaks then eases back out to a wider settle; selective dim/blur of a subset + spring-pop checkmark badges; full-frame hook orb → hard cut; kinetic tagline assembled word-by-word (each word drops/rises from a frame edge, prior word slides out).
+
+**rule mapping** (motion verb → `rules/<id>.md`)
+
+- count-up number whose font-size grows with the value → `counting-dynamic-scale` (primary text rule)
+- circular progress-ring sweep (the ring fill) → `stat-bars-and-fills` (ring form) — its draw mechanics delegate to → `svg-path-draw`
+- growth bars / progress fill paired beside a number → `stat-bars-and-fills` (primary data rule)
+- gradient trend-line / area-chart left→right draw → `svg-path-draw` (a path/line draws itself)
+- spring-overshoot pop-in of the avatar/object elements → `spring-pop-entrance` (elastic overshoot); the scattered-ring layout of glowing avatars/objects → `avatar-cloud-network`; if they keep drifting/orbiting → `orbit-3d-entry`
+- spring-pop `[accent]` checkmark badges → `spring-pop-entrance`
+- perspective-tilted card grid (tilt held static while content moves) → `3d-page-scroll`
+- directional scroll across the tilted card plane (cards glide in/out of center) → `3d-page-scroll` (scroll) + `viewport-change` (lateral/vertical pan form)
+- hero metric card centering (scroll/pan lands the target dead-center) → `coordinate-target-zoom` (target lands at viewport center) / `viewport-change`
+- hard-cut from the hook orb into the grid → `scale-swap-transition`
+- kinetic tagline assembled word-by-word → `kinetic-beat-slam` (one onset grid, distinct per-word entrances)
+- slow continuous zoom-in + push-THROUGH the instruments + lateral/vertical pan between cards + push-in-then-out bookend → `multi-phase-camera` (see camera modifier)
+- soft accent glow BLOOM behind the hero card → `ambient-glow-bloom` (un-triggered soft glow/bloom behind the static hero element — distinct from `press-release-spring`'s press-triggered glow and `asr-keyword-glow`'s word-timed envelope)
+- selective dim/blur of a SUBSET of grid items (focus-falloff on the non-highlighted cards) → `depth-of-field-blur` (selective per-element blur/dim to spotlight the highlighted cards — the same focus-falloff rule used in `constellation-hub`)
+
+**camera modifier**: The camera is the through-line that traverses the data instruments — one camera wrapper sequenced by `multi-phase-camera`, with each stop targeted via `coordinate-target-zoom` onto the focal instrument/card.
+
+- Problem — push-THROUGH: a slow continuous zoom-in (drift overlay) plus a fast PUSH-IN straight through the center of one instrument into the next (`multi-phase-camera`, Steady-push pattern), then a lateral/vertical PAN to the final card. Z-depth push-through is the signature (distinguishes it from a flat pan-tour).
+- Product_Intro — scroll-to-hero + bookend push: a hands-off directional SCROLL across the tilted card plane (`3d-page-scroll` scroll / `viewport-change` pan) that lands the hero card center, then a gentle push-in that PEAKS and eases BACK OUT to a wider settle (`multi-phase-camera`, Bookend-pull pattern). No cursor, no clicks — the camera does the navigating.
diff --git a/skills/hyperframes-animation/blueprints/demo-page-scroll-spotlight.md b/skills/hyperframes-animation/blueprints/demo-page-scroll-spotlight.md
deleted file mode 100644
index 0b336f021f..0000000000
--- a/skills/hyperframes-animation/blueprints/demo-page-scroll-spotlight.md
+++ /dev/null
@@ -1,209 +0,0 @@
----
-id: demo-page-scroll-spotlight
-role: demo
-duration_seconds: [5, 9]
-phases: 4
-visual_arc: page-entry → scroll-to-feature → keyword-highlight → pop-out-emphasis
-uses_rules: [3d-page-scroll, asr-keyword-glow]
-element_roles:
-  page_card: Full webpage recreation rendered as a tilted 3D card
-  scroll_content: Page content that scrolls within the clipped card
-  highlight_elements: Specific page elements that glow and scale when mentioned in voiceover
-  spotlight: Radial gradient overlay that dims non-highlighted areas
-when_to_use:
-  - Demonstrate a specific feature within its natural UI context
-  - Voiceover names features that should highlight in sync
-  - Show the product "in action" without a screen recording
-  - 3D perspective adds premium feel
-when_not_to_use:
-  - Product has no webpage or UI to recreate
-  - Feature is best shown via actual screen recording
-  - Scene only needs a single static product image
-triggers: [show the feature, product demo, highlight on page, webpage in 3D, scroll to feature]
----
-
-# Demo · Page Scroll Spotlight (HyperFrames)
-
-A "this is the product, this is the part that matters" arc: the tilted page coasts in like a held-up phone, voiceover names a couple of features and those words flare on the header, then the page rolls upward to reveal the section being demoed, and one element finally lifts off the surface to claim the climax. Premium-demo register — never cuts, never screen-records.
-
-One paused GSAP timeline drives all four phases. Phases 3 and 4 overlap on purpose; everything else has a small breath of buffer.
-
-## When to Use
-
-- Feature demo where voiceover walks through capabilities by name and the headline words should react
-- Product has a real DOM-rendered webpage component (a screenshot cannot be highlighted element-by-element)
-- The demo should feel premium (3D depth + spotlight) rather than flat (a captured recording)
-- Skip if no headline keywords need to glow (use plain `3d-page-scroll` instead) or if only one static product shot is needed
-
-## Orchestration
-
-Four phases, two rules plus two small inline patterns. The rules carry the bulk; the seams between them are the work.
-
-- **Phase 1 — page card entry**: inline. The [3d-page-scroll](../rules/3d-page-scroll.md) rule starts the card already on screen — it doesn't speak to how the card arrives. We add a single `scale: CARD_ENTRY_FROM_SCALE → 1.0` with `power2.out` on `.page-card`, plus staggered `opacity` fade-ins on navbar / title / CTA. Critical: the card's static tilt is **already baked in by `gsap.set()`** before the entry tween starts — see "Phase 1 Seam" below. A spring (`back.out`) here would look like a pop-up modal, not a phone held up to the camera, so `power2.out` is the only correct ease.
-- **Phase 2 — keyword glow on header**: use [asr-keyword-glow](../rules/asr-keyword-glow.md) in its **karaoke variation** (the rest of the headline stays dim, attacked words pop bright). Default subtle glow reads as ambient on top of the tilted page and gets lost; karaoke gives the words enough contrast to feel narrated. We diverge from the rule on one mechanical point: each word's envelope is driven by **two `tl.fromTo`/`tl.to` tweens on a CSS variable `--glow`** instead of the rule's single-driver `onUpdate` over all words. See "Phase 2 Seam" for why.
-- **Phase 3 — scroll to the feature section**: use [3d-page-scroll](../rules/3d-page-scroll.md) — the rule's main payload. One thing to override from the rule's default: ease is **`power2.inOut`**, not `power3.out`. Reason in this scene: the scroll is symmetrical — it has to start gently (we're already at a held-up frame, a hard onset reads as a jump cut) and decelerate symmetrically into where the pop will happen. The rule's `power3.out` is right when scroll is the climax; here the pop is the climax, so the scroll has to be a transit not a landing.
-- **Phase 4 — pop-out + spotlight**: inline, but re-uses the **`--glow` CSS variable mechanic from asr-keyword-glow**, repurposed for a non-text element. A pair of attack + decay tweens drive `.pop-target { --glow: 0 → 1 → POP_REST_LEVEL }`; CSS `calc()` on that same element derives `translateZ` and `scale` from `--glow`, and a parallel `opacity` tween on `.spotlight` dims the surrounding card. This is the climax — one tween-pair per visual effect would split the source of truth across three timeline calls; one `--glow` driving everything via `calc()` keeps it monotonic and audit-able. See "Phase 4 Seam".
-
-## Phase Timing
-
-All seconds, local to the scene.
-
-| Phase | Start ≥                                              | Internal duration                | Notes                                                          |
-| ----- | ---------------------------------------------------- | -------------------------------- | -------------------------------------------------------------- |
-| 1     | `0`                                                  | `CARD_ENTRY_DUR`                 | Card scale + element fades; staggered offsets within           |
-| 2     | First keyword's ASR `start` (≥ Phase 1 end + ~0.1s)  | per-word ASR windows             | First glow attack starts ~0.1s after title fade finishes       |
-| 3     | Last keyword attack end + ~0.2s                      | `SCROLL_DUR`                     | Lets the last karaoke peak read before the page starts moving  |
-| 4     | `SCROLL_AT + SCROLL_DUR * 0.6` (intentional overlap) | `POP_ATTACK_DUR + POP_DECAY_DUR` | Pop attacks **during** the scroll's tail — eye-leading handoff |
-
-Three of these gaps deserve a word each. Phase 1 → 2: ~0.1s after `TITLE_FADE_AT + TITLE_FADE_DUR` so the title is fully readable before the first word flares — start the glow on top of a still-rising opacity and the eye reads it as a fade-in artifact, not narrator emphasis. Phase 2 → 3: ~0.2s after the **last word's attack peak** (not its release end — karaoke rest is the held state and stays through the scroll, which is exactly the breadcrumb-trail effect we want). Phase 3 → 4: the pop **deliberately overlaps** the scroll's last ~40%. The rule normally puts pop-equivalent motions after a scroll lands; here we want the viewer's eye to be drawn to where the scroll _is going to land_ before it arrives, so the pop attacks while the scroll is still moving. This is the only intentional overlap in the scene.
-
-## Initial DOM Nesting
-
-The `transform-style: preserve-3d` chain is the only structural constraint, and it's already in the [3d-page-scroll](../rules/3d-page-scroll.md) rule. The one twist this blueprint adds: the pop target sits **inside `.scroll-content`**, not as a sibling — it has to translate with the page when Phase 3 scrolls, then independently translateZ when Phase 4 fires.
-
-```
-.perspective-wrap          ← perspective set here
-  .page-card               ← static tilt via gsap.set(); transform-style: preserve-3d; overflow: hidden
-    .scroll-content        ← Phase 3 tweens this element's y
-      .page-navbar         ← Phase 1 fade
-      .page-hero
-        .hero-title
-          .kw[data-glow-start data-glow-end] ← Phase 2 targets (one per glowable word)
-      .page-features
-      .page-carousel
-        .pop-target        ← Phase 4 target; transform-style: preserve-3d required HERE too
-    .spotlight             ← Phase 4 opacity fade; SIBLING to .scroll-content, NOT child
-```
-
-`.spotlight` must be a sibling of `.scroll-content` (not a child) — otherwise Phase 3's scroll translates the spotlight out of the card along with the content, and it dims the wrong region. Same `transform-style: preserve-3d` chain must reach `.pop-target` — `.page-card` sets it, but if any intermediate wrapper resets `transform-style`, `.pop-target`'s translateZ flattens to zero.
-
-## Phase 1 Seam: Tilt Set via gsap.set(), Not CSS
-
-The [3d-page-scroll](../rules/3d-page-scroll.md) rule's CSS sets tilt declaratively. That works only when no other tween touches `.page-card`'s transform. In **this** blueprint Phase 1 tweens `.page-card { scale: ... → 1.0 }`, and GSAP's scale tween overwrites the full transform matrix — declared CSS rotation goes with it, and the card lands flat. Fix: own the entire transform in GSAP:
-
-```js
-gsap.set(".page-card", {
-  rotateY: CARD_TILT_Y,
-  rotateX: CARD_TILT_X,
-  scale: CARD_ENTRY_FROM_SCALE,
-});
-tl.to(".page-card", { scale: 1.0, duration: CARD_ENTRY_DUR, ease: "power2.out" }, 0);
-```
-
-GSAP composes subsequent `scale` tweens against the rotation it owns, so the tilt survives. Removing the `gsap.set()` and putting the rotation back in CSS is the single most common Phase 1 failure mode.
-
-`CARD_TILT_Y` and `CARD_TILT_X` are **set once** here. Do not animate them in any later phase — the page is a camera setup, not a flip card. A tweened tilt makes the demo read as a UI animation rather than a held-up product.
-
-## Phase 2 Seam: Two-Tween Envelope per Word, Not Single Driver
-
-The [asr-keyword-glow](../rules/asr-keyword-glow.md) rule recommends a single driver tween with an `onUpdate` callback iterating every word. That pattern is correct when the per-word envelope is purely runtime-derived; we use a two-tween variant here:
-
-```js
-document.querySelectorAll(".kw").forEach((kw) => {
-  const start = +kw.dataset.glowStart;
-  const end = +kw.dataset.glowEnd;
-  const peak = start + (end - start) / 2;
-  const restAt = end + KEYWORD_SUSTAIN;
-  tl.fromTo(
-    kw,
-    { "--glow": 0 },
-    { "--glow": 1, duration: peak - start, ease: "power2.out" },
-    start,
-  );
-  tl.to(kw, { "--glow": KEYWORD_REST_LEVEL, duration: restAt - peak, ease: "power2.out" }, peak);
-});
-```
-
-Two reasons for the divergence. First, the glow timestamps live in DOM (`data-glow-start` / `data-glow-end`) rather than in a JS `TIMINGS` object — easier for the upstream script-to-DOM step to populate per-word and easier to audit by inspecting the page. Second, the climax pop in Phase 4 uses the **same** `--glow` CSS-variable mechanism, so keeping Phase 2 on `--glow` tweens means the whole scene shares one variable-driven mental model. The trade-off is more tweens on the timeline; with 4–8 keywords it's still well under the rule's "60+ words gets unwieldy" threshold.
-
-Flagged rule gap: `asr-keyword-glow` documents the single-driver `onUpdate` pattern only. The `--glow` CSS-variable variant used here is not covered by the rule; we treat it as the rule's "karaoke" payload re-expressed on a CSS variable.
-
-## Phase 3 Seam: SCROLL_DISTANCE Comes From the Page, Not From a Range
-
-`SCROLL_DISTANCE` is not a tunable — it's a **measured geometric fact** of the page layout. The target is the vertical center of `.page-carousel` (where `.pop-target` lives) landing at roughly 60–70% of the card's visible height (the position where the spotlight's gradient ellipse is centered — see Phase 4). Measure with a one-off `getBoundingClientRect()` at design time, bake the result as `const SCROLL_DISTANCE = …`, never recompute.
-
-Why bake: at the 3D tilt the card uses, sub-pixel scroll drift looks like a vibration, not a scroll — every `Math.random`-free deterministic system has to land on the same pixel every play.
-
-The rule's default ease for this property is `power3.out`. We override to **`power2.inOut`** here for the reason in Orchestration: the scroll isn't the climax. Keep the same ease across this single scroll — no second scroll in this blueprint, so the rule's "same ease across multi-phase scroll" caveat doesn't apply.
-
-## Phase 4 Seam: One Variable, Three Visual Effects
-
-`.pop-target` carries a CSS variable `--glow` (initial value 0). Three CSS effects all key off it:
-
-```css
-.pop-target {
-  --glow: 0;
-  transform-style: preserve-3d;
-  transform:
-    translateZ(calc(var(--glow) * var(--pop-translate-z)))
-    scale(calc(1 + var(--glow) * var(--pop-scale-boost)));
-  box-shadow:
-    0 0 calc(var(--glow) * 25px) {accentColorRgba},
-    0 calc(20px + var(--glow) * 40px) 60px rgba(0, 0, 0, 0.6);
-  border: 3px solid {accentColorBorderRgba};
-}
-```
-
-GSAP only tweens `--glow`; CSS does the derivation. Two tweens shape the envelope — attack to 1, decay to `POP_REST_LEVEL`:
-
-```js
-tl.fromTo(
-  ".pop-target",
-  { "--glow": 0 },
-  { "--glow": 1, duration: POP_ATTACK_DUR, ease: "power2.out" },
-  POP_AT,
-);
-tl.to(
-  ".pop-target",
-  { "--glow": POP_REST_LEVEL, duration: POP_DECAY_DUR, ease: "power2.out" },
-  POP_END - POP_DECAY_DUR,
-);
-tl.to(".spotlight", { opacity: 1, duration: SPOTLIGHT_FADE_DUR, ease: "power2.out" }, POP_AT);
-```
-
-The single-variable-many-effects pattern matters here because three separate tweens (one each for `translateZ`, `scale`, `box-shadow`) all racing the same window create round-off skew across CSS engines; one tween on a value the CSS reads through `calc()` is bit-exact across frames.
-
-`POP_REST_LEVEL` is intentionally higher than `KEYWORD_REST_LEVEL` (0.3–0.7 vs 0.1–0.3) — the pop target stays in focus for the rest of the scene, whereas keywords are a breadcrumb. Letting the pop decay all the way back to `--glow: 0` looks like the climax got walked back.
-
-The spotlight gradient is centered roughly at the same screen position the pop target lands at after Phase 3's scroll — typically `40% 60%` of the card. If you change `SCROLL_DISTANCE`, also re-center the `radial-gradient(... at X% Y% ...)` to match, otherwise the spotlight illuminates an empty region of the page.
-
-## Key Values to Choose (Not Already in the Rules)
-
-Only parameters unique to this blueprint; for the standard ranges of `MAX_BLUR`, `MAX_SCALE_BOOST`, `REST_LEVEL`, `SCROLL_DUR`, `tiltYDeg`, etc., go to the linked rules.
-
-- **CARD_ENTRY_FROM_SCALE**: 0.90–0.98. Lower reads as a punchier zoom-in; higher as a gentle settle. Must be < 1.0.
-- **CARD_ENTRY_DUR**: 0.6–1.2s. Shorter feels tech-y; longer feels cinematic.
-- **NAVBAR_FADE_AT / TITLE_FADE_AT / CTA_FADE_AT**: strict ordering `0 ≤ NAVBAR_FADE_AT < TITLE_FADE_AT < CTA_FADE_AT < SCROLL_AT`, with ~0.15–0.35s stagger between each. Reads as "page settles into focus" rather than "everything lands at once."
-- **KEYWORD_SUSTAIN**: 0.3–0.8s. Seconds after each word's ASR `end` before its decay completes. Tune by checking that the last-spoken word is still readably bright when the next word peaks.
-- **POP_AT**: must satisfy `POP_AT < SCROLL_AT + SCROLL_DUR` — intentional overlap with the scroll tail.
-- **POP_ATTACK_DUR**: 0.4–0.9s. The pop reads as deliberate at the long end, snappy at the short end.
-- **POP_END**: must satisfy `POP_END ≤ data-duration` and `POP_END > POP_AT + POP_ATTACK_DUR`. Leave ≥0.8s after `POP_END` for visual dwell on the lit pop target — same "climax dwell" reasoning the keyword-glow rule names.
-- **POP_DECAY_DUR**: 0.2–0.6s.
-- **POP_REST_LEVEL**: 0.3–0.7. Higher than `KEYWORD_REST_LEVEL` because the pop target holds the frame.
-- **POP_TRANSLATE_Z**: 40–120px peak Z translation. Above ~100 starts to feel like the element is detaching from the card.
-- **POP_SCALE_BOOST**: 0.05–0.25 additive scale.
-- **SPOTLIGHT_FADE_DUR**: 0.3–0.7s.
-
-## Critical Constraints (ordered by failure frequency)
-
-- **Tilt set via `gsap.set()`, not CSS** (see Phase 1 Seam). The scale tween in Phase 1 erases CSS-declared rotation — this is the single highest-frequency bug in this blueprint.
-- **`SCROLL_DISTANCE` is measured, not tuned**: derive from the actual page geometry at design time, bake as `const`. Don't compute per-frame from `getBoundingClientRect()`.
-- **Spotlight gradient center matches `.pop-target` post-scroll position**: change `SCROLL_DISTANCE` ⇒ re-center the gradient. Mismatch leaves the spotlight illuminating empty page.
-- **`.spotlight` is a sibling of `.scroll-content`, not a child**: otherwise Phase 3 scrolls the spotlight out of the card with the content.
-- **`transform-style: preserve-3d` continues onto `.pop-target`**: any intermediate wrapper that resets it flattens the Phase 4 translateZ to zero.
-- **Pop overlap is intentional, not a bug**: `POP_AT < SCROLL_AT + SCROLL_DUR`. If a future review pulls `POP_AT` past the scroll end "to be safe," the eye-leading handoff is lost.
-- **Page must be DOM, not a screenshot**: screenshots can't be element-highlighted (the rule already states this; restating because a tempting shortcut is to drop in a static image of the page).
-- **Shadow X-offset sign matches tilt sign** (the [3d-page-scroll](../rules/3d-page-scroll.md) rule's principle). Negative tilt-Y ⇒ positive shadow X-offset.
-
-## Spring → Ease Selection
-
-Four eases, four feels. Full mapping table lives in [hyperframes-animation/SKILL.md](../SKILL.md); the picks for this blueprint:
-
-- Phase 1 entry / fades → `power2.out` (settling)
-- Phase 2 glow attack & decay → `power2.out` (fast onset, slow settle)
-- Phase 3 scroll → `power2.inOut` (symmetrical transit, **not** `power3.out` — see Orchestration)
-- Phase 4 pop attack & decay → `power2.out`
-
-## Golden Sample
-
-- [demo-page-scroll-spotlight.html](../examples/demo-page-scroll-spotlight.html) — 4-phase, ~9-second scene with concrete values for every named constant above. Run this first, then change values — much faster than building from scratch.
diff --git a/skills/hyperframes-animation/blueprints/device-surface-showcase.md b/skills/hyperframes-animation/blueprints/device-surface-showcase.md
new file mode 100644
index 0000000000..b3c6d6fd6c
--- /dev/null
+++ b/skills/hyperframes-animation/blueprints/device-surface-showcase.md
@@ -0,0 +1,53 @@
+# device-surface-showcase — Device / Surface Showcase
+
+**intent**: A product surface — a device mockup or a floating browser/app window — is the hero held in frame while its screens cycle through a real flow, showcased by a camera move that ranges from a static hold to a continuous 3D push.
+
+**roles served**
+
+- Key*Feature (from key-feature-device-screen-tour, key-feature-floating-window-scroll, key-feature-3d-device-hand-demo): show a feature being \_experienced inside its real interface* — the surface houses the action and its screens advance through a flow, rather than enumerating tiles or chasing a cursor across a workflow. (Note: all three drafts are Key_Feature; this blueprint is role-narrow but mechanic-rich — variants differ by MECHANIC, not role.)
+- Key_Feature (from demo-page-scroll-spotlight): the floating-window push-scroll variant carried to a spotlight climax — a real webpage rendered as a tilted 3D card coasts in (power2, like a phone held up — no spring), header keywords flare on a karaoke glow as the VO names them, the page rolls to the demoed section, and one element LIFTS off the surface (translateZ + scale) under a radial spotlight that dims the rest.
+
+**duration**: 5–9.6s (page-scroll-spotlight 5–9s · floating-window 7.8s · 3d-hand 7.9s · device-tour 9.6s)
+
+**shot structure**
+One product surface — a `[device mockup]` or a `[floating browser/app window]` — is the persistent hero on a `[styled backdrop: gradient / radial / stylized 3D void]`; its `[screens/sections]` cycle through a real `[product flow]` while a showcase camera (static-hold, push-in→zoom-out, or one continuous push) presents it. Each screen state holds ~1.0–1.5s.
+
+- Scene 1 (0.0–~1.5s): The surface ESTABLISHES — it `[slides in from an edge / drifts in from a tilt / dissolves from a full-frame title card]` and settles, with a `[accent shape or backdrop]` resolving behind it; the first `[screen]` is visible. The showcase camera begins (see variants).
+- Scene 2 (~1.5–~Xs): The surface is OPERATED on its own face — a `[tap/select/scroll]` triggers the first screen advance: old content `[pushes out / scrolls up]`, new `[screen/section]` `[pulls up / pushes in from the side]`; concurrently a `[label / header word / side headline]` updates. The camera continues its move.
+- Scene 3+ (~Xs–end, repeat for `[2–4 screen beats]`): The surface ADVANCES through successive `[screens/sections]`, each a discrete swap or scroll synced to the surface's flow, while the secondary copy `[swaps out-up / in-up]` or stays marked to hold reading position. HOLDS on the final `[screen]` (or, for one variant, blooms out — see variant).
+
+- Variant — static-tour (key-feature-device-screen-tour, 9.6s): a `[device mockup]` slides in from off-screen and settles (ease-out); an `[accent-color shape]` scales up behind it (spring overshoot). Camera STAYS STATIC the entire clip — all motion is element/UI-level: a tap COMPRESSES a button (95%→100%), the UI scrolls/transitions to the next view (old pushes out, new pulls up), and a `[side headline]` SWAPS beside the device (old slides up + fades, new slides up + in) per screen. Holds on the final screen. No camera move, no cursor.
+- Variant — floating-window (key-feature-floating-window-scroll, 7.8s): OPENS on a full-frame `[title card]` (a small `[icon]` draws in at center, `[feature name]` below; holds ~2s), which DISSOLVES to a `[macOS-style browser/app window]` floating on a `[vivid gradient]` (traffic-lights + `[URL pill]` + tabs; left nav, central content, right `[sidebar]`). Camera PUSHES IN on a `[target region/sidebar]` (active item highlighted `[accent]`, a cursor drifts down the list), then ZOOMS BACK OUT to re-frame the whole window while the content SCROLLS through `[sections]`; the `[highlighted item]` stays marked. One push-in→zoom-out arc, gated by the title-card opener.
+- Variant — 3d-hand (key-feature-3d-device-hand-demo, 7.9s): FULLY 3D — a `[3D device]` drifts in a `[stylized 3D void / bloom + particles]`, opening tilted and self-rotating to face the lens nearly flat as ONE CONTINUOUS forward camera push begins (no cuts). A glossy `[3D hand]` rises from the bottom-foreground and GESTURE-DRIVES the surface: it swipes to scroll a `[picker/sidebar panel]` of `[option cards]` and taps `[option]` (while a `[header word]` letter-flips in place); the selection APPLIES — a `[new layout]` grows from center to fill the device face, nav flips, a `[marquee]` scrolls horizontally; the hand swipes again to scroll the page upward through `[sections]`, then drifts out. The camera never stops pushing; the bright device face keeps growing toward the lens until it BLOOMS into a `[light]` wash — a zoom-through "portal" exit that fills the frame.
+
+**motion vocabulary**
+surface establish (edge slide-in + settle / tilt drift-in + self-rotate-to-camera / title-card dissolve); accent shape spring behind surface; element-level screen-cycling (scroll-swap, push-in-from-side, scale-swap); button tap-compress; staggered side-headline reveal + copy swap (out-up / in-up); in-place header-word letter-flip; floating browser-window-on-gradient idle float; full-frame title-card opener (icon draw-in + label); camera push-IN on a region; camera zoom-OUT re-frame; content scroll-through; one continuous 3D camera-follow push (no cuts); 3D device drift + self-rotate; stylized-environment bloom/particles; 3D-hand entrance + swipe-scroll + tap (gesture-driven); picker-panel slide-in; template-apply grow-from-center; horizontal marquee scroll; gesture-driven page scroll; zoom-through bloom/portal exit; static-hold (no camera) as the floor of the camera range.
+
+**rule mapping** (per motion verb → backing rule, or flagged special)
+
+- screen-cycling — UI scrolls/sections scroll inside the surface (device-tour, floating-window scroll, 3d-hand page scroll) → `3d-page-scroll` (webpage/app as a tilted card whose content `translateY`-scrolls to sections; primary mechanic for the surface's screen flow)
+- floating-window establish + the surface presented as a tilted/floating UI card → `3d-page-scroll` (the tilt/perspective framing) + `css-3d-transforms` (perspective/`translateZ` depth)
+- screen / side-copy state swaps (discrete screen states; side headline content swapping per beat) → `discrete-text-sequence`
+- side-headline reveal (staggered fade + slide-up) → `discrete-text-sequence`
+- in-place header-word letter-flip (3d-hand) → `hacker-flip-3d`
+- screen swap as a coordinated shrink-out / pop-in between two screen states → `scale-swap-transition`
+- template-apply "new layout grows from center to fill the face" (3d-hand) → `center-outward-expansion` (clustered-at-center → expand to fill)
+- the surface morphing between states / title-card→window dissolve as the eye-anchor transition → `card-morph-anchor`
+- button tap-compress (95%→100% press feedback) → `press-release-spring` (or `physics-press-reaction` for a heavier press)
+- floating-window cursor click on the highlighted list item → `cursor-click-ripple`
+- accent-highlight pop on the active sidebar/list item → `asr-keyword-glow` (accent glow on the focused item)
+- drifting cursor down the sidebar list (floating-window) → `camera-cursor-tracking` (flat-cursor drift; pairs with the push-in)
+- floating browser-window idle float / 3D device drift-breathe → `sine-wave-loop`
+- 3D device drift + self-rotate-to-camera + perspective depth (3d-hand) → `css-3d-transforms` (CSS-3D) **or** `3d.md` technique (true Three.js/R3F device); see camera modifier
+- horizontal `[marquee]` scroll (3d-hand) → `viewport-change` (PAN mode on the marquee strip) — _thin fit; a literal CSS-marquee/translateX loop is closer to a `gsap-effects`/CSS recipe than a named motion rule_
+- 3D-hand entrance + swipe + tap as the interaction DRIVER (gesture input that scrolls/selects) → **flagged special — needs a heavier capability beyond the rule library (R3F/Three.js + WebGL), NOT a motion-shape rule.** The 3D hand model + WebGL bloom have a _technique_ backing (`3d.md` — R3F, `useGLTF` HandModel, `--gl=swiftshader` for the shader/bloom), but no motion-shape rule models a 3D hand as the swipe-to-scroll / tap-to-select gesture protocol. `context-sensitive-cursor` / `camera-cursor-tracking` only model a flat typing/pointer cursor, not a 3D gesturing hand.
+- zoom-through bloom / portal exit (3d-hand) → **flagged special — needs a heavier capability beyond the rule library (WebGL), NOT a named transition rule.** Capability is `techniques.md` → WebGL shader (via `3d.md` headless WebGL: `--gl=swiftshader --concurrency=1`), but no named transition rule covers a bloom/portal fly-through.
+
+**camera modifier**: The showcase camera spans a RANGE keyed by variant, all on a single content-wrapping virtual camera (`viewport-change`):
+
+- static-tour → NO camera move (`viewport-change` held at scale 1, or omitted); all motion is element-level. This is the floor of the range and what distinguishes the device-tour from the rest.
+- floating-window → a two-phase push-in → zoom-out arc → `multi-phase-camera` (e.g. dramatic-reveal 1.1→1.0→0.95 feel): push IN on the `[sidebar/region]` via `coordinate-target-zoom` (off-center target = scale + counter-translate), then `multi-phase-camera` zooms back OUT to re-frame the whole window while content scrolls.
+- 3d-hand → ONE continuous forward push (no cuts) → `multi-phase-camera` in steady-push mode (1.0→1.03→1.06… plus its sine micro-drift) layered over `css-3d-transforms`/`3d.md` so the device self-rotates-to-lens during the push; the push runs unbroken into the bloom/portal exit (exit itself is the WebGL-shader flagged special above).
+  Across all three: `viewport-change` is the base virtual-camera primitive; `multi-phase-camera` sequences the push/zoom phases (and supplies the always-on micro-drift that keeps even the "static" tour from feeling dead); `coordinate-target-zoom` aims the push at off-center screen detail.
+
+**Overflow (pan/scroll surfaces — required for a clean `inspect`):** a panned or scrolled surface deliberately moves content PAST the edges of its framing card. Clip it at the card (`overflow: hidden` on the card/window) AND mark the moving inner layer (the `.world` / surface wrapper holding the screenshot + any markers/labels) with `data-layout-allow-overflow` — otherwise `inspect` reports `text_box_overflow` / `container_overflow` ERRORS for the parts that scroll off (e.g. a marker label panned off the left edge). The card clips them visually; the attribute tells `inspect` it's intentional, not a layout bug.
diff --git a/skills/hyperframes-animation/blueprints/grid-card-assemble.md b/skills/hyperframes-animation/blueprints/grid-card-assemble.md
new file mode 100644
index 0000000000..9d490efe21
--- /dev/null
+++ b/skills/hyperframes-animation/blueprints/grid-card-assemble.md
@@ -0,0 +1,66 @@
+# grid-card-assemble — Grid / Card Assemble
+
+**intent**: N items (tiles / cards / logos / list-lines) self-assemble in a staggered cascade into a grid or vertical list and hold — a "look how much / who / what it does" beat that enumerates breadth at once; an optional camera zoom-OUT pulls back to reveal the assembled array sitting inside a vaster whole.
+
+**roles served**
+
+- Key_Feature (from key-feature-card-grid-assemble): a grid of labeled feature tiles/pills (icon + label) cascades one-by-one into a 2-col-brick / 3×3 grid, then holds near-static with a slow push-in — enumerate many capabilities, no live UI, no cursor.
+- Key_Feature (from key-feature-glass-card-camera-reveal): open TIGHT on 2–3 glowing icons; a camera zoom-OUT unfolds a row of glassmorphism cards that grow from behind the icons (icons shrink to card headers), center card scales forward, the group floats, then sweeps out — a "pillars revealed at once" reveal variant of the same assemble shape.
+- Benefits (from benefits-vertical-list): short value phrases populate a single vertical list ~1 item/sec, co-resident and accumulating; each line enters via a spring marker-pop + check-draw + pill mask-wipe, OR the whole stack snaps up one slot per beat (slot-machine) so the newest lands in the bright focal slot.
+- Social_Proof (from social-proof-logo-grid-zoom-out): a wall of partner/app logos builds into a center grid (whole-enter / randomized pop-in / column slide-up), an optional headline + accent-gradient proof-number fills in above, then a continuous camera zoom-OUT shrinks the array to reveal a vast ecosystem; optional fixed HUD/viewfinder brackets; optional grid slide-up fly-out exit.
+
+**duration**: 3.0–10.5s (Social_Proof 3.0–6s · Key_Feature grid 5.8–7.3s · Key_Feature glass-card 6.5s · Benefits list 6.5–10.5s, scaling ~1 item/sec with count)
+
+**shot structure** (consolidated template — concrete motion verbs, [slots])
+
+- **Scene 1 (0.0–~1.0s) — open + first arrivals.** On a `[gradient / radial / dark background]` (optional `[dot-grid / drifting-watermark]` texture), an empty `[grid or list region]` is established and items begin to ASSEMBLE in a quick staggered cascade (~0.04–0.08s gap; list pacing ~1 item/sec). Each `[item: feature tile / pill / logo tile / benefit line]` fades + slides/scales a short distance directly into its slot (low drama — no scatter, no big bounce; spring overshoot reserved for accent markers). Camera static. An opening `[headline / hook]` may fill in line-by-line above the array, with any `[proof number]` counting up in an `[accent gradient]`.
+- **Scene 2 (~1.0s–~Xs) — array resolves + holds.** Remaining items finish arriving; layout resolves into the final `[2-col-brick / 3×3 grid / dense mosaic / stacked list]`. The completed array HOLDS, alive but resting: a gentle continuous parallax/sine FLOAT on the tiles and/or a slow camera push-in (faint scale-up). Optional `[accent-color]` glow TRAVELS across/behind the tiles.
+- **Scene 3 (~Xs–end) — settle / reveal / exit.** Everything settles and holds to the end, OR the optional camera modifier runs (see below), OR a `[closing line / CTA]` book-ends the array.
+
+Variants (where roles diverge from the template):
+
+- **Variant — Key_Feature grid**: items are labeled `[icon + feature-label]` tiles/pills assembling into a 2-col-brick / 3×3 grid; near-static hold with slow push-in + optional traveling-glow sweep; headline book-ends (`[hook]` → `[CTA]`). No camera reveal.
+- **Variant — Key_Feature glass-card-reveal**: the assemble is CAMERA-DRIVEN, not element-stagger. Open tight on `[2–3 glowing icons]`; camera zoom-OUT grows `[N]` glass cards out from behind the icons (icons shrink ~50% to become card headers), `[center card]` scales ~105% and moves forward to overlap the sides (quick spring); cards hold side-by-side with continuous parallax float; exit = fast motion-blur SWEEP slides the cards off-frame.
+- **Variant — Benefits vertical-list**: a single vertical `[benefit-line]` stack, ~1 item/sec, two sub-modes — (a) BUILD: each line stays fully lit; entry = `[marker]` spring-pop + `[check/icon]` draw-in + `[pill]` mask-wipe of the text; (b) SNAP: the whole stack steps up one slot per beat (~0.1s eased) so the newest line lands in the bright focal slot and lines leaving it dim by position. Static camera; optional perpetual `[decorative orbit/disc]` on the opposite side. No camera reveal.
+- **Variant — Social_Proof logo-wall-zoom-out**: intro beat (`[trusted-by headline]` card OR a `[product screenshot]`) crossfades/cuts to a center logo grid that builds (whole-enter / randomized pop-in / column slide-up); a continuous camera zoom-OUT then shrinks the whole grid toward center to reveal a vast ecosystem and holds; optional fixed HUD/viewfinder brackets; optional exit = whole grid SLIDES UP and flies out through the top.
+
+**motion vocabulary**: item stagger-assemble (fade + short slide/scale into slot) · brick/grid/list layout resolve · randomized pop-in · column slide-up · vertical-list step (slot-machine snap-and-hold) · spring-overshoot marker pop · check/icon draw-in · pill/label mask-wipe reveal · dim-by-position de-emphasis · line-by-line headline fill · accent-gradient number count-up · near-static hold · gentle parallax/sine float on hold · slow camera push-in · camera zoom-OUT reveal (continuous OR phased pull-back) · cards-grow-from-behind-icons · icon-shrink-to-header · center-card scale-up + forward overlap (spring) · traveling-glow sweep · fixed HUD/viewfinder brackets · motion-blur slide-out sweep (exit) · grid slide-up fly-out (exit) · book-end headline fade · perpetual decorative orbit/loop.
+
+**rule mapping** (motion verb → `rule-id`)
+
+- item stagger-assemble into slot → `center-outward-expansion` (per-item stagger + short-path slide variant; for a wall too dense for a true center burst, use it in its "starting partially-spread"/direct-into-slot form — see merge tension)
+- brick/grid/list layout resolve → `center-outward-expansion` (target positions = final layout slots)
+- randomized pop-in stagger → `gsap-effects` (stagger recipe; randomized `from`/order)
+- column slide-up into grid → `gsap-effects` (per-column staggered slide-up)
+- vertical-list step / slot-machine snap-and-hold → `vertical-spring-ticker` (STEPS = number of line advances)
+- spring-overshoot marker pop → `spring-pop-entrance` (back.out spring) — also `gsap-effects` for the staggered pop chain
+- check / icon draw-in inside marker → `svg-path-draw`
+- live line-art icon in a tile (internal parts) → `svg-icon-enrichment`
+- pill / label mask-wipe text reveal → `techniques.md` (clip-path reveal)
+- dim-by-position de-emphasis → `gsap-effects` (per-line opacity by slot position; no dedicated rule)
+- line-by-line headline fill → `discrete-text-sequence`
+- accent-gradient proof number count-up → `counting-dynamic-scale`
+- gentle parallax / sine float on hold → `sine-wave-loop` (apply the concurrent-elements amplitude `/√N` rule for a held grid)
+- slow camera push-in → `multi-phase-camera` (steady-push phase pattern)
+- center-card scale-up + forward overlap → `spring-pop-entrance` (the quick spring) + `techniques.md` CSS-3D (z-depth overlap)
+- cards-grow-from-behind-icons / icon-shrink-to-header → driven by the camera reveal (`multi-phase-camera`) — the grow/shrink are scale tweens chorded to the pull-back phase; no separate rule
+- fixed HUD / viewfinder brackets → `ai-tracking-box` (static-bracket variant — overlay frame, not tracking)
+- book-end headline fade → `discrete-text-sequence` (or `gsap-effects` fade)
+- perpetual decorative orbit / disc / loop → `sine-wave-loop` (or `orbit-3d-entry` if it's an orbiting badge ring)
+- traveling-glow sweep across/behind tiles → `ambient-glow-bloom` (one-pass traveling glow sweep across the tiles)
+- motion-blur slide-out sweep (glass-card exit) → `motion-blur-streak` (directional velocity blur on the fast sweep that carries the cards off-frame)
+- grid slide-up fly-out exit → `gsap-effects` (plain staggered translate-off-frame; no dedicated rule needed — a basic exit tween, not a missing capability)
+
+**camera modifier — zoom-OUT reveal** (optional; the role-defining move for the glass-card and logo-wall variants): a camera wrapper around the whole array scales DOWN over the hold, revealing the assembled grid/cards sitting inside a larger environment (ecosystem scale, or a row of cards unfolding from tight icons).
+
+- Continuous single-pass zoom-out (Social_Proof ecosystem pull-back) → `viewport-change` (one wrapper, `cam.scale` ↓ via onUpdate — single source of truth)
+- Phased pull-back → focus → settle, with built-in drift (Key_Feature tight-icons → cards-unfold) → `multi-phase-camera` (use the "Dramatic reveal: push → neutral → pull" / pull-back phase pattern; grow/shrink of cards chords to the pull-back phase)
+
+---
+
+```
+BLUEPRINT: grid-card-assemble — serves Key_Feature, Benefits, Social_Proof (folded 4 drafts)
+RULE GAPS: none — traveling-glow sweep → ambient-glow-bloom; motion-blur slide-out sweep (exit) → motion-blur-streak; grid slide-up fly-out (exit) → gsap-effects (plain translate)
+```
+
+Merge tension: `center-outward-expansion` (the natural backing for stagger-assemble) caps cleanly at 3–8 items and explicitly warns 8+ causes mid-flight overlap chaos — but a Social_Proof logo wall is deliberately dense (12+ tiles), so for that variant the items must NOT burst from a shared center; they slide a short distance directly into their own slot (the rule's "starting partially-spread"/short-path form, or a `gsap-effects` per-item stagger), which the consolidated Scene-1 verb already specifies as "short distance directly into its slot."
diff --git a/skills/hyperframes-animation/blueprints/hook-counter-burst.md b/skills/hyperframes-animation/blueprints/hook-counter-burst.md
deleted file mode 100644
index 0b4e327843..0000000000
--- a/skills/hyperframes-animation/blueprints/hook-counter-burst.md
+++ /dev/null
@@ -1,161 +0,0 @@
----
-id: hook-counter-burst
-role: opening-hook
-duration_seconds: [3, 5]
-phases: 4
-visual_arc: empty → icons-cluster → count-and-expand → camera-push
-uses_rules:
-  [counting-dynamic-scale, center-outward-expansion, multi-phase-camera, svg-icon-enrichment]
-element_roles:
-  counter: Central number counts 0 → target while growing in font size
-  icons: 3-5 enriched SVG icons expand outward from center
-  camera: Multi-phase zoom (pull-back → focus → push) wraps the scene
-  background: Video or animated gradient with dark overlay for contrast
-when_to_use:
-  - Opening hook needs a single dramatic statistic
-  - Statistic reinforced by 3-5 thematic icons
-  - Scene must feel kinetic from frame 1
-when_not_to_use:
-  - Hook is text-driven, no numeric statistic
-  - Product UI / demo footage is the focal point
-  - Multiple numbers shown simultaneously
-triggers: [opening hook, statistic, counting number, dramatic number, attention grabber]
----
-
-# Hook · Counter Burst (HyperFrames)
-
-A "scarcity → impact" emotional arc: the frame opens dark and empty, thematic icons puncture in clustered tightly at center as if held back, then the headline number explodes upward in size while the icons fling outward to meet their final marks — the count and the spread are the same beat — and a slow camera push closes the scene by leaning in for emphasis.
-
-One paused GSAP timeline, four phases, deliberately overlapping so no frame is static.
-
-## When to Use
-
-- Opening scene needs a single dramatic statistic as the hook
-- The statistic is reinforced by 3-5 thematic icons (e.g. clock, scissors, video, play)
-- Scene must feel kinetic from frame 1 — no static moments
-- Total duration short enough that the hook does not start to read as the main scene
-
-## Orchestration
-
-Four phases stack on the same timeline, with the most important coupling being Phase 3 — counter and icons share one tween envelope.
-
-- **Phase 1 — cold open**: `inline`. Just background + dark overlay; nothing tweens. The icons exist in DOM but are pre-set to `scale: 0, opacity: 0` and pre-positioned at the cluster offset via `gsap.set` so they pop from the right place when their entry tween fires. The interesting thing about this phase: internal SVG animations from [svg-icon-enrichment](../rules/svg-icon-enrichment.md) — the rotating clock hand, pulsing record dot, flowing dashes — are already running invisibly underneath. See "Phase 1 seam" below.
-- **Phase 2 — icon entries**: use [svg-icon-enrichment](../rules/svg-icon-enrichment.md) in its **per-icon staggered entry** form (each icon springs `scale: 0 → 1, opacity: 0 → 1` with a small rotation, ease `back.out(BOUNCE_FACTOR)`). Each icon's entry targets the inner `.icon-entry` wrapper, NOT the outer `.icon-pos` — because Phase 3 needs `.icon-pos`'s `x` / `y` channel free. See DOM tree.
-- **Phase 3 — count + expansion (core glue)**: this is the blueprint's reason for existing. [counting-dynamic-scale](../rules/counting-dynamic-scale.md) drives the number; [center-outward-expansion](../rules/center-outward-expansion.md) drives the icons; both tweens are placed at the **same `COUNT_AT`, with identical `COUNT_DUR` and `COUNT_EASE`**. Because GSAP advances them in lockstep, no shared driver object is needed — the chord falls out for free. See "Phase 3 seam" below.
-- **Phase 4 — multi-phase camera**: use [multi-phase-camera](../rules/multi-phase-camera.md) in its **focus-in pattern** (start < 1 → settle to 1 → push > 1). The pull-back is implicit: the scene begins at `CAMERA_SCALE_START < 1` set via `gsap.set` on `.camera`, so the icon cluster reads as "small and far" during Phase 1. We omit the rule's continuous drift overlay — at 3-5 seconds the drift is imperceptible and competes with the deliberate three-step scale rhythm. See "Phase 4 seam".
-
-## Phase Timing
-
-All boundaries are in seconds.
-
-| Phase | Start ≥                                       | Internal duration                    | Notes                                                                        |
-| ----- | --------------------------------------------- | ------------------------------------ | ---------------------------------------------------------------------------- |
-| 1     | `0`                                           | until `ICON_ENTRY_AT_1`              | No tween fires; SVG enrichment loops are already turning underneath          |
-| 2     | `ICON_ENTRY_AT_1` (≈ 0.1–0.25s)               | `(N - 1) × ICON_STAGGER + ENTRY_DUR` | Staggered; the last icon's entry must overlap, not precede, `COUNT_AT`       |
-| 3     | `COUNT_AT`                                    | `COUNT_DUR`                          | Counter proxy + icon expansion tweens share start, duration, AND ease        |
-| 4a    | `CAMERA_FOCUS_AT` (≈ 0.3–0.6s)                | `CAMERA_FOCUS_DUR`                   | Fires during Phase 2 — focus settle and icon entries can comfortably overlap |
-| 4b    | `CAMERA_PUSH_AT ≥ COUNT_AT+COUNT_DUR + ~0.2s` | `CAMERA_PUSH_DUR`                    | Push only AFTER the count lands — let the eye read the final number first    |
-
-There is no spring-tail breath between Phase 2 and Phase 3 — we _want_ the overlap so the eye never sees a still frame. The constraint is the opposite of `brand-reveal-assemble-zoom`'s "let spring settle": here the last icon's `back.out` rebound should still be visible as the count starts, which adds energy. The ~0.2s gap between Phase 3 end and Phase 4b matters: without it, the camera push competes with the counter's `power2.out` decel and the eye can't choose which to watch. Phase 4a (focus settle) deliberately starts inside Phase 2 so the camera is already moving when the icons land — same "no static frame" principle.
-
-## Initial DOM Nesting
-
-The two-wrapper-per-icon split is non-obvious and load-bearing — Phase 2's entry tween and Phase 3's expansion tween must not fight for the same transform channel.
-
-```
-.stage
-  .bg                    ← background video / gradient
-  .camera                ← Phase 4 scale (multi-phase camera)
-    .icons-stage
-      .icon-pos          ← Phase 3 expansion: gsap.set x/y to cluster, then tween to 0,0
-        .icon-entry      ← Phase 2 entry: scale, opacity, rotation
-          svg.icon-svg   ← svg-icon-enrichment internal motion targets children by id
-    .counter-stage
-      .counter-3d
-        .counter-number  ← counting-dynamic-scale onUpdate writes text + font-size
-        .counter-suffix
-  .vignette              ← OUTSIDE .camera so it doesn't scale with the push
-```
-
-Each `.icon-pos`'s final `left` / `top` are written **once** in CSS (or by a one-shot `gsap.set` before timeline registration) as the icon's target layout position. GSAP only ever touches `x` / `y` on `.icon-pos` — never `left` / `top`. The cluster offset at t=0 is pre-applied by `gsap.set` as a negative `x` / `y` (toward center), then the Phase 3 tween animates back to `x: 0, y: 0`.
-
-`.vignette` sits OUTSIDE `.camera` because the camera scale `> 1` in Phase 4b would otherwise crop the vignette and reveal the unvignetted corners.
-
-## Phase 1 Seam: Live Icons Before They Appear
-
-The headline trick of this scene: the rotating clock hand, the pulsing rec dot, the flowing dashes — every internal SVG animation defined by [svg-icon-enrichment](../rules/svg-icon-enrichment.md) — is placed at timeline position `0`, not gated by the icon's entry delay. The icons are invisible (`scale: 0, opacity: 0` on `.icon-entry`) but the SVG children underneath are already turning. When Phase 2 makes an icon visible, it doesn't _start_ moving — it has _been_ moving. The viewer perceives "alive thing arrives," not "static thing animates on landing."
-
-```js
-// At timeline position 0, NOT gated by entry delay
-tl.to(minState, { deg: 360 * MIN_REVOLUTIONS, duration: TOTAL_DURATION, ease: "none", onUpdate: ... }, 0);
-tl.to(pulseState, { p: Math.PI * 2 * PULSE_CYCLES, duration: TOTAL_DURATION, ease: "none", onUpdate: ... }, 0);
-```
-
-The rule documents these patterns but doesn't explicitly call out the "run while invisible during a cold open" use case — it's the blueprint's job to combine.
-
-## Phase 3 Seam: One Chord, Two Tweens
-
-The counter and the expansion are mathematically independent — counter writes text + font-size to one DOM node, expansion writes `x` / `y` to N icon nodes. But they must read as **one event**. The mechanism: place both tweens at the same `COUNT_AT` with identical `COUNT_DUR` and `COUNT_EASE`, and let GSAP's per-frame eased progress synchronize them. No shared `state` object, no master `onUpdate` dispatching to both — they advance in lockstep because they were configured identically.
-
-The cluster offset is the interesting derivation. Each icon's final layout position is `(targetX, targetY)`. To start it at fraction `(1 - START_OFFSET)` of the way from target back toward center, we pre-set its `x` / `y` (relative to its CSS-fixed target position) to:
-
-```js
-gsap.set(`${sel}.icon-pos`, {
-  x: (CENTER_X - targetX) * (1 - START_OFFSET),
-  y: (CENTER_Y - targetY) * (1 - START_OFFSET),
-});
-tl.to(`${sel}.icon-pos`, { x: 0, y: 0, duration: COUNT_DUR, ease: COUNT_EASE }, COUNT_AT);
-```
-
-The `(1 - START_OFFSET)` factor (not `START_OFFSET` itself) is the part agents most often invert. `START_OFFSET = 0.4` means "icons begin 40% of the way out from center"; the pre-set offset toward center is therefore the remaining 60% of the path. Get the sign wrong and the icons start _past_ their targets and move inward.
-
-**Why a separate `.to` per icon instead of one master proxy?** GSAP handles many simultaneous identically-eased tweens cheaply (compositor batches transform writes), and per-icon tweens are inspectable in DevTools. For 3-5 icons readability wins; for 50+ a single onUpdate with a manual lerp loop would be preferable.
-
-The counter side uses the **proxy-object form** of [counting-dynamic-scale](../rules/counting-dynamic-scale.md) (`{ p: 0 } → { p: 1 }`, onUpdate writes text + font-size) rather than the rule's `state.value` form, only because we want `p` for compositional reasons — it could equivalently be driven by the rule's default state object.
-
-## Phase 4 Seam: Why No Drift Overlay
-
-[multi-phase-camera](../rules/multi-phase-camera.md)'s default includes a continuous sine drift on top of the phase scales. We deliberately omit it here. Two reasons specific to this scene:
-
-1. **Three to five second comp**: drift only reads over time. Below ~6 seconds the eye doesn't register the slow sine — but the rotating SVG hands and pulsing dots already give continuous micro-motion underneath, so the camera doesn't need to.
-2. **Three-step scale rhythm is the camera's job here** — `START → FOCUS → PUSH` is a discrete cinematic beat. A drift overlay blurs the moment of "push" because the translate is already moving when the scale starts.
-
-`CAMERA_SCALE_START < 1` is mandatory: it provides the pull-back from which the focus-settle reads. This in turn forces `.scene` to use `overflow: hidden` (per the rule's constraint) so the inner edges revealed by `scale < 1` don't leak.
-
-`CAMERA_PUSH_AT > COUNT_AT + COUNT_DUR + ~0.2s` is the second non-negotiable gate. If push starts during the count, the user sees scale change while reading digits — the scale wins and the number gets misread.
-
-## Key Values to Choose (Not Already in the Rules)
-
-Only parameters this blueprint introduces. Standard rule parameters (`BOUNCE_FACTOR`, `ENTRY_DUR`, `PULSE_CYCLES`, drift amps, etc.) live in the linked rules.
-
-- **ICON_COUNT** — 3-5. Below 3 the cluster reads as accidental; above 5 the centre overlaps even at `START_OFFSET = 0.5` and looks like collision. Hard cap on this blueprint specifically.
-- **START_OFFSET** — fraction of the path from center to target at which icons begin. `0.3-0.5`. Sub-0.3 reads as debris explosion; above 0.5 the outward motion vanishes. Used twice — in the `gsap.set` pre-position and conceptually in the chord coupling.
-- **COUNT_AT** — when the count chord fires. Must satisfy `COUNT_AT > ICON_ENTRY_AT_1 + ICON_STAGGER` (so at least one icon is visible at chord start) and `COUNT_AT + COUNT_DUR < CAMERA_PUSH_AT - ~0.2s`. Practical range 0.4-0.7s for a 3-5s comp.
-- **COUNT_DUR / COUNT_EASE** — pulled from [counting-dynamic-scale](../rules/counting-dynamic-scale.md)'s range, but with one extra constraint specific to this blueprint: the value used for the counter MUST equal the value used for every icon expansion `.to`. The rule's range still applies; the equality is unique to this scene.
-- **CAMERA_SCALE_START** — must be `< 1` here (no other pattern works with the focus-in framing). `0.88-0.96`. Forces `overflow: hidden` on `.scene`.
-
-## Critical Constraints (ordered by failure frequency)
-
-The most common failures, top down:
-
-- **Identical `duration` + `ease` on every Phase 3 tween (counter proxy AND each icon's `x` / `y` to `0`)**. Mismatched ease is the #1 way this scene falls apart — counter and icons drift visually out of phase even though they share a start time.
-- **`(1 - START_OFFSET)` sign in the pre-position `gsap.set`**, NOT `START_OFFSET`. The fraction is "remaining distance to cover," not "starting fraction."
-- **`CAMERA_PUSH_AT ≥ COUNT_AT + COUNT_DUR + ~0.2s`**. Camera push during the count makes the number unreadable.
-- **Two-wrapper-per-icon split**. `.icon-pos` for Phase 3 x/y; `.icon-entry` for Phase 2 scale/opacity/rotation. Collapsing them into one element makes Phase 3 overwrite Phase 2's final state and icons re-appear at scale 1 abruptly.
-- **SVG enrichment tweens placed at timeline `0`**, not gated by entry delay. Otherwise icons look static for one frame on landing before motion kicks in.
-- **`font-variant-numeric: tabular-nums` on `.counter-number`** — required by [counting-dynamic-scale](../rules/counting-dynamic-scale.md) but doubly important here because the count overlaps with motion: any horizontal jitter from digit-width changes is amplified by the surrounding kinetic context.
-- **`overflow: hidden` on `.scene`** — forced by `CAMERA_SCALE_START < 1`.
-- **`.vignette` outside `.camera`** — the Phase 4b push would otherwise crop it.
-- **`ICON_COUNT ≤ 5`** — beyond this even high `START_OFFSET` reads as collision at the cluster moment.
-
-## Spring → Ease Selection
-
-Three distinct feels, three eases. Full mapping table in [hyperframes-animation/SKILL.md](../SKILL.md).
-
-- Phase 2 stiff icon entry → `back.out(BOUNCE_FACTOR)`
-- Phase 3 counter + expansion chord → `power2.out` (default) or `power3.out` for stronger settle. **Avoid** `back.out` here — the rule already says it for the counter, but it applies to the icons too because they share the tween.
-- Phase 4a / 4b camera transitions → `power2.out`; the push can step up to `power3.out` if you want the close to feel "deeper" than the settle.
-
-## Golden Sample
-
-- [hook-counter-burst.html](../examples/hook-counter-burst.html) — runnable 4-icon, ~4s composition with concrete values for every named constant. Start here, then change one parameter at a time.
diff --git a/skills/hyperframes-animation/blueprints/kinetic-type-beats.md b/skills/hyperframes-animation/blueprints/kinetic-type-beats.md
new file mode 100644
index 0000000000..87404d9e75
--- /dev/null
+++ b/skills/hyperframes-animation/blueprints/kinetic-type-beats.md
@@ -0,0 +1,78 @@
+# kinetic-type-beats — Kinetic-Type Beats
+
+**intent**: A flat, centered, bold-type shot where the motion IS the word/phrase changing — the line either swaps tokens in place by hard cut, or builds a statement across full-screen beats (each with its own move) that lands a spring-pop payoff.
+
+**roles served**
+
+- Hook (from `hook-kinetic-type-flash`): when one stationary line lands a punchy rhetorical question or "you keep doing X" callout and the in-place token swap itself is the joke.
+- Hook (from `hook-kinetic-type-escalation`): when ONE statement should escalate across distinct full-screen beats (each a different move) and punctuate on a spring-pop payoff element — a rising-intensity / "transform X into Y" opener.
+- Problem (from `problem-kinetic-type-beats`): when the script is 3–5 short pain statements (or a "what-if?" framing) that should each land alone, on a bare canvas, before the next replaces it — no product visible yet.
+- Product_Intro (from `product-intro-kinetic-type-namedrop`): when the hook IS the words — hard-cut through "Introducing…" / tagline / value beats and resolve on the brand name or logo.
+- Benefits (from `benefits-kinetic-type`): when "what you get" is a rapid-fire staccato montage — 8–12 short value phrases, each flashing and clearing before the next at high tempo.
+- CTA (from `cta-kinetic-type`): when the sign-off is a punchy closing line (or a short stack of value lines) that snaps/fades in beat-by-beat and lands on the brand lockup or URL — no spatial set, no clicked button.
+- Brand_Outro (from `brand-outro-kinetic-type-resolve`): when the close is a rapid center-channel barrage of single-word verbs asserting breadth, resolving on the brand's one defining word (motion-is-the-message, no logo lockup).
+
+**duration**: 3.4–12s (Benefits fastest ~3.5–4s at 8–12 sub-0.5s beats; Brand_Outro ~3.6s; Problem longest 7–12s; CTA spans 3.6–11.7s with beat count)
+
+**shot structure** (flat, fixed center anchor; bold sans-serif text on a solid `[bg color]`; type/tokens are the only subject; camera locked unless a modifier is noted; two folded sub-shapes — **(A) fixed-line token swap** and **(B) multi-beat statement build**)
+
+- **Scene 1 (0.0–~1.0s) — first beat lands.** Solid `[bg color]` field. Bold `[type color]` text arrives dead-center via ONE entrance: type-on character-by-character with a trailing blinking caret, OR a hard-cut FLASH-in (no fade/slide), OR a per-word staggered fade/blur, OR an oversized word that smoothly SCALES DOWN to a small centered word. An optional `[accent color]` move plays on the key word(s): a left→right drawn underline / strike-through, a small particle/dot burst from behind the text, or a `[accent color]` selection-box framing the word.
+  - _Variant — Hook (flash)_: just the fixed `[hook line]` (or its first word) parks at center; no escalation move.
+  - _Variant — Hook (escalation)_: `[beat 1 text]` arrives big and scale-downs to centered, OR sits over a glowing `[motif]` with a slow camera push-in (see camera modifier); ends on a hard cut.
+  - _Variant — Problem_: centered `[pain line 1]` reveals in chunks across one or two lines with its `[accent]` underline / particle burst.
+  - _Variant — Product_Intro_: bold `[hook word, e.g. "Introducing"]` enters with a typographic accent (split-and-slide apart, drawn underline, or `[accent]` selection-box).
+  - _Variant — Brand_Outro_: optional single-frame flash of `[product UI / hero asset]` precedes the verb channel, then `[verb 1]` hard-cuts in centered.
+
+- **Scene 2..N — beats replace each other in place (the engine).** The center anchor advances one beat at a time; nothing from the prior beat lingers. Choose the swap mechanism by sub-shape:
+  - **Sub-shape A (fixed-line token swap)**: the line stays fixed and only the variable slot changes by an instant hard CUT (no roll/scroll/blur) — `[token A]` → `[token B]` → `[token C]` — OR the final word(s) backspace out and a new word retypes (`[word A]` → `[word B]`). The rest of the line holds.
+  - **Sub-shape B (multi-beat statement build)**: each full-screen beat hard-cuts to a NEW background/line, and each gets its own distinct entrance/exit MOVE — springy scale-in/scale-out overshoot, 3D letter-tumble (glyphs scatter into a rotating depth cloud, then reassemble into the next phrase), motion-blur fly-in that resolves sharp at center, prior text accelerates/zooms past the camera while fading, letter-spacing collapse, or a bottom-up masked slide. Background may hard-flip `[bg A]`↔`[bg B]` on selected beats with `[type color]` inverting to stay legible.
+  - _Variant — Hook (escalation)_: beat 2 `[beat 2 text]` (more emphatic) snaps in; beat 3 `[beat 3 text]` (climax) holds, then a transition-out move on the type itself — a Z-dolly forward THROUGH an oversized glyph, OR a per-word karaoke highlight sweep lighting words left→right.
+  - _Variant — Problem_: each `[pain line k]` enters by chunk-reveal or motion-blur fly-in as the prior blurs/zooms off; an optional `[accent color]` interstitial word ("[what-if hook]") scales up from center, holds, then zooms past the camera and fades.
+  - _Variant — Product_Intro_: each `[tagline phrase]` is a hard-cut/push-through inverted-text beat with its own one-shot accent (strike-through, slider/toggle shapes sliding in, or a bg-invert cycle white→`[accent]`→black flipping fg/bg).
+  - _Variant — Benefits_: high tempo (~0.4s/beat) — each `[benefit phrase]` pops via springy scale-in/out or 3D letter-tumble; multiple bg light↔dark flips across the run with text-color invert.
+  - _Variant — CTA_: each `[value line]` → `[value line]` → `[CTA verb line]` clears by hard cut / zoom-blur cut through near-black / fade-out, then the next pops/fades/slides in. Optional `[accent motif]` draws on behind (rising line-graph trim-path, thin wireframe guides, gutter geometry tiles).
+  - _Variant — Brand_Outro_: a centered single `[verb / keyword]` HARD-CUTS to the next at a steady ~0.2s cadence (no fade/scale) over a continuous moving field (see camera modifier).
+
+- **Scene N (final beat → end) — resolve and HOLD.** The last beat lands and holds to the end (settle only, no further scale-out). Resolution diverges by role:
+  - _Variant — Hook (flash)_: last token swap lands and holds; optional tiny punctuation/emphasis snap (`?` → `?!`, or fill snaps to `[accent color]`).
+  - _Variant — Hook (escalation)_: resolve on `[payoff bg]` — a `[payoff element]` (colored square / heart-eyes reaction emoji) SPRING-POPS in center; small `[accent motes]` drift outward; subtle settle.
+  - _Variant — Problem_: final `[pain line]` reveals (left→right swipe with leading-edge blur, OR letters explode radially then the resolving line fades up); holds the pain on screen.
+  - _Variant — Product_Intro_: resolve on the brand — `[logo mark]` / `[wordmark]` pops in centered (optional sting: liquid/ink splash, blob backing), OR the final value word holds inside an expanding-iris `[accent]` circle that scales to fill frame and hard-cuts the closing word through it.
+  - _Variant — Benefits_: the last `[benefit phrase]` arrives (optionally on the inverted bg) and SETTLES — does not scale/tumble back out.
+  - _Variant — CTA_: land on the lockup — `[logo mark]` SCALES UP small→full and holds, OR a `[logo]`/`[url]` builds segment-by-segment beside its icon. End-card holds dead static.
+  - _Variant — Brand_Outro_: hard cut to the `[resolve word / brand keyword]` (longest, still centered); HOLDS ~0.5s while the background field keeps moving.
+
+**motion vocabulary**: hard-cut / flash word swaps; in-place token cycle (instant cut, no roll/scroll/blur); type-on with trailing blinking caret; backspace-and-retype; per-word staggered fade/blur reveal; big→small scale-down; springy scale-in/scale-out overshoot; 3D letter-tumble scatter-and-reassemble; motion-blur fly-in / blur-off; prior text zoom-through-camera; letter-spacing collapse; bottom-up masked slide; drawn-on `[accent]` underline / strike-through; particle/dot burst from text; `[accent]` selection-box frame; bg-invert hard-flip with text-color invert; karaoke per-word highlight sweep; radial letter-explode; expanding-iris circle wipe-to-next; final spring-pop payoff element (square / emoji / logo mark); drifting `[accent]` motes / ambient shapes; segment-by-segment URL/wordmark build; final-token punctuation snap; settle-and-hold.
+
+**rule mapping**
+
+- hard-cut / flash word swaps, in-place token cycle, whole-line state swaps at time thresholds → `discrete-text-sequence`
+- type-on character-by-character + blinking trailing caret → `discrete-text-sequence` (text/typing state progression) + `context-sensitive-cursor` (caret blink/color-switch)
+- backspace-and-retype final word(s) → `discrete-text-sequence` (typos/holds/backspace is explicitly in-scope)
+- one short distinct phrase per beat / script-driven phrase windows / word-by-word tagline assembly → `dynamic-content-sequencing`
+- percussive per-beat phrase entrances on a shared beat array (distinct entrance per phrase, steady cadence) → `kinetic-beat-slam` (best fit for the multi-beat statement-build engine and the ~0.2s Brand_Outro verb march)
+- per-word staggered fade/blur reveal → `kinetic-beat-slam` (per-phrase/per-word distinct entrances); the soft-focus blur component → `depth-of-field-blur` (selective-focus blur on the off-focus words)
+- big→small scale-down on a word; springy scale-in/scale-out overshoot → `spring-pop-entrance` (spring pop/settle) backed by `gsap-effects` for the plain scale tween
+- 3D letter-tumble scatter-into-depth-cloud then reassemble → `depth-scatter-assemble` (glyphs scatter into a 3D depth cloud and reassemble into the next phrase; combine w/ `3d-text-depth-layers` for the extruded read, or `hacker-flip-3d` for an in-place per-char flip flavor)
+- karaoke per-word highlight sweep synced across words → `asr-keyword-glow` (keyword glow+scale on a synced rail) OR `css-marker-patterns` (highlight sweep) — choose ASR-driven vs. static-timeline sweep
+- drawn-on `[accent]` underline / strike-through / loop / scribble under key word → `css-marker-patterns` (highlight sweep / circle / burst / scribble / sketchout)
+- particle/dot burst from behind text → `css-marker-patterns` (burst) backed by `gsap-effects`
+- `[accent]` selection-box frame around a word → `css-marker-patterns` (circle/box marker) + `gsap-effects`
+- bg-invert hard-flip (light↔dark / white→accent→black) with text-color invert → `discrete-text-sequence` (whole-text/state swap covers the synchronized fg/bg state change)
+- letter-spacing collapse; bottom-up masked slide → `gsap-effects` (tween letter-spacing / masked translate) + techniques: per-word kinetic typography / clip-path reveal
+- expanding-iris circle wipe that morphs the current word into the next at the same center → `scale-swap-transition` (morph two elements at same center)
+- final spring-pop payoff element (colored square / reaction emoji / logo mark) → `spring-pop-entrance` (or `physics-press-reaction` for a weightier pop)
+- drifting `[accent]` motes / ambient shapes / soft drifting gradient field beneath the type → `sine-wave-loop` (idle drift loop)
+- segment-by-segment URL / wordmark build beside its icon → `discrete-text-sequence` (segment-by-segment state reveal) or `dynamic-content-sequencing`
+- final-token punctuation / emphasis snap (`?`→`?!`, fill→accent) → `discrete-text-sequence`
+- settle-and-hold final frame → `spring-pop-entrance` (settle phase) / static hold (no rule needed)
+- motion-blur fly-in / blur-off / zoom-through-camera streak on type → `motion-blur-streak` (directional velocity blur on a fast fly-in / zoom-through; the heavy motion-blur smear resolves sharp at center)
+- radial letter-explode (glyphs explode outward radially then resolve) → `depth-scatter-assemble` (radial per-letter explode-and-resolve is in scope alongside the depth-cloud scatter)
+- 3D letter-tumble depth-cloud scatter-and-reassemble → `depth-scatter-assemble` (free tumbling depth-cloud that flies out and snaps back into the next phrase)
+
+**camera modifier** (optional, layered over the flat shot; most variants are camera-locked)
+
+- Slow continuous global zoom-in / uniform push-in running underneath the whole sequence (Problem, Brand_Outro) → `multi-phase-camera` (push phase) — gives parallax between the fixed type and a moving background field.
+- Camera dolly/zoom forward THROUGH an oversized glyph along Z as a beat transition-out (Hook escalation, Product_Intro push-through) → `coordinate-target-zoom` (target the glyph center) or `multi-phase-camera` (push).
+- Slow push-in on Scene 1 over a glowing `[motif]` (Hook escalation) → `multi-phase-camera` (push) or `coordinate-target-zoom`.
+- Note: the in-place token swap (sub-shape A) and most Benefits/Hook-flash/CTA variants are fully camera-static — the swap is the only motion.
diff --git a/skills/hyperframes-animation/blueprints/logo-assemble-lockup.md b/skills/hyperframes-animation/blueprints/logo-assemble-lockup.md
new file mode 100644
index 0000000000..7fc2bb793c
--- /dev/null
+++ b/skills/hyperframes-animation/blueprints/logo-assemble-lockup.md
@@ -0,0 +1,69 @@
+# logo-assemble-lockup — Logo Assemble → Lockup
+
+**intent**: A brand mark / wordmark builds itself from parts (elements assemble or orbit in, letters cascade, an outline draws on, or a camera pushes through negative space) and resolves into a centered logo lockup — optionally extended into a final URL / CTA.
+
+**roles served**
+
+- Product_Intro (from product-intro-logo-system-assemble): A wordless, premium brand STING — an abstract system of elements pulses / grows / orbits and assembles around a FIXED central logo, carried by one cinematic camera tilt; no copy, no UI.
+- CTA (from cta-camera-push-lockup): The logo build is a LEAD-IN to the final ask — a 3D mark assembles + wordmark cascades, then a fast camera PUSH-THROUGH the mark's negative space streaks giant CTA letters past the lens and resolves on a `[url]` / `[CTA verb]` lockup.
+- CTA (from cta-button-wordmark-build): The "draws-its-own-outline → wordmark-builds-letter-by-letter" sub-shape — a `[CTA button]` pill strokes its own glowing border, a diagonal-band WIPE flips the frame, and the `[wordmark]` types in beside a slash to land the lockup. Camera static.
+- Brand_Outro (from brand-outro-assemble-logo-lockup): The closing mark — a formation of `[feature pills / UI elements]` CLEARS the stage off all four edges, then on the empty frame the `[logo mark]` draws itself on stroke-by-stroke and the `[wordmark]` reveals to complete the lockup, then fades out.
+- Product_Intro (from brand-reveal-assemble-zoom): a context-then-focus reveal — a companion tagline TYPES out to set context, the hero mark pops in beside it, then the companion exits as the layout recenters and the camera pushes IN to a held close-up on the mark (wide composition narrowing to a tight focus).
+
+**duration**: ~4.6–11.0s (Brand_Outro ~4.6s · brand-reveal ~5s · Product_Intro ~7s · CTA 5.4–11.0s)
+
+**shot structure** (one consolidated time-coded template; `[slots]` are product-agnostic)
+
+- Scene 1 — clear / ignite (0.0–~1.0s): the stage is prepared for the mark to build into.
+  - _Variant — Product_Intro_: opens on a clean `[light bg]` with faint concentric guide rings under a flat top-down view; rings PULSE and expand from center; mid-beat the bg crossfades `[light]→[dark gradient: hero→secondary]`, tiny seed dots appear along the rings, and the central `[logo mark]`'s glow IGNITES (mark is present from t=0, fixed, front-facing).
+  - _Variant — CTA push_: on a `[bg gradient]`, the `[logo mark]` is settling in object space (a 3D mark with thin wireframe edge-guides + a faint bracket motif behind center); a very slow continuous camera push-in may already be creeping.
+  - _Variant — CTA button-build_: on a `[dark grid bg]`, a rounded `[CTA button "label"]` pill rises / scales into center (a prior headline clearing off the top); its thin border DRAWS ON as an animated glowing outline STROKE, with a small `[accent]` comet / spark icon at its left edge.
+  - _Variant — Brand_Outro_: a PRE-ARRANGED formation of `[feature pills / element grid]` (each `[icon]`+`[label]`) DISPERSES — elements slide outward from their laid-out positions and fly off all four frame edges (edge-clearing drift, NOT a center-origin burst), emptying the frame onto a clean `[bg]`.
+
+- Scene 2 — assemble the mark (~1.0–~Ys): the mark builds itself from parts.
+  - _Variant — Product_Intro_: seed dots SCALE UP into flat `[accent]` shapes arranged on the rings; concentric bands ripple outward (tunneling feel) and the shapes begin to ORBIT / drift around the still-fixed center.
+  - _Variant — CTA push_: the `[wordmark]` CASCADES out from behind the mark (letters left→right with overshoot) into the full `[brand lockup]`; the 3D mark may assemble in beats (a terminal detaches + pops as a spring dot, a part hinges-open-and-snaps-shut elastic). Optional beat: a `[cursor]` arcs in and "clicks" the wordmark, OR a frosted-glass pill holding an intermediate `[CTA line]` springs in while layered mark shells fan to the edges.
+  - _Variant — CTA button-build_: a graphic WIPE flips the frame to `[contrast bg]` — a thin `[accent]` diagonal line sweeps in, swells into a full-frame diagonal BAND, then collapses to a small `[accent]` slash.
+  - _Variant — Brand_Outro_: on the now-clear frame, the `[logo mark]` DRAWS ON via stroke (built arc-by-arc / segment-by-segment).
+
+- Scene 3 — resolve to lockup (~Ys–end): the lockup completes and holds (Product_Intro / Brand_Outro) or is flown into / extended to a CTA (CTA variants).
+  - _Variant — Product_Intro (the ONE camera move)_: the whole system smoothly TILTS from flat top-down into an angled isometric perspective (ease-in-out) with a slight zoom-out — flat shapes become luminous 3D forms, bands become glowing orbit lines, while the central `[logo mark]` does NOT tilt (stays 2D, front-facing, fixed). Camera eases to a stop; elements keep continuous orbit/drift (inner faster than outer); the mark holds its steady glow. Final settled frame.
+  - _Variant — CTA push (the signature)_: a single fast CAMERA PUSH-THROUGH the mark's negative space / through the glass pill — heavy horizontal motion-blur, giant `[CTA]` letters streaking past the lens (cursor drops out). Resolves to the final lockup on a saturated `[bg]`: a `[url badge]` / `[CTA line]` revealed by a left→right WIPE carrying an `[accent]` leading edge (or a clean fade), with solid mark-shapes parallax-sliding in behind. Settles to a dead-static hold (slow zoom-out / settle).
+  - _Variant — CTA button-build_: the `[wordmark]` BUILDS letter-by-letter to the right of the slash, landing on the final "`[slash] [WORDMARK]`" lockup centered on the new bg. Slow settle to static.
+  - _Variant — Brand_Outro_: the `[wordmark]` reveals beside the drawn mark (slide / fade) to complete the `[lockup]`; the lockup holds, then fades to `[black / bg]`.
+
+**motion vocabulary**: ring pulse / expand; background crossfade (light→dark); glow ignite; seed-dot scale-up; continuous orbit / drift (inner faster than outer); single 3D perspective tilt (flat→isometric) + slight zoom-out around a fixed 2D anchor; 3D logo assemble (part detach + spring dot, clapperboard hinge / snap, shell fan-out); wordmark cascade with overshoot (letters left→right); button pill rise / scale-in; animated stroke-outline DRAW + glow (button border AND logo mark); comet / spark accent; diagonal-band wipe (sweep → swell → collapse-to-slash); letter-by-letter wordmark build; pre-formed grid DISPERSE off all four edges; logo-mark stroke-draw (sequential arcs / segments); fast CAMERA PUSH-THROUGH with motion-blur (CTA spine); continuous slow push-in / push-out; cursor arc-in + click; parallax shape slide-in; left→right URL/badge wipe with glowing leading edge; static / fade-out end-lockup hold; optional idle breathe on the held mark.
+
+**rule mapping** (per motion verb → `rules/<id>.md`)
+
+- ring pulse / expand from center → `center-outward-expansion` (radiate from a shared center; reuse the 0→1 progress driver)
+- background crossfade (light→dark gradient) → plain opacity/background tween via `gsap-effects` (no dedicated rule needed)
+- glow ignite on the mark → `asr-keyword-glow` (envelope-driven glow on the brand element)
+- seed-dot scale-up into shapes → `spring-pop-entrance` (scale-in pop; alt `scale-swap-transition` if dots morph into shapes)
+- continuous orbit / drift around fixed center → `orbit-3d-entry` (flip-in then continuous elliptical orbit; center label = the fixed mark)
+- single 3D perspective tilt (flat→isometric) + slight zoom-out → `multi-phase-camera` (scripted scale phases on a scene-wrapping camera, for the zoom-out) — see camera modifier; the FLAT→ISOMETRIC plane tilt of the whole stage is a CSS-3D perspective move (`techniques.md` CSS-3D, animating the stage's `rotateX`) — no exact camera rule for the plane-tilt, approximate via CSS-3D (closest reference is `orbit-3d-entry`'s "Tilted orbit plane" variation animated over time)
+- fixed 2D anchor logo amid moving universe → no motion rule needed (static anchor; intentional — it's the absence of motion, the universe moves around it)
+- 3D logo assemble — part detach + spring dot → `spring-pop-entrance` (spring pop, `back.out` overshoot)
+- 3D logo assemble — hinge open / snap (clapperboard) → `hacker-flip-3d` (the 3D-rotate axis) + `techniques.md` CSS-3D (the elastic open-and-snap-shut hinge is an adaptation of the 3D-rotate)
+- 3D logo assemble — shell fan-out to edges → `center-outward-expansion` (run outward from the mark center)
+- wordmark cascade with overshoot (letters left→right) → recipe `gsap-effects` (per-element staggered slide) + `spring-pop-entrance` (the `back.out` overshoot per letter)
+- button pill rise / scale-in → `spring-pop-entrance` (scale-in; alt `scale-swap-transition`)
+- animated stroke-outline draw + glow (button border) → `svg-path-draw` (stroke-dashoffset draw) + `asr-keyword-glow` (the glow on the drawn stroke)
+- comet / spark accent on button → `asr-keyword-glow` (small glow accent); motion path via `techniques.md` GSAP MotionPathPlugin (#9)
+- diagonal-band wipe (sweep → swell → collapse-to-slash) → `techniques.md` clip-path reveal (#12, animate a `polygon(...)` diagonal across the frame; the swell-then-collapse-to-slash is the same clip-path reveal driven through grow→shrink keyframes)
+- letter-by-letter wordmark build → `discrete-text-sequence` (smooth-slice / per-state build); recipe `gsap-effects` (typewriter / appending words)
+- pre-formed grid disperse off all four edges → not a rule gap: a formation flying off-frame is an EXIT, and the pipeline forbids mid-video exits — the harness transition IS the exit (only the final frame may exit the stage). Treat this as transition-handled / final-frame-only rather than an in-scene motion rule. (If staged in-scene as a reveal-the-mark clear, it reuses `center-outward-expansion` run OUTWARD — center→target machinery interpolating formation→offscreen targets, out-easing.)
+- logo-mark stroke-draw (sequential arcs / segments) → `svg-path-draw` (the canonical multi-segment stagger draw)
+- wordmark slide / fade reveal beside drawn mark → `svg-path-draw` (its "brand-line fades in after stroke" tail) ; slide via `spring-pop-entrance`
+- fast camera push-through with motion-blur → `multi-phase-camera` (a hard push phase) — see camera modifier; the heavy motion-blur streak itself → `motion-blur-streak` (directional velocity blur on the fast push-through)
+- continuous slow push-in / push-out → `multi-phase-camera` (phase scale + drift)
+- cursor arc-in + click on the wordmark → `cursor-click-ripple` (move → click → ripple); arc path via `techniques.md` MotionPathPlugin (#9)
+- parallax shape slide-in behind lockup → `depth-scatter-assemble` (parallax depth slide-in of shapes at differing depths; pair with `3d-text-depth-layers` for the depth ordering)
+- left→right URL / badge wipe with glowing leading edge → `techniques.md` clip-path reveal (#12, animate `inset()` left→right); the glowing leading edge → `asr-keyword-glow`
+- static / fade-out end-lockup hold → no motion rule needed (terminal hold / opacity fade; intentional)
+- idle breathe on held mark (optional) → `sine-wave-loop` (post-settle breathing)
+
+**camera modifier** (the push / tilt)
+
+- **CTA push-through** (the CTA spine): a scripted hard zoom phase on a scene-wrapping camera → `multi-phase-camera` ("Steady push" / "Bookend pull" pattern; push phase = the climax). When the mark is OFF-center and the camera must fly through a specific point of negative space, combine with `coordinate-target-zoom` (outer scales, inner counter-translates so the target negative-space point lands at viewport center as scale ramps; measure the offset at setup). The signature heavy horizontal MOTION-BLUR on the streak → `motion-blur-streak` (directional velocity blur on the push); realize with a CSS `filter: blur()` / duplicated-streak layer on the camera during the push window.
+- **Product_Intro tilt** (the one cinematic move): the flat→isometric perspective tilt + slight zoom-out is a single scripted camera beat → `multi-phase-camera` (scale phase + the "Targeted zoom into off-center element" / drift machinery) for the zoom-out. `multi-phase-camera` is scale+translate+drift only, so the perspective-PLANE rotateX (flat top-down → angled isometric) of the whole stage is the CSS-3D move noted above — approximate via `techniques.md` CSS-3D, animating the stage's `rotateX` (closest reference is `orbit-3d-entry`'s "Tilted orbit plane" variation animated over time).
diff --git a/skills/hyperframes-animation/blueprints/messaging-multi-phrase.md b/skills/hyperframes-animation/blueprints/messaging-multi-phrase.md
deleted file mode 100644
index 331cafba40..0000000000
--- a/skills/hyperframes-animation/blueprints/messaging-multi-phrase.md
+++ /dev/null
@@ -1,126 +0,0 @@
----
-id: messaging-multi-phrase
-role: messaging
-duration_seconds: [7, 8]
-phases: 3
-visual_arc: phrase-type → phrase-type → phrase-type (hard-cut between)
-uses_rules: [dynamic-content-sequencing, context-sensitive-cursor]
-element_roles:
-  main_text: Contextual lead-in portion of each phrase, typed in primary color
-  accent_text: Emphatic / highlighted portion, typed in accent color immediately after main
-  cursor: Blinking cursor whose color reflects the active text segment
-when_to_use:
-  - Multiple text phrases displayed sequentially with typing rhythm
-  - Each phrase has a dual-tone structure (neutral lead-in + colored emphasis)
-  - Scene is purely text-driven, no visual hero
-  - Phrase content varies in length, needs proportional screen time
-  - "Statement after statement" cadence for layered messaging
-when_not_to_use:
-  - Text coexists with a visual hero — see brand-reveal-assemble-zoom or takeover-ticker-displace
-  - Phrases should cross-dissolve, not hard-cut
-  - Single phrase only — use [context-sensitive-cursor](../rules/context-sensitive-cursor.md) alone
-  - Need camera movement / zoom between phrases — see concept-demo-decode-pan
-triggers: [multiple phrases typing, sequential statements, typing with highlight, text carousel, dual-color text, rhythmic messaging]
----
-
-# Messaging · Multi-Phrase (HyperFrames)
-
-A "statement, then statement, then statement" arc: each phrase types itself out from a neutral lead-in into a colored emphasis word, holds long enough that the eye can park on the keyword, then hard-cuts to the next. The viewer's rhythm is reset every cut — there is no momentum carried across phrases, on purpose. The only continuous thread is the blinking cursor, whose color silently swaps as the typing crosses into the accent segment.
-
-The whole thing runs on a single paused GSAP "clock" tween with one `onUpdate` — phrase content, character count, cursor color, and blink are all pure functions of `tl.time()`.
-
-## When to Use
-
-- Scene delivers multiple messaging beats through text alone (no visual hero)
-- Each beat has a neutral lead-in followed by an emphasized keyword
-- Content length varies between phrases and timing should adapt automatically
-- Hard-cut cadence is part of the design — phrases do not cross-dissolve
-- Not for: text + visual hero, single phrase scenes, or rhythms with camera movement
-
-## Orchestration
-
-Two rules compose here, but they don't run side-by-side — they collapse into a single `onUpdate` because all of their state is a function of the same `tl.time()`. The split is conceptual, not architectural:
-
-- **Phase scheduling** uses [dynamic-content-sequencing](../rules/dynamic-content-sequencing.md), but in a **per-character-typing variation** the rule itself only hints at. The rule's standard form swaps each entry's content as a block (set `title` / `body` `textContent` on entry transition); we instead derive a `charIdx` _inside_ the active entry and progressively reveal `textMain` then `textAccent`. The `TIMELINE` pre-compute is exactly the rule's `start[i] = sum of durations 0..i-1` pattern; the per-entry duration formula changes from "`BASE + length * SEC_PER_CHAR + hold`" to "`(mainLen + accentLen) * charSpeed + hold`" — there is no `BASE_DURATION` floor because every phrase has enough characters that the charSpeed floor is meaningful. See "Phase 1→N Seam".
-- **Cursor styling** uses [context-sensitive-cursor](../rules/context-sensitive-cursor.md), but with **two crucial deviations from the rule's `SEQUENCE` form**. First, segments aren't authored as discrete `{t, segment, color}` entries — they're derived from the typing progress within the active phrase (`charIdx >= mainLen` → accent segment). Second, the blink is a **modulo square wave** (`(t % BLINK_CYCLE) < BLINK_CYCLE / 2`), not the rule's sin-sweep with `BLINK_CYCLES_PER_SCENE`. The modulo form is decoupled from `TOTAL` — the period is a pure constant, so changes to `TOTAL` (e.g. adding a phrase) don't shift the blink phase. See "Phase 1→N Seam" again for why color comes from typing progress, not from a label.
-
-There is no third "rule" for the inter-phrase hard-cut, because hard-cut means _no animation_ — when `TIMELINE.find` returns the next entry, the next `onUpdate` frame simply writes the new phrase's first character into the same DOM nodes.
-
-## Phase Timing
-
-Phase boundaries are **content-driven** — `TIMELINE[i].endTime` is computed from `(mainLen + accentLen) * charSpeed + hold`, not authored. Every phrase shares one `charSpeed` so the typing rhythm reads as one engine; what varies is total character count and the per-phrase `hold`.
-
-| Phase  | Start ≥                          | Internal duration                                  | Notes                                          |
-| ------ | -------------------------------- | -------------------------------------------------- | ---------------------------------------------- |
-| 1      | `0`                              | `(main1Len + accent1Len) * charSpeed + HOLD_MID`   | First phrase. `startTime = 0`, no lead-in beat |
-| 2..N-1 | `TIMELINE[i-1].endTime` (no gap) | `(mainNLen + accentNLen) * charSpeed + HOLD_MID`   | Hard cut. Zero buffer — see seam               |
-| N      | `TIMELINE[N-2].endTime`          | `(mainNLen + accentNLen) * charSpeed + HOLD_FINAL` | Closing beat uses `HOLD_FINAL > HOLD_MID`      |
-
-The most important number in the table is the **zero gap between phrases**. Unlike spring-driven blueprints (brand-reveal, etc.) which need a 0.06–0.3s breath to let `back.out` overshoot decay, this blueprint's only "tween" is a linear clock — there is no spring tail to settle. Adding a gap would just produce a dead frame where `TIMELINE.find` returns `undefined` and the fallback empties the DOM, then on the next frame the new phrase pops in — visually that reads as a "blink to empty, then text appears" stutter. Phase boundaries land exactly on `endTime`, and the next frame's `find` immediately returns the next entry.
-
-`HOLD_MID` is the dwell after the accent finishes typing and before the cut. The eye needs about half a second to lock onto the accent word; less than that and the cut feels rushed, more than ~1.5s and the rhythm stalls. `HOLD_FINAL` extends only on the last phrase — it's the "this is the closing statement" beat, typically 1.5–3s. Ranges live in the [dynamic-content-sequencing](../rules/dynamic-content-sequencing.md) rule's How to Choose Values; the constraint unique to this blueprint is that **`charSpeed` is shared across all phrases** (otherwise the rhythm reads as multiple engines, not one).
-
-## Phase 1→N Seam: Per-Char Typing Inside a Sequencer Entry
-
-This is the core deviation from `dynamic-content-sequencing`. The rule renders each entry as a block content swap on transition (`if (entry.title !== lastTitle) titleEl.textContent = entry.title`). Here the entry transition still happens, but _within_ an entry there is also per-frame character reveal. The math is:
-
-```js
-const activeT = t - phrase.startTime; // seconds into this phrase
-const charIdx = Math.floor(activeT / charSpeed); // how many chars typed so far
-const mainLen = phrase.textMain.length;
-const visMain = phrase.textMain.slice(0, Math.min(charIdx, mainLen));
-const accentLen = Math.max(0, charIdx - mainLen);
-const visAccent = phrase.textAccent.slice(0, accentLen);
-```
-
-`Math.floor` is mandatory: `slice` accepts float indices and returns the truncated string with no error, but renders fractional-character widths that flicker frame-to-frame. The `Math.min(charIdx, mainLen)` clamp is what makes the main segment "fill up" before the accent starts — without it, both segments would grow in parallel from `slice(0, charIdx)` and the dual-tone effect collapses.
-
-**The cursor color derives from these two visible lengths, not from a `SEQUENCE` label.** The rule's authored `{segment: "brand", color: "{brandColor}"}` form doesn't fit here because we don't know ahead of time at what `t` value the accent starts — `mainLen * charSpeed` varies per phrase. The derivation is one line:
-
-```js
-const inAccent = visMain.length === mainLen && visAccent.length > 0;
-cursorEl.style.background = inAccent ? ACCENT_COLOR : MAIN_COLOR;
-```
-
-`visMain.length === mainLen` (not `charIdx >= mainLen`) is deliberate — when typing is mid-main, `visMain.length` equals `charIdx`, but once typing crosses into accent, `visMain` caps at `mainLen`. The second condition `visAccent.length > 0` guards the exact boundary frame: when `charIdx` first hits `mainLen`, both `visMain` and `visAccent` are "complete-main, empty-accent" for one frame — the cursor should stay on `MAIN_COLOR` until the first accent character actually appears. Drop that guard and the cursor flashes accent color for one frame on an empty accent segment, which reads as a glitch.
-
-## Phase 1→N Seam: Blink Decoupling
-
-The cursor blink uses `cursorEl.style.opacity = (t % BLINK_CYCLE) < BLINK_CYCLE / 2 ? "1" : "0"` — a pure square wave on `tl.time()`. This is _not_ the rule's sin-sweep form, and the difference matters: the rule's `BLINK_CYCLES_PER_SCENE` ties the blink period to `DURATION`, which is fine when `DURATION` is fixed but fragile here because `TOTAL` is content-derived. Add a phrase and `TOTAL` grows; with the sin-sweep form, `BLINK_CYCLES_PER_SCENE` must be re-tuned to keep the period in the 0.6–1.2s readability window. The modulo form makes `BLINK_CYCLE` an absolute constant — period is invariant under script changes.
-
-The blink runs continuously, including during the pre-first-phrase and post-last-phrase fallback windows where text is empty. This is intentional: a non-blinking cursor reads as "process frozen," a blinking cursor reads as "waiting for input."
-
-## Layout
-
-A centered flex row with three inline spans (`.phrase-main`, `.phrase-accent`, `.phrase-cursor`). No fixed-width container — each phrase fully replaces the previous, so the flex re-centers cleanly at every cut. This is the one place where the layout differs from [context-sensitive-cursor](../rules/context-sensitive-cursor.md)'s `min-width: 1200px` terminal pattern: the cursor rule shows a single growing line where the cursor must stay at a stable x-position, while here every phrase has its own length and re-centering is the desired behavior.
-
-`white-space: pre` is non-negotiable when `textMain` ends with a space (e.g. `"Build video with "`) — collapse the trailing space and the accent visually butts against the lead-in with no gap.
-
-## Key Values to Choose (Not Already in the Rules)
-
-Only listing parameters **unique to this blueprint**; standard parameters (`HOLD_MID`, `HOLD_FINAL`, cursor geometry) live in their respective rules.
-
-- **CHAR_SPEED**: seconds per character, shared across all phrases. 0.04 reads as urgent/mechanical, 0.12 as deliberate. **Must be uniform across the SCRIPT array** — the rule's `SPEED_FACTOR` per-entry override doesn't apply here because the typing-rhythm-as-one-engine effect is the whole point. Convert from frames as `frames / fps`.
-- **BLINK_CYCLE**: full on-off period of the cursor blink, 0.6–1.2s. Decoupled from `TOTAL` by design (see "Blink Decoupling" seam). Don't substitute the rule's `BLINK_CYCLES_PER_SCENE` form here.
-- **MAIN_COLOR / ACCENT_COLOR**: text + cursor palette. Must have visibly distinct chroma — equal-luminance pairs (two pastels) make the cursor color swap unreadable. ACCENT_COLOR is the source of truth for both `.phrase-accent` text color and the active-segment cursor fill; they must match exactly.
-- **SCRIPT length (N)**: 2–5 phrases. The rule's range is 3–6; this blueprint's lower floor is 2 because dual-tone phrases each carry more weight than single-tone sequence items. Above 5 the hard-cut rhythm reads as repetitive.
-- **Longest-phrase font sizing**: pick the largest `fontSize` such that `max(mainLen + accentLen) * CHAR_ADVANCE_RATIO * fontSize` fits within `SAFE_WIDTH_RATIO * canvasWidth`. CHAR_ADVANCE_RATIO is ~0.5 for typical sans-serif at weight 700–900; SAFE_WIDTH_RATIO 0.85 leaves comfortable margins. If a deck needs precision, measure with a hidden canvas after `document.fonts.ready` (see [camera-cursor-tracking](../rules/camera-cursor-tracking.md) for the `ctx.measureText` pattern) — but for most messaging scenes the formula plus one hand-tune iteration is enough.
-
-## Critical Constraints (ordered by failure frequency)
-
-- **`Math.floor` on charIdx, and `Math.min(charIdx, mainLen)` on the main slice**: dropping either produces fractional-character flicker or a "both segments grow together" smear that destroys the dual-tone reveal.
-- **Cursor color guard uses `visAccent.length > 0`, not `charIdx >= mainLen`**: see Phase 1→N Seam. Without this guard the cursor flashes ACCENT_COLOR for one frame on every main→accent boundary.
-- **Zero gap between phrases**: `TIMELINE[i+1].startTime === TIMELINE[i].endTime` exactly. Any positive gap drops the next frame into the empty-state fallback and produces a one-frame stutter.
-- **`white-space: pre` on `.phrase-stage`**: required when `textMain` ends with a space. Collapse the space and the lead-in / accent join with no visual gap.
-- **`charSpeed` shared across all phrases**: the typing-rhythm-as-one-engine effect requires uniformity. Per-phrase override (the rule's `SPEED_FACTOR` variation) is explicitly _not_ used here.
-- **`data-duration ≤ TOTAL`**: equal trims a trailing empty fallback; less is allowed to trim an over-long `HOLD_FINAL` but must fall _inside_ the final phrase's hold window, never mid-accent. `data-duration > TOTAL` leaves the empty-fallback branch firing at the tail — visible as cursor-only on blank for the excess seconds.
-- **ACCENT_COLOR is the single source of truth**: `.phrase-accent` CSS color and the active-segment cursor `background` must reference the same value. Defining them in two places lets them drift.
-- **DOM write guard**: `if (mainEl.textContent !== visMain) ...` — even though `textContent` is cheap, redundant writes during `hold` windows invalidate layout and cause measurable cost on long compositions.
-
-## Spring → Ease Selection
-
-This blueprint has **no springs**. The clock tween is `ease: "none"`, the blink is a step function via modulo, the cuts are instant. The full spring → ease mapping in [SKILL.md](../SKILL.md) is not relevant here. If you want a soft fade-in instead of hard-cut between phrases, add a 0.1s opacity tween at each `startTime` — but that departs from the source's "statement, then statement" semantic.
-
-## Golden Sample
-
-- [messaging-multi-phrase.html](../examples/messaging-multi-phrase.html) — three-phrase statement scene with concrete colors, font sizing, copy, and per-phrase hold values. Demonstrates the single-paused-timeline + master `onUpdate` engine, the cursor color swap derived from typing progress, the modulo-square-wave blink, and a `data-duration` deliberately set under the computed `TOTAL` to trim the closing hold. Run this first, then change values — much faster than building from scratch.
diff --git a/skills/hyperframes-animation/blueprints/metric-video-text-pivot.md b/skills/hyperframes-animation/blueprints/metric-video-text-pivot.md
deleted file mode 100644
index 8f7148839b..0000000000
--- a/skills/hyperframes-animation/blueprints/metric-video-text-pivot.md
+++ /dev/null
@@ -1,212 +0,0 @@
----
-id: metric-video-text-pivot
-role: metric
-duration_seconds: [5, 8]
-phases: 4
-visual_arc: video-center → video-slides-aside → text-typing → stat-reveal
-uses_rules: [3d-text-depth-layers, sine-wave-loop]
-element_roles:
-  video: Product demo video that starts centered, then slides to make room for the stat
-  typing_text: Character-by-character typed lines, with accent-colored keywords
-  stat: Giant metric label rendered with 3D depth layers
-  pill: Gradient background pill that scales in behind a closing phrase
-when_to_use:
-  - Scene transitions from showing a feature to stating its impact
-  - Metric needs dramatic typographic treatment, not just a number overlay
-  - Video provides context, text provides the "so what" payoff
-  - Pivot from visual demonstration to textual impact statement
-when_not_to_use:
-  - Video should remain the focal point throughout
-  - Stat is secondary information (use overlay)
-  - Scene is purely typographic with no video
-triggers:
-  [
-    accuracy rate,
-    engagement increase,
-    show feature then stat,
-    video moves aside,
-    big number reveal,
-    metric emphasis,
-  ]
----
-
-# Metric · Video Text Pivot (HyperFrames)
-
-This is a "show → yield → pivot → stamp" emotional arc: the product video lands centered and breathes, claiming the viewer's full attention; then it slides aside _into_ the space the stat fills, so the viewer reads it as a single weight-transfer rather than two events; then both visual citizens clear out and kinetic text types into the vacated center, with accent words carrying the meaning the video used to carry; finally a gradient pill snaps shut around the closing line, sealing the impact statement as one graphic.
-
-Single paused GSAP timeline. Four phases, but the second and third phase each pair an exit with a same-anchor entrance, so the timeline reads as two beats not four.
-
-## When to Use
-
-- Two narrative beats: "see the feature" then "see the impact"
-- Stat / metric needs dramatic, frame-filling typographic treatment (not an overlay)
-- Video provides context and must remain visible during the stat reveal — it slides, doesn't cut
-- Not for: video-as-focal-point throughout, secondary stats, purely typographic scenes
-
-## Orchestration
-
-Four phases, two rules, three inline patterns. The inline patterns dominate because most of the scene is bespoke layout choreography, not motif reuse.
-
-- **Phase 1 — video enters + floats**: inline `power3.out` scale/opacity tween on `.video-pos` for the entry. The float (a small `y` bob) is [sine-wave-loop](../rules/sine-wave-loop.md) in its **multiplicative `onUpdate` form**, written to `.video-float` (the middle wrapper). The rule's `fromTo` + yoyo form would not survive the Phase 2 slide tween — see Phase 1 seam below.
-- **Phase 2 — video slide + stat reveal**: video gets an inline `power3.out` `x` + `scale` slide on `.video-pos`. Stat enters with an inline `back.out(STAT_BOUNCE_FACTOR)` on `.stat-pos`. The stat's 3D type uses [3d-text-depth-layers](../rules/3d-text-depth-layers.md) in its **static-depth variation** (layers built at composition setup, no cascade, no depth-grow tween); the cascade default would fight the bounce entry. The stat's breath is again [sine-wave-loop](../rules/sine-wave-loop.md) in its multiplicative onUpdate form, gated to the Phase 2 window only.
-- **Phase 3 — pivot (both exit + typing enters)**: three concurrent inline tweens at `PIVOT_AT` — video exit, stat exit, typing-stage fade/scale entry. The character-by-character typing itself is inline: a single proxy tween advances `idx: 0 → totalChars` with `ease: "none"`, and `onUpdate` slices five pre-segmented spans by index. We are deliberately _not_ using `discrete-text-sequence` — that rule models discrete state swaps (typos, corrections), not a clean character stream through segmented spans. See "Rule gap" in the report.
-- **Phase 4 — pill stamp**: inline `power3.out` on `.pill-bg` `scaleX: 0 → 1` + `scaleY: PILL_INITIAL_SCALE_Y → 1`. The glow halo (`.pill-glow`) fades on the same anchor with a longer `power2.out` duration so the silhouette resolves before the bloom registers.
-
-## Phase Timing
-
-| Phase | Start ≥                                             | Internal duration                        | Notes                                                                     |
-| ----- | --------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------- |
-| 1     | `VIDEO_ENTRY_AT` (≥ 0)                              | `VIDEO_ENTRY_DUR`                        | Float starts at t=0 and runs continuously, gated by Phase 2/3 window      |
-| 2     | `VIDEO_ENTRY_AT + VIDEO_ENTRY_DUR + ~1.0s`          | `max(VIDEO_SLIDE_DUR, STAT_ENTRY_DUR)`   | The ~1s gap is the "breathing room" — see seam                            |
-| 2b    | `SLIDE_AT + STAT_ENTRY_DUR + ~0.1s`                 | until `PIVOT_AT`                         | Stat breath activates here, gated off at `PIVOT_AT`                       |
-| 3     | `STAT_BREATH_START + ~0.5s`                         | `EXIT_DUR` + `TYPING_STAGE_DUR` + typing | Pivot starts here; `TYPING_START_AT = PIVOT_AT + TYPING_STAGE_DUR`        |
-| 4     | `TYPING_START_AT + (BOUNDS.accent2End / TYPE_RATE)` | `PILL_DUR`                               | Anchored to the character index where line 2 begins — derived, not chosen |
-
-The ~1s gap before Phase 2 (`SLIDE_AT − VIDEO_ENTRY_AT − VIDEO_ENTRY_DUR ≥ 1.0s`) is the most-tuned gap in the blueprint: shorter and the float never registers as "alive," so the slide reads as the video's first action rather than its second; longer and the scene drags. The 0.1s gap between stat entry end and breath start is the standard `back.out` settle buffer (overshoot tail and sine cannot coexist — same constraint as Phase 5 of brand-reveal). The ~0.5s minimum between breath start and `PIVOT_AT` exists to make the breath _visible_ — at least one half-cycle has to land before the exit.
-
-The pill anchor (`PILL_AT`) is not chosen, it's derived from the typing index. The full formula:
-
-```
-PILL_AT = TYPING_START_AT + (BOUNDS.accent2End / TYPE_RATE)
-        = (PIVOT_AT + TYPING_STAGE_DUR) + (line1Length / TYPE_RATE)
-```
-
-so the pill snaps in _at the instant_ line 2's first character types. Anchoring it earlier reads as the pill predicting the phrase; later reads as the pill catching up. Pick `TYPE_RATE` first, then this anchor falls out.
-
-## Initial DOM Nesting (Critical)
-
-Every moving element gets **three nested wrappers**: outer `-pos` carries the GSAP entry/slide/exit tween, middle `-float` (or `-breath`) carries the onUpdate-driven continuous motion, inner `-tilt` carries a static CSS 3D rotation. This is the structural seam unique to the blueprint — without the separation, the float's `y` onUpdate would clobber the slide's `x` tween (and vice versa) every frame.
-
-```
-.stage
-  .video-pos          ← Phase 1 entry, Phase 2 slide, Phase 3 exit
-    .video-float      ← onUpdate: y (sine-wave float, gated by t < PIVOT_AT)
-      .video-tilt     ← CSS: rotateY(VIDEO_TILT_Y) rotateX(VIDEO_TILT_X) — static
-        .video-content
-          <video />
-  .stat-pos           ← Phase 2 back.out entry, Phase 3 exit
-    .stat-breath      ← onUpdate: scale (sine-wave breath, gated to Phase 2 window)
-      .stat-tilt      ← CSS: rotateY(STAT_TILT_Y) rotateX(STAT_TILT_X) — static, opposite-Y sign vs video
-        .depth-stack  ← 3d-text-depth-layers (static variation, built once)
-  .typing-stage       ← Phase 3 fade+scale entry
-    .typing-tilt      ← CSS: rotateY(TYPING_TILT_Y) — static
-      .line1 (5 spans: main / accent / suffix / accent2 / cursor1)
-      .line2-wrap
-        .pill-bg      ← Phase 4 scaleX/scaleY entry
-        .pill-glow    ← Phase 4 opacity fade
-        .line2-content (line2 span + cursor2)
-```
-
-The video-tilt and stat-tilt should use **opposite-sign `rotateY`** values (e.g. video `+14°`, stat `-14°`) — this reads as "two surfaces angled toward camera" rather than "two surfaces in the same plane." Same-sign tilts make the slide look like a flat layer-shuffle.
-
-Accent colors are static CSS — `.seg.accent { color: {accentColor} }`. No per-frame color tween, no glow envelope on accent spans. The pill carries all the chromatic punch.
-
-## Phase 1 Seam: Float Must Be Multiplicative AND Gated
-
-The video's float uses [sine-wave-loop](../rules/sine-wave-loop.md)'s onUpdate form, not its `fromTo` + yoyo form — and not because of stylistic preference. Phase 2 will tween `.video-pos`'s `x` from center to `VIDEO_SLIDE_X`. If the float lived on the same element via `fromTo + yoyo`, GSAP would reapply the float's `from` state every yoyo cycle and snap `.video-pos` back to its un-slid position. Putting the float on the middle wrapper (`.video-float`) and writing its `y` via `onUpdate` keeps `.video-pos`'s `x` slot free for the slide tween.
-
-The float must also be **time-gated** inside the shared scene-ticker onUpdate — it should stop firing once the video exits in Phase 3, otherwise it keeps writing `y` to an off-screen `.video-float` forever and burns CPU. Gate it with `if (t < PIVOT_AT)`. This is one of two gated continuous motions in the scene (the other is the stat breath); together they're why we use a single shared scene-ticker onUpdate rather than three separate tweens.
-
-## Phase 2 Seam: Slide and Stat-Entry Share an Anchor
-
-Both tweens fire at the same `SLIDE_AT` position on the timeline. This is the scene's signature beat: the slide _creates_ the space the stat _fills_, so the eye reads them as one weight transfer. If `SLIDE_AT` for the stat lags the video slide by even 0.1s, the empty space briefly registers as "something is missing" before the stat lands, killing the illusion. Stack them on the exact same anchor.
-
-The stat enters from `(STAT_ENTRY_X, STAT_ENTRY_Y_OFFSET, STAT_ENTRY_SCALE)` with `back.out(STAT_BOUNCE_FACTOR)`. `STAT_ENTRY_Y_OFFSET` (40–80 px below final) exists specifically to give the `back.out` overshoot something to _travel_; without a y offset, the bounce reads as a pure scale-pulse rather than a "thrown into place" stamp. The stat's final position is the _space the video vacated_ — `STAT_ENTRY_X ≈ 0.55–0.65 × viewport width` and `VIDEO_SLIDE_X ≈ 0.25–0.35 × viewport width` are mirror-image anchors around the viewport midline.
-
-## Phase 2 Seam: Static-Depth Variation of 3d-text-depth-layers
-
-The stat uses [3d-text-depth-layers](../rules/3d-text-depth-layers.md) in its **static-depth variation** — all layers built at composition setup time with their final offsets, no per-layer cascade, no `DEPTH_GROW_DUR` tween. Reason: the stat _enters as one object_ via the `back.out` bounce on `.stat-pos`. A per-layer cascade firing during the bounce overshoot produces visible inter-layer jitter as layers fade in at different progress points of the spring. The static variation keeps the stack visually coherent inside the bounce.
-
-The depth-stack lives inside `.stat-tilt`, _not_ `.stat-pos` or `.stat-breath`. Putting it inside `.stat-tilt` means the CSS rotation applies to the entire stack uniformly — if the depth-stack were outside the tilt, each layer's per-layer translate offset would not get rotated, breaking the depth illusion.
-
-## Phase 2 Seam: Stat Breath Gating
-
-The stat breath is [sine-wave-loop](../rules/sine-wave-loop.md)'s multiplicative onUpdate form, written to `.stat-breath` (the middle wrapper). Unlike a typical idle breath that runs until composition end, _this_ breath must be **gated off** at `PIVOT_AT`. After `PIVOT_AT`, Phase 3's exit tween on `.stat-pos` controls the stat — but breath is on `.stat-breath`, which is the inner wrapper, so an ungated breath would keep writing `scale` to the wrapper inside an opacity-faded `.stat-pos`. The visible result: a faint scale-shimmer continues _after_ the stat is gone, only noticeable if you look closely, but it's also a wasted onUpdate forever.
-
-```js
-// Inside the shared scene-ticker onUpdate (single tween, ease: "none"):
-const t = tl.time();
-if (t > STAT_BREATH_START && t < PIVOT_AT) {
-  const breath = 1 + Math.sin((t - STAT_BREATH_START) * STAT_BREATH_FREQ) * STAT_BREATH_AMP;
-  gsap.set(".stat-breath", { scale: breath });
-}
-```
-
-`STAT_BREATH_START − SLIDE_AT − STAT_ENTRY_DUR ≥ 0.1s` is the standard back.out settle gap — the breath's sine starts at zero offset (`sin(0) = 0`) so it composes cleanly with `.stat-breath`'s implicit `scale: 1.0`, but only if it isn't fighting the bounce tail.
-
-## Phase 3 Seam: Typing-Stage Entry Must Finish Before Characters
-
-Three things fire at `PIVOT_AT`: video exit, stat exit, typing-stage fade+scale entry. The characters of line 1 do **not** fire at `PIVOT_AT` — they fire at `TYPING_START_AT = PIVOT_AT + TYPING_STAGE_DUR`. The reason: the typing-stage `scale: 0.85–0.95 → 1` is small enough that characters typed during the scale-in would draw mid-zoom and look like they're being letterpress-stamped at a wrong scale. Let the stage land, _then_ type.
-
-The typing itself is inline because no rule covers this exact shape — five pre-existing DOM spans (main / accent / suffix / accent2 / line2), one proxy tween advancing a single `idx` value, an `onUpdate` that slices each span's `textContent` by its segment-relative offset.
-
-```js
-// Boundaries derived from SEG.*.length — never hard-code character counts.
-const BOUNDS = {
-  mainEnd:    SEG.main.length,
-  accentEnd:  SEG.main.length + SEG.accent.length,
-  suffixEnd:  /* ...etc */,
-  accent2End: /* end of line 1 — also when line 2 begins */,
-  line2End:   /* total chars */,
-};
-
-// One proxy, ease: "none". Each segment gets sliced by clamping (idx − segmentStart) into [0, segmentLength].
-```
-
-The single source of truth is `BOUNDS.line2End / TYPE_RATE` for total typing duration. Hard-coding character counts (rather than deriving from `SEG.x.length`) is how this scene most often breaks during copy edits — one extra word in `SEG.accent` and the cursor desyncs.
-
-## Phase 3 Seam: Cursor Blink Switches Spans By Index
-
-Two cursor elements (`cursor1`, `cursor2`) exist because cursor1 sits at the end of line 1 (after accent2) and cursor2 sits inside the pill on line 2. Only one is visible at a time, switched by the current typing index:
-
-```js
-const cursorVisible = Math.floor(t * CURSOR_BLINK_HZ * 2) % 2 === 0 ? 1 : 0;
-cursor1.style.opacity = i < BOUNDS.accent2End ? cursorVisible : 0;
-cursor2.style.opacity = i >= BOUNDS.accent2End && i < BOUNDS.line2End ? cursorVisible : 0;
-```
-
-The blink itself is deterministic from `tl.time()` — required by the universal HF determinism rule, not unique to this blueprint. What _is_ unique: the index-based span switching, which means the cursor blink is co-driven by both `t` (for the blink) and `i` (for _which_ cursor blinks). Both must come from the same onUpdate.
-
-## Phase 3 → 4 Seam: Pill Anchor Is Derived
-
-`PILL_AT = TYPING_START_AT + BOUNDS.accent2End / TYPE_RATE`. This is the most important derived constant in the scene — pick `TYPE_RATE` and `SEG.*` contents, and `PILL_AT` falls out. Do **not** tune `PILL_AT` independently as a free parameter; it must track the typing index. If `TYPE_RATE` changes (e.g. dropping from 30 to 20 chars/sec for dramatic effect), `PILL_AT` must be recomputed in the same revision.
-
-`PILL_DUR` should finish _before_ line 2 finishes typing (i.e. `PILL_AT + PILL_DUR < TYPING_START_AT + BOUNDS.line2End / TYPE_RATE`) so the pill frames the phrase as it lands rather than catching up after it has landed.
-
-## Key Values to Choose (Not Already in the Rules)
-
-Only listing values specific to this blueprint; standard rule parameters (`SCALE_AMP`, `Y_AMP_PX`, `LAYER_COUNT`, `OFFSET_X`, `BACK_ALPHA_*` — all in the linked rules) live there.
-
-- **VIDEO_SLIDE_X / STAT_ENTRY_X** — mirror-image around viewport midline. Video slides to `~0.25–0.35 × W`, stat lands at `~0.55–0.65 × W`. Asymmetric placements make one element look "demoted" rather than "yielded to."
-- **VIDEO_TILT_Y vs STAT_TILT_Y** — opposite sign. Same sign reads as flat layers, not surfaces.
-- **STAT_ENTRY_Y_OFFSET** — 40–80 px below final. Smaller → bounce reads as a scale pulse; larger → reads as gravity-dropped.
-- **TYPE_RATE** — 20–40 chars/sec; 30 ≈ "1 char/frame at 30 fps." Once chosen, recompute `PILL_AT` (it derives from this).
-- **SEG.\*** — the five-span split of line 1 + line 2. Edit copy here, not in the BOUNDS computation. BOUNDS rebuilds from `SEG.*.length` automatically.
-- **PILL_INITIAL_SCALE_Y** — 0.4–0.6 vertical squash. Lower than 0.4 reads as a horizontal line snapping outward (good for "stamp" feel); near 1.0 pre-empts the climax.
-- **PILL_GLOW_DUR** — `PILL_DUR + 0.1–0.3s`. The lag is the visual "bloom after silhouette" trick; equalize them and the glow feels like part of the silhouette instead of a halo.
-
-## Critical Constraints (ordered by failure frequency)
-
-- **`PILL_AT` is derived, not chosen** — `PILL_AT = TYPING_START_AT + BOUNDS.accent2End / TYPE_RATE`. Whenever `TYPE_RATE` or `SEG.*` changes, `PILL_AT` must be recomputed in the same edit. The most common edit failure is bumping `TYPE_RATE` without touching `PILL_AT`.
-- **Three nested wrappers per moving element** — `-pos` / `-float`-or-`-breath` / `-tilt`. Collapse any two and the float / breath onUpdate clobbers the slide / exit tween every frame. This is the most common structural bug.
-- **Stat breath must be gated to `STAT_BREATH_START < t < PIVOT_AT`** — otherwise breath keeps writing `scale` to `.stat-breath` forever, including after the stat opacity-fades out in Phase 3.
-- **Video float must be gated to `t < PIVOT_AT`** — same reason as the stat breath.
-- **Video slide and stat entry share `SLIDE_AT` exactly** — even a 0.1s offset between them kills the weight-transfer illusion.
-- **Static-depth variation of 3d-text-depth-layers, not cascade** — the per-layer cascade fights the `back.out` bounce.
-- **`depth-stack` lives inside `.stat-tilt`** — outside, the CSS rotation doesn't apply to back layers' offsets and the depth illusion breaks.
-- **BOUNDS derives from `SEG.*.length`** — never hard-code character counts. Copy edits desync the cursor otherwise.
-- **Opposite-sign Y tilts on video vs stat** — same-sign reads as a flat layer-shuffle, not two angled surfaces.
-- **Typing characters start at `TYPING_START_AT`, not `PIVOT_AT`** — letting them type during the typing-stage scale-in produces wrong-scale glyphs mid-zoom.
-
-## Spring → Ease Selection
-
-Four feels, four ease choices. Full spring → ease table lives in [hyperframes-animation/SKILL.md](../SKILL.md); blueprint defaults:
-
-- Video entry / slide / exit and pill scale → `power3.out` (different durations; same family makes the timeline read coherent)
-- Stat entry → `back.out(STAT_BOUNCE_FACTOR)`, 1.4 soft → 2.0 firm → 2.8 cartoony (the stat usually wants firm-to-cartoony)
-- Pill glow → `power2.out` (softer than `power3.out` so the bloom lags the silhouette)
-- Continuous motions (float, breath, cursor blink) → onUpdate `Math.sin` / floor-mod
-
-## Golden Sample
-
-- [metric-video-text-pivot.html](../examples/metric-video-text-pivot.html) — runnable composition with all placeholders filled in, single paused GSAP timeline, all four phases. Run this first, then change values — much faster than building from scratch.
diff --git a/skills/hyperframes-animation/blueprints/overwhelm-surround.md b/skills/hyperframes-animation/blueprints/overwhelm-surround.md
new file mode 100644
index 0000000000..ad0314332b
--- /dev/null
+++ b/skills/hyperframes-animation/blueprints/overwhelm-surround.md
@@ -0,0 +1,28 @@
+# overwhelm-surround — Overwhelm / Close-In
+
+**intent**: Convey overwhelm by accumulation. Recognizable subjects assemble, density markers scatter in to amplify "look how much," then the central subject morphs into the viewer's own avatar and elements close in from ALL sides — the frame feels surrounded, not zoomed-into. The emotional arc is recognition → claustrophobia.
+
+**roles served**
+
+- Problem (from `problem-mockup-overwhelm`): when the problem beat must first show "too many tools / too much surface area" and then put **the viewer inside it** — a literal swap of subject (product → person) followed by a closing-in that feels invasive. Reach for it when the pain is "you're buried," not "this metric is bad" (that's `dataviz-countup`).
+
+**duration**: 6–9s
+
+**shot structure** (a `[bg]` canvas; recognizable surfaces first, the viewer's avatar revealed underneath, then a radial crowd)
+
+- **Scene 1 (0.0–~1.6s) — recognizable assembly.** Three `[product mockups / surfaces]` assemble into something the viewer knows — staggered scale-in, the **center** one full-size, the two flanks smaller (~0.86). Each rides a low-amplitude float so they feel like live context, not a static collage. Camera static.
+- **Scene 2 (~1.6–3.0s) — density amplifies.** `[platform icons / logos]` scatter in around the mockups (staggered), used purely as **density markers** — "look how much surface area," not animated dials.
+- **Scene 3 (~3.0–4.6s) — the morph (signature move).** The CENTER mockup MORPHS: its content fades out, the container reshapes, and the viewer's `[avatar]` is revealed **underneath** — a literal swap of subject, product → person.
+- **Scene 4 (~4.6–end) — close-in.** `[task bubbles / demands]` close in from ALL sides toward the avatar (radial staggered entry). The avatar **stays put** while the bubbles invade — the claustrophobia comes from being surrounded, never from a camera push. Holds on the crowded state.
+
+**motion vocabulary**: staggered scale-in assembly; resting-scale-preserving low float; density-marker icon scatter; content-fade → container-reshape → reveal-anchor-beneath morph; radial close-in entry from all compass points; held crowded end-state.
+
+**rule mapping**
+
+- staggered mockup + icon entries (smooth settle onto their resting scale) → `spring-pop-entrance` (smooth-settle register) backed by `gsap-effects`
+- platform icons as density markers (positions pre-baked, scale/opacity only — NOT internal-parts animation) → `svg-icon-enrichment` (its DOM contract only)
+- center mockup → avatar morph (HF forbids `width`/`height` tweens → drive the reshape on `scaleX`/`scaleY`, anchor = the avatar layer rendered beneath) → `card-morph-anchor`
+- radial bubble close-in (positions baked once via `cos`/`sin`, staggered entry) → `gsap-effects` (radial layout) + `spring-pop-entrance` (per-bubble arrival)
+- low-amplitude float on background mockups/icons → `sine-wave-loop` (low-amplitude register — subtle jitter that composes onto each element's resting scale, never a `fromTo` yoyo that re-tweens to its start)
+
+**camera modifier**: camera-static — the close-in must read as the world crowding the subject, so the frame holds; a push-in would convert "surrounded" into "zoomed-into" and kill the claustrophobia.
diff --git a/skills/hyperframes-animation/blueprints/problem-mockup-overwhelm.md b/skills/hyperframes-animation/blueprints/problem-mockup-overwhelm.md
deleted file mode 100644
index ff213d6f1d..0000000000
--- a/skills/hyperframes-animation/blueprints/problem-mockup-overwhelm.md
+++ /dev/null
@@ -1,152 +0,0 @@
----
-id: problem-mockup-overwhelm
-role: problem
-duration_seconds: [4, 6]
-phases: 4
-visual_arc: mockups-appear → icons-scatter → morph-to-avatar → bubbles-overwhelm
-uses_rules: [card-morph-anchor, sine-wave-loop, svg-icon-enrichment]
-element_roles:
-  mockups: 3 product / platform mockups establishing the familiar context
-  icons: Platform / social icons scattered around mockups for density
-  morph_container: Center mockup that scales down + crossfades into the avatar
-  avatar: Character that represents the viewer / user
-  bubbles: Task / problem text bubbles surrounding the avatar
-when_to_use:
-  - Frame a problem by showing familiar complexity (too many platforms / tasks)
-  - Transition from "tools" to "person" — products → user experience
-  - Problem should feel physically overwhelming (surrounded by tasks)
-when_not_to_use:
-  - Problem is abstract, can't be shown with mockups
-  - No character / avatar representation needed
-  - Scene should stay product-focused
-triggers: [too many platforms, overwhelmed creator, complex workflow, surrounded by tasks]
----
-
-# Problem · Mockup Overwhelm (HyperFrames)
-
-This is a "familiar tools → person inside them → person crushed by them" arc: three product mockups assemble into something the viewer recognises, platform icons scatter in to amplify "lots of surface area," then the centre mockup collapses into the viewer's avatar and task bubbles close in from all sides. The emotional payoff is recognition followed by claustrophobia.
-
-Single paused timeline, four phases. The non-trivial seam is Phase 3, where the rule's `width`/`height` morph is forbidden by HF and we substitute a six-tween orchestration that reads as one event.
-
-## When to Use
-
-- Problem-framing scene where the viewer must first see "too many tools" before seeing "the person stuck with them"
-- Narrative needs a literal swap of subject (product → user) rather than a cut
-- The closing beat should feel surrounded, not zoomed-into — avatar stays put while bubbles invade
-
-## Orchestration
-
-Four phases, three rules referenced, and one inline pattern (radial bubble entry). The rule selection here is more about _substitution_ than _application_ — the canonical morph rule asks for width/height tweens that HF forbids, so we re-cast it through GSAP transform aliases.
-
-- **Phase 1 — mockups assemble**: inline staggered `back.out` spring-ins on `.mockup-left` / `.mockup-center` / `.mockup-right`, plus a finite [sine-wave-loop](../rules/sine-wave-loop.md) per mockup. We use the rule's **`onUpdate` multiplicative form** because each mockup's resting `scale` is set during entry (centre = 1, sides ≈ 0.86); float must compose onto that resting scale, never overwrite it (`fromTo` + yoyo would re-tween to its `from` state on every cycle and undo the entry). Amplitudes stay near the low end of the rule's range — these are background context, not headlines.
-- **Phase 2 — icons scatter**: use [svg-icon-enrichment](../rules/svg-icon-enrichment.md) **only for its DOM contract** (icons as targets with `scale` / `opacity` only, positions pre-baked in CSS). We are _not_ using any of the rule's internal-parts patterns (rotation / pulse / dash-flow) — the icons here are platform logos used as density markers, not animated dials. The only motion is a staggered `back.out` entry plus the same multiplicative float as the mockups. See "Phase 2 seam" for the icon-enrichment gap.
-- **Phase 3 — morph to avatar**: use [card-morph-anchor](../rules/card-morph-anchor.md) in a **non-uniform transform-alias substitution** of its canonical width/height tween. The rule's "old content fades out, container morphs, new content fades in, optional final fade reveals next-shot-anchor" pattern is intact end-to-end — but every dimension change becomes `scaleX`/`scaleY` on the container and the anchor is the avatar layer rendered underneath. See "Phase 3 seam" for the derivation and the aspect-mismatch trap.
-- **Phase 4 — bubbles overwhelm**: inline radial layout (no rule — a tight one-off pattern). `BUBBLE_TASKS` array of `{label, angle}` pairs, positions baked once at script load via `Math.cos`/`sin`, then a staggered `back.out` entry on `.task-bubble`. Each bubble gets the same multiplicative-float idle as the mockups. The radial geometry is unique to this scene and not worth ruling.
-
-## Phase Timing
-
-Boundaries in seconds. Design pass: pick `MORPH_DUR`, then walk backwards to `MOCKUPS_APPEAR` and forwards to `BUBBLES_START` from the gap rules below.
-
-| Phase | Start ≥                                           | Internal duration                     | Notes                                                   |
-| ----- | ------------------------------------------------- | ------------------------------------- | ------------------------------------------------------- |
-| 1     | `0` (or end of previous scene)                    | `MOCKUP_ENTRY_DUR + 2·STAGGER`        | Three spring-ins, last one anchors phase end            |
-| 2     | `phase1_end + ~0.1s`                              | `ICON_ENTRY_DUR + (n−1)·ICON_STAGGER` | Tight stagger; cluster reads as one event               |
-| 3     | `phase2_end + ICON_READ_TIME` (`~0.6–1.0s` dwell) | `MORPH_DUR`                           | Dwell required so density registers before it dissolves |
-| 4     | `MORPH_TRIGGER + BUBBLES_START_FRAC · MORPH_DUR`  | bubble stagger + dwell to end         | Must start after avatar layer is fading in              |
-
-The `~0.1s` gap between Phase 1 and 2 lets the last mockup's `back.out` overshoot rebound before icons start popping; without it the cluster reads as still-arriving when the icons land on top. The `ICON_READ_TIME` dwell (Phase 2 → 3) is the most important pacing knob in the scene: too short and "lots of platforms" never lands as a thought; too long and the morph feels like a separate scene. 0.6–1.0s is the comfortable range. The Phase 4 start is _fractional_ against `MORPH_DUR` (not a separate constant) so that as you tune `MORPH_DUR` the bubbles automatically slide with it — see Phase 3 seam for why `BUBBLES_START_FRAC > AVATAR_LAYER_IN_FRAC` is mandatory.
-
-## Initial DOM Nesting
-
-Two parallel layers, both kept in the DOM the entire scene; visibility is gated by opacity (seek can move time backward, conditional rendering would flicker):
-
-```
-#root
-  .bg                                ← static
-  .mockup-cluster                    ← Phase 1–3 (fades during morph tail)
-    .mockup-left  / .mockup-right    ← Phase 1 entry + float
-    .mockup-center                   ← Phase 1 entry + Phase 3 morph subject
-      .mockup-center-content         ← fades during first ~40% of morph
-    .platform-icon (× n)             ← Phase 2 entry + concurrent exit
-  .avatar-with-bubbles               ← starts opacity:0, fades in mid-morph
-    .avatar                          ← Phase 3 pop target
-    .task-bubble (× 6–8)             ← Phase 4 radial entry (built at script load)
-  .vignette                          ← static
-```
-
-`.mockup-center` carries z-index **above** `.avatar` (e.g. 25 > 20). The avatar only becomes visible when `.mockup-center` opacity reaches 0 — this is what sells the "one object morphing" illusion. **Use DOM order + opacity, never `z-index` tween** (see [card-morph-anchor's "don't snap z-index mid-fade"](../rules/card-morph-anchor.md#critical-constraints)).
-
-## Phase 2 Seam: Why svg-icon-enrichment Without Internal Parts
-
-The rule assumes the icon has named internal children (clock-hand, rec-dot, data-flow) that get the animation. Here the platform icons are flat logos — there's nothing inside to rotate or pulse. We reference the rule because its DOM/contract (each icon as a separate selector target, positions pre-baked as CSS `left`/`top`, GSAP touches only `scale` / `opacity` / `x` / `y`) is exactly what we need. The four signature motion patterns in the rule are not applied. **Flag for later**: the rule could grow a "decorative cluster" variation that documents this no-internal-parts usage; today, an agent reading the rule alone wouldn't know it covers this case.
-
-The source blueprint also references a `shared-scene-ticker-for-multiple-sine-motions` subsection on the rule — that subsection doesn't exist. For 6–10 floating icons + 8 floating bubbles + avatar breath, the right collapse is a single `phase: { p: 0 }` tween whose `onUpdate` writes `sin(p + offset_i)` into each element. Doing it as N independent yoyos works but spends N tweens for what is one clock.
-
-## Phase 3 Seam: Aspect-Mismatched Morph + Concurrent Exits + Avatar Handoff
-
-This is the core of the scene and the section worth re-reading. [card-morph-anchor](../rules/card-morph-anchor.md) tweens `width` / `height` / `borderRadius` / `background` in lockstep, then crossfades old/new content, then optionally fades the container to reveal `.next-shot-anchor`. Two things change in this blueprint:
-
-**1. The width/height tween becomes a scaleX/scaleY tween.** HyperFrames forbids tweening `width` / `height` (they cause layout reflows and are off the allowlist). The substitution:
-
-```
-MORPH_END_SCALE_X = AVATAR_DIAMETER / MOCKUP_CENTER_W
-MORPH_END_SCALE_Y = AVATAR_DIAMETER / MOCKUP_CENTER_H
-```
-
-The most common mistake is to derive a single uniform `MORPH_END_SCALE = AVATAR_DIAMETER / MOCKUP_CENTER_W` and apply it to both axes. That only works if mockup and avatar share an aspect ratio — and they almost never do (mockup is a phone, ~9:16; avatar is a circle, 1:1). Uniform scale on a phone aspect → the "circle" stays an ellipse at morph end and the handoff to the round avatar pops. **Use independent `scaleX` / `scaleY`**, derived from each axis independently.
-
-`borderRadius` tween is paint-only and allowed; tween to `"50%"` so the corner-rounding tracks the actual post-scale dimensions rather than baking a pixel value that drifts when `MOCKUP_CENTER_W` changes.
-
-**2. The content fade-out and final-fade phases of the rule are augmented with concurrent sibling exits.** The rule fades only `.content-old` during the first portion of the morph; here we fade `.mockup-center-content` _and_ `.mockup-left` _and_ `.mockup-right` _and_ `.platform-icon` in the same window. These are three separate `tl.to(...)` calls at the same `MORPH_TRIGGER` position, sharing `power2.out`. The constraint is that exits run **concurrent with the morph**, not before (would feel premature, like the scene aborted) and not after (would feel detached, like an outro layered on the climax). `EXIT_DUR_FRAC` of 0.5 (so exits complete halfway through the morph, leaving the morph container alone for its final shape and handoff tail) reads as a clean dissolve.
-
-**3. The `.next-shot-anchor` of the rule is `.avatar-with-bubbles`, gated by a fractional handoff.** Three derived constants must satisfy:
-
-```
-AVATAR_POP_DUR  < (1 − HANDOFF_TAIL_FRAC) · MORPH_DUR      // avatar at full scale before the handoff fade fires
-AVATAR_LAYER_IN_FRAC ≈ 0.5                                  // layer opacity starts halfway through morph
-BUBBLES_START_FRAC   > AVATAR_LAYER_IN_FRAC                 // avatar visible before bubbles arrive
-```
-
-The avatar pops (`scale: 0 → 1` with `back.out`) starting at `MORPH_TRIGGER` — the same instant as the morph, not after. By the time `.mockup-center` reaches `opacity: 0` at `MORPH_TRIGGER + (1 − HANDOFF_TAIL_FRAC) · MORPH_DUR`, the avatar is already at full scale underneath. Reversing this order (avatar pop _after_ mockup fade) introduces a single frame where neither object is visible — reads as a flicker.
-
-The rule's "❗ next-shot-anchor must be pixel-identical" caveat applies: `.avatar`'s final `width × height` (a circle of `AVATAR_DIAMETER`) must match the morph container's _visually scaled_ end size (`MOCKUP_CENTER_W · MORPH_END_SCALE_X` × `MOCKUP_CENTER_H · MORPH_END_SCALE_Y`). Because both axes are derived from `AVATAR_DIAMETER`, this is automatic _if you keep both `scaleX` and `scaleY` derived_ — bake them as `const` rather than recomputing per frame.
-
-## Key Values to Choose (Not Already in the Rules)
-
-Standard parameters (`OLD_FADE_FRAC`, `FINAL_FADE_FRAC`, `SCALE_AMP`, `Y_AMP_PX`, `BOUNCE_FACTOR`, etc.) are in the referenced rules; pick from their ranges. Only listing what this blueprint _introduces_:
-
-- **AVATAR_DIAMETER**: 180–280 px. Must match `.avatar`'s actual CSS dimensions exactly (see Phase 3 seam — any mismatch pops at handoff).
-- **MOCKUP_CENTER_W / MOCKUP_CENTER_H**: 250–360 px wide, phone or card aspect. Constraint: `AVATAR_DIAMETER / MOCKUP_CENTER_W` and `AVATAR_DIAMETER / MOCKUP_CENTER_H` should both land in 0.3–0.8; outside that range the morph reads as either a snap or a crawl.
-- **ICON_READ_TIME**: 0.6–1.0s dwell between icon entries settling and `MORPH_TRIGGER`. Below 0.6s "lots of platforms" doesn't register; above 1.0s the scene drifts.
-- **BUBBLE_TASKS**: 6–8 entries, each `{label, angle}`. Angles arranged with visual closure around the centre (cardinal + ordinal directions). Labels 3–6 words — these are _labels_, not sentences.
-- **BUBBLE_RADIUS**: distance from canvas centre to each bubble centre. Constraint: all bubbles must clear the safe area (≥ 60 px from canvas edges) at maximum scale; bubble width must not exceed the radial arc gap to neighbours, or adjacent bubbles overlap.
-- **BUBBLES_START_FRAC**: 0.5–0.7. Must be > `AVATAR_LAYER_IN_FRAC` so the avatar is already visible when bubbles arrive (see Phase 3 seam).
-- **EXIT_DUR_FRAC**: 0.4–0.6. Below 0.4 mockups/icons vanish before the morph commits; above 0.6 they linger into the avatar reveal.
-
-## Critical Constraints (ordered by failure frequency)
-
-- **`scaleX` and `scaleY` derived independently from `AVATAR_DIAMETER`** (see Phase 3 seam). Single uniform scale on aspect-mismatched morphs is the highest-traffic failure mode — the final shape is an ellipse, and the round avatar handoff pops.
-- **`.mockup-center` z-index > `.avatar` z-index, gated by opacity** (see DOM nesting). Reversing order or snapping z-index mid-tween produces a visible flicker.
-- **Concurrent exits, not sequential**: non-centre mockups and platform icons exit _during_ the morph at the same `MORPH_TRIGGER`, sharing duration ≈ `EXIT_DUR_FRAC · MORPH_DUR`. Sequential exits read as detached outros.
-- **Avatar pop fires at `MORPH_TRIGGER`, not after**: must reach full scale before the morph container's handoff fade. Constraint: `AVATAR_POP_DUR < (1 − HANDOFF_TAIL_FRAC) · MORPH_DUR`.
-- **`BUBBLES_START_FRAC > AVATAR_LAYER_IN_FRAC`**: bubbles must not arrive before the avatar is at least fading in, or they appear to orbit nothing.
-- **Bake every derived constant**: `MORPH_END_SCALE_X`, `MORPH_END_SCALE_Y`, bubble `x` / `y` positions, `BUBBLES_START`. Per-frame recomputation drifts and `Math.random` / `Date.now` / `performance.now` are forbidden anyway.
-- **6–8 bubbles**: fewer fails to convey overwhelm; more breaks the radial composition into clutter.
-- **Tween only allowlisted transforms** (`x` / `y` / `scale` / `scaleX` / `scaleY` / `rotation` / `opacity`) + `borderRadius` (paint-only) + `background` (paint-only). Never `width` / `height` / `left` / `top`.
-- **Idle floats are multiplicative `onUpdate`** on the mockups, icons, avatar, and bubbles — not `fromTo` + yoyo (would re-tween entry states on every cycle). For ≥ 8 simultaneous floats, consolidate into one shared phase tween.
-- **`borderRadius: "50%"`** rather than a baked pixel value — keeps the final corner-rounding aspect-correct against whatever post-scale dimensions land.
-
-## Spring → Ease Selection
-
-Four entry feels, one morph driver, one continuous loop. The full mapping lives in [hyperframes-animation/SKILL.md](../SKILL.md); this blueprint's choices:
-
-- Phase 1 mockup entries → `back.out(ENTRY_BOUNCE)` (subtle overshoot; 1.2–1.6)
-- Phase 2 icon entries → `back.out(ICON_BOUNCE)` (snappier; 1.4–1.8 so the cluster reads as alive)
-- Phase 3 morph driver → `power3.out` (no overshoot — avoid `back.out` / `elastic.out` here; per [card-morph-anchor](../rules/card-morph-anchor.md#how-to-choose-values), overshoot fights the dimensional change)
-- Phase 3 avatar pop → `back.out(AVATAR_BOUNCE)` (1.2–1.6, slightly firmer than mockups so it reads as a new subject)
-- Phase 4 bubble entries → `back.out(BUBBLE_BOUNCE)` (1.2–1.6)
-- All idle floats → `Math.sin` via `onUpdate` (phase tween `ease: "none"` — see [sine-wave-loop](../rules/sine-wave-loop.md#critical-constraints))
-
-## Golden Sample
-
-- [problem-mockup-overwhelm.html](../examples/problem-mockup-overwhelm.html) — runnable 6-second composition. Three phone-shell mockups, nine scattered platform icons, aspect-mismatched morph (`MORPH_END_SCALE_X ≈ 0.69`, `MORPH_END_SCALE_Y ≈ 0.34`) into a cyan-teal avatar circle, eight task bubbles in radial layout. Single paused GSAP timeline; one shared phase tween drives every float. Open it, change `AVATAR_DIAMETER` or `MOCKUP_CENTER_W`, and watch the morph re-derive — faster than building from scratch.
diff --git a/skills/hyperframes-animation/blueprints/proof-logo-chain.md b/skills/hyperframes-animation/blueprints/proof-logo-chain.md
deleted file mode 100644
index c5b7c411a8..0000000000
--- a/skills/hyperframes-animation/blueprints/proof-logo-chain.md
+++ /dev/null
@@ -1,189 +0,0 @@
----
-id: proof-logo-chain
-role: social-proof
-duration_seconds: [6, 10]
-phases: 5
-visual_arc: brand-decode → text-swap → logo-centers → avatars-network → brand-logos
-uses_rules: [hacker-flip-3d, vertical-spring-ticker, coordinate-target-zoom, avatar-cloud-network]
-element_roles:
-  anchor: Logo that threads across all shots, repositioning as the visual link
-  decode_text: Brand name revealed via hacker-flip alongside the anchor
-  swap_text: Replacement text sliding in after the decode (the claim phrase)
-  counter: Numeric/short label appearing with the avatar cloud
-  avatars: User avatars on an elliptical ring around the anchor
-  endorsement_logos: Partner / brand logos scrolling at the bottom
-when_to_use:
-  - Brand authority via multiple progressive proof points
-  - Logo threads multiple shots as the visual link
-  - 3-4 distinct claims packed in one continuous sequence
-when_not_to_use:
-  - Single-beat scene, no progression
-  - No persistent brand element available
-  - Authority from a single source only
-triggers: [brand reveal, social proof, "#1 tool", million users, trusted by]
----
-
-# Proof · Logo Chain (HyperFrames)
-
-This is a "decode → claim → community → endorsement" arc: the brand name decrypts itself next to the logo (authority asserts itself); a claim phrase slot-machines into the same row (the specific boast lands); text yields and the logo glides to dead center (it has earned the stage); avatars cascade into orbit around it with connection lines drawing outward (community materializes); partner logos quietly scroll along the bottom (third-party validation, no fanfare). The logo is the only element on screen the whole time — it is the through-line that makes four claims feel like one statement.
-
-Single paused GSAP timeline, five phases, every adjacent pair gets ~0.2-0.4s of breathing room because four different easings (`power3.out`, `back.out`, additive springs, dash-draw `power2.out`) cannot share boundaries cleanly.
-
-## When to Use
-
-- Authority / credibility scene that needs to stack 3-4 distinct proof points
-- A brand logo is available and should anchor viewer attention across content changes
-- The composition has 6-10s to breathe — under 6s and the recenter+cloud beats collide; over 10s the closing scroll drags
-- Not for: single-beat scenes, scenes without a persistent brand element, or a single-source authority (use a simpler reveal)
-
-## Orchestration
-
-Five phases, four rules + one inline beat. The logo (`.anchor-logo`) is shared state between every phase — it is the only element that no rule "owns" exclusively.
-
-- **Phase 1 — brand decode**: use [hacker-flip-3d](../rules/hacker-flip-3d.md) on the brand wordmark sitting in the right slot of the anchor row. The logo pops in via a plain inline `scale: 0 → 1` tween at `t=0` and the hacker-flip runs alongside it; we picked hacker-flip rather than typing or fade because the scene is announcing _who_ — the decryption framing reads as "this brand has been identified," which is the right opening register for a proof scene.
-- **Phase 2 — claim swap**: use [vertical-spring-ticker](../rules/vertical-spring-ticker.md) for the ticker word inside the claim (e.g. "#1 in {TickerWord1} ↔ {TickerWord2}"), `STEPS = 1` — a single slot-machine click is enough to communicate "the claim varies but the brand persists." Everything else in this phase is **inline**: the brand wordmark slides out, the new claim phrase fades in, the row shifts left, all three tweens at the same timeline position. See "Phase 2 Seam" — the swap glue is the core unique content of this blueprint.
-- **Phase 3 — logo recenters**: use [coordinate-target-zoom](../rules/coordinate-target-zoom.md) in its **shift-only variation** — we tween only the `.zoom-inner` counter-translate, we do **not** tween `.zoom-outer.scale`. There's no zoom here, just a translate; we still want the rule's "inner translates, outer scales" wrapper structure so an optional camera scale can be added later without rewiring. The text zone fades to 0 in parallel; the logo glides on `power2.out` toward true viewport center plus a small upward lift.
-- **Phase 4 — avatar cloud**: use [avatar-cloud-network](../rules/avatar-cloud-network.md). The non-trivial bit is that this rule's `CENTER_X / CENTER_Y` constants must equal the logo's post-Phase-3 position — see "Phase 3 → 4 Seam." The hub element from the rule is replaced by (or rendered on top of) the existing `.anchor-logo`; do not let the rule mount its own hub or you end up with two centerpieces.
-- **Phase 5 — brand endorsement strip**: **inline**, no rule. A staggered `back.out` entry on `.brand-logo` plus a finite `ease: "none"` x-tween on the strip. This isn't a rule because it's two tweens with no orchestration; making it one would be overengineering. Critical: the scroll uses a finite `duration` — see Critical Constraints; no `repeat: -1`.
-
-## Phase Timing
-
-All boundaries in seconds. Pick `DECODE_END` first (it's a function of charCount × stagger), back-derive the rest from the gaps below.
-
-| Phase | Start ≥                                | Internal duration              | Notes                                                         |
-| ----- | -------------------------------------- | ------------------------------ | ------------------------------------------------------------- |
-| 1     | `0`                                    | `DECODE_END`                   | Equals `(charCount−1) × CHAR_STAGGER + FLIP_DURATION`         |
-| 2     | `DECODE_END + ~0.3s`                   | `SWAP_DUR` (+ claim dwell)     | Three concurrent tweens share `SWAP_DUR` & `power3.out`       |
-| 3     | `SWAP_TRIGGER + SWAP_DUR + ~1.0s`      | `RECENTER_DUR`                 | The 1s is **viewer reading time** for the claim, not a buffer |
-| 4     | `RECENTER_TRIGGER + RECENTER_DUR`      | hub→avatars→lines→breath chain | No extra gap — rule's own hub fade absorbs the recenter tail  |
-| 5     | `LOGOS_TRIGGER` (= `dur − SCROLL_DUR`) | `SCROLL_DUR`                   | Anchored to the _end_ of the comp, not Phase 4                |
-
-Three of the four gaps deserve commentary because they are not interchangeable.
-
-The `+0.3s` between Phase 1 and Phase 2 is hacker-flip's _settle frames_: after the final character flips to its target glyph there is still residual `power3.out` tail on the rotateX tween. Triggering the slide-out before that tail decays produces a visible double-motion on the last character. 0.3s is the smallest gap that reads as "decoded, _then_ the next beat" rather than one continuous transition.
-
-The `+1.0s` between Phase 2 and Phase 3 is **not a spring-settle gap** — it is reading time. The claim phrase ("#1 in X for Y") is the densest piece of copy in the scene; if the logo starts moving while the viewer is still parsing it, both motions degrade. Tune by eye against the actual claim length: short claims ("Trusted by millions") can drop to 0.7s; long claims ("The #1 enterprise-grade workflow tool for engineering teams") need 1.2-1.5s.
-
-Phase 4 follows Phase 3 with no explicit gap because [avatar-cloud-network](../rules/avatar-cloud-network.md)'s `HUB_FADE_START` is the first beat _inside_ the rule — it acts as the gap. If you stack a manual buffer on top, the cloud feels detached from the recentering.
-
-Phase 5's start time anchors to the **end** of the composition (`compDuration − SCROLL_DUR`), not the end of Phase 4. The viewer should still be looking at the formed avatar network when the strip enters; a strip that lands during the cloud's idle breathing is far better than one that arrives 2s after everything stops moving.
-
-## Initial DOM Nesting
-
-Three wrapper layers. The middle one (`.anchor-shift`) is what Phase 2 tweens for the left-shift; the inner two are what Phase 1 and Phase 3 act on. Without `.anchor-shift` as a separate node, Phase 2's row-shift would compound onto Phase 3's logo-recenter and you'd have to subtract one from the other at design time — error-prone.
-
-```
-.anchor-stage              ← flex container, place-items: center
-  .anchor-shift            ← Phase 2 x-tween (row left-shift)
-    .anchor-logo (z:100)   ← Phase 1 scale pop, Phase 3 x/y translate
-      img                  ← {heroAsset}, drop-shadow filter
-    .anchor-text           ← Phase 3 opacity fade-to-0
-      .phase1-text         ← Phase 1 hacker-flip target (per-char spans)
-      .phase2-claim        ← Phase 2 fade-in, positioned absolutely at phase1-text's origin
-        .claim-lead / .claim-mid / .claim-ticker  ← ticker = vertical-spring-ticker mount
-```
-
-`.phase2-claim` is `position: absolute` inside `.anchor-text` so it occupies the same coordinate as `.phase1-text` — that's what makes the swap read as "in place." If it were a sibling in the same flex row, the layout would jump as the brand fades out.
-
-`.anchor-logo` carries `z-index: 100`. It must sit above the avatars (`z:2`) and the SVG connection lines (`z:1`) that Phase 4 introduces — without this, the lines visibly cross through the logo edge instead of terminating at it.
-
-## Phase 2 Seam: The Three-Tween Swap
-
-This phase has no rule of its own — the vertical-spring-ticker only owns the ticker word inside the claim. The actual swap (old text out, claim in, row shifts left) is inline glue and is the most failure-prone beat in the blueprint. Three tweens fire at the same timeline position, share `SWAP_DUR`, share `power3.out`:
-
-```js
-// 1. Old brand text exits right.
-tl.to(
-  ".phase1-text",
-  { x: SLIDE_DIST, opacity: 0, duration: SWAP_DUR * EXIT_RATIO, ease: "power3.out" },
-  SWAP_TRIGGER,
-);
-
-// 2. Whole row shifts left so the new (typically shorter) claim sits centered.
-tl.to(
-  ".anchor-shift",
-  { x: RECENTER_OFFSET, duration: SWAP_DUR, ease: "power3.out" },
-  SWAP_TRIGGER,
-);
-
-// 3. Claim fades in slightly after the exit starts.
-tl.fromTo(
-  ".phase2-claim",
-  { opacity: 0 },
-  { opacity: 1, duration: SWAP_DUR * FADE_RATIO, ease: "power2.out" },
-  SWAP_TRIGGER + SWAP_DUR * FADE_DELAY_RATIO,
-);
-```
-
-`RECENTER_OFFSET` is **the most common point of failure in this blueprint.** Theoretical baseline:
-
-```
-RECENTER_OFFSET ≈ -(claimWidth − brandWordmarkWidth) / 2
-```
-
-But the practical value is almost always smaller in magnitude than this baseline — the logo's optical center of mass pulls the perceived row center to its side, so the geometric center isn't the visual center. **Tune by eye after fonts are loaded, then bake as a `const`.** Do not derive it from `offsetWidth` at tween time: HF seeks every frame, and sub-pixel drift between sibling renders becomes visible jitter when an optional camera scale wraps the scene.
-
-`EXIT_RATIO` ~0.5 and `FADE_DELAY_RATIO` ~0.25 are the empirical values that produce a clean handoff. The brand text needs to be ~50% gone by the midpoint of the swap; the claim fade-in starts a quarter of the way in so there is no moment of empty row.
-
-## Phase 3 → Phase 4 Seam: Logo Position = Cloud Center
-
-This is the single most-likely-to-drift coordinate in the entire blueprint. Phase 3 translates the logo from its Phase-2 position to true viewport center plus a small lift; Phase 4's avatar cloud places its hub and connection lines around `(CENTER_X, CENTER_Y)`. **These two coordinates must be derived from the same source.** Two patterns work:
-
-```js
-// Pattern A — bake from layout math at author time (recommended)
-const CENTER_X = compositionWidth / 2;
-const CENTER_Y = compositionHeight / 2 + VERTICAL_ADJUST; // VERTICAL_ADJUST is negative
-const CENTER_OFFSET = -RECENTER_OFFSET + logoHalfWidth; // Phase 3's x-tween target on .anchor-logo
-
-// Pattern B — measure the logo's rect after Phase 3 (NOT recommended)
-// Requires playing the timeline to the Phase 3 endpoint, reading getBoundingClientRect(),
-// then registering the cloud rule. Fragile because HF may not have laid out fully yet.
-```
-
-`VERTICAL_ADJUST` is a small negative number (~−3% to −6% of compositionHeight). It lifts the logo above the canvas midline so the elliptical ring sits _around_ the logo with breathing room below for the partner strip; without the lift, Phase 5's strip overlaps the lower-arc avatars.
-
-If the cloud's `CENTER_X / CENTER_Y` and the logo's destination are off by even a few pixels, the connection lines miss the logo's edge — visible as either a gap (lines terminating in empty space) or a hairline overlap. Both are immediately legible as broken; bake from one source and reuse.
-
-## Phase 5 Seam: Anchor to End, Not to Phase 4
-
-The brand strip starts at `LOGOS_TRIGGER = compositionDuration − SCROLL_DUR`, **not** at the end of Phase 4. Phase 4's `BREATH_DUR` is sized to fill the remaining time after lines complete; the brand strip enters on top of that idle breathing, not after it. If the strip starts after the breathing ends, there's a dead beat in the middle of the scene that reads as "is this over?"
-
-The strip uses a finite `duration` x-tween, not `repeat: -1`. For a continuous-looking scroll, oversize the strip to ~2× viewport width and let it travel just the visible distance — the trail of unseen logos preserves the illusion of "the list continues." Direction is negative (right-to-left); positive direction reads as content arriving rather than content existing.
-
-Per-logo stagger uses `back.out(BOUNCE_FACTOR)` with a low coefficient (1.2-1.5). The pop is subtle on purpose — partner logos are validation, not the focal beat; a firm spring here would compete with the avatar network for attention.
-
-## Key Values to Choose (Not Already in the Rules)
-
-Only blueprint-unique parameters listed. Standard rule parameters (`FLIP_DURATION`, `CHAR_STAGGER`, `STEP_DUR`, `AVATAR_BOUNCE`, etc.) live in their rules — go there.
-
-- **LOGO_SIZE**: 5-12% of viewport min-dimension. Under 5% loses presence; over 12% crowds the hacker-flip wordmark in Phase 1. The logo never changes size after Phase 1's `scale: 0 → 1` pop, so this is also its final on-screen size.
-- **ANCHOR_GAP**: flex gap between logo and text zone in Phases 1-2, ~15-25% of `LOGO_SIZE`. Pairs visually with the logo's optical weight; smaller gaps make the pairing feel like a single mark, larger gaps make it feel like two separate elements.
-- **RECENTER_OFFSET**: tuned by eye, baked as `const`. Theoretical baseline = `-(claimWidth − brandWordmarkWidth) / 2`; practical value typically 60-80% of that magnitude. See Phase 2 Seam.
-- **CENTER_OFFSET**: derived once from `compositionWidth / 2 + (−RECENTER_OFFSET) + logoHalfWidth`, baked as `const`.
-- **VERTICAL_ADJUST**: −3% to −6% of compositionHeight. Equals `cloudCenterY − compositionHeight / 2` exactly — both numbers must come from the same expression.
-- **SLIDE_DIST**: 100-300 px positive; how far the old brand wordmark exits to the right. Smaller than viewport width is fine — the opacity tween in the same tween hides the late frames.
-- **EXIT_RATIO / FADE_RATIO / FADE_DELAY_RATIO**: 0.5 / ~0.5 / ~0.25 are the empirical defaults. Tune EXIT_RATIO down if the brand text is long (it needs more time to clear) and FADE_DELAY_RATIO up if the claim is dense (defer its arrival a little).
-
-## Critical Constraints (ordered by failure frequency)
-
-- **`CENTER_X / CENTER_Y` and Phase 3's logo destination derive from the same source.** Independent derivations drift by a few pixels and the connection lines visibly miss the logo edge. This is the #1 failure mode.
-- **`RECENTER_OFFSET` is a baked `const`.** Per-frame derivation (e.g. `phase2.offsetWidth − phase1.offsetWidth`) drifts sub-pixels across renders → visible jitter when wrapped by any camera scale.
-- **Logo z-index ≥ 100, above avatars (z:2) and lines (z:1).** Otherwise the SVG connection lines appear to pass _through_ the logo edge instead of terminating at it.
-- **`.phase2-claim` is positioned absolutely at `.phase1-text`'s origin.** As a sibling it would shift the row geometry when brand opacity drops to 0 — the swap would read as "old text out, layout jumps, new text in" rather than "in-place exchange."
-- **Phase 5 uses finite duration, never `repeat: -1`.** Oversize the strip if you need the visual of continuous scroll. The HF render harness will not respect infinite repeats deterministically.
-- **Phase 2 reading dwell ≥ 1.0s before Phase 3.** This is the most-violated _timing_ constraint, not a value constraint — agents tend to treat it as a spring-settle buffer and shrink it. It is viewer reading time and must be tuned to the actual claim length.
-- **Phase 1 logo pop is inline, not a rule.** A single `scale: 0 → 1` `back.out` tween on `.anchor-logo` at `t=0`. Promoting this to a rule reference adds noise without adding orchestration.
-
-## Spring → Ease Selection
-
-Four distinct feels across the five phases. Full mapping table in [hyperframes-animation/SKILL.md](../SKILL.md); this blueprint's defaults:
-
-- Phase 1 hacker-flip — `power3.out` per char (rule's default)
-- Phase 2 swap — `power3.out` on exit + shift, `power2.out` on claim fade
-- Phase 3 recenter — `power2.out` (smoother than power3 here; the logo glide should feel weighty, not snapped)
-- Phase 4 avatar pop — `back.out(BOUNCE)` per avatar (rule's default)
-- Phase 5 partner pop — `back.out(1.2-1.5)` low coefficient; scroll is `ease: "none"`
-
-## Golden Sample
-
-- [proof-logo-chain.html](../examples/proof-logo-chain.html) — runnable composition with concrete values for every named constant above; single paused GSAP timeline drives all five phases. Run it first, then change values — much faster than building from scratch.
diff --git a/skills/hyperframes-animation/blueprints/spatial-pan-stations.md b/skills/hyperframes-animation/blueprints/spatial-pan-stations.md
new file mode 100644
index 0000000000..07cf09120b
--- /dev/null
+++ b/skills/hyperframes-animation/blueprints/spatial-pan-stations.md
@@ -0,0 +1,37 @@
+# spatial-pan-stations — Spatial Pan / Stations
+
+**intent**: Pre-place a sequence of labeled stations on one oversized canvas, then traverse it with a single virtual camera — repeated lateral/diagonal pans that center each station in turn and reveal a callout at every stop, landing held on a final station.
+
+**roles served**
+
+- Hook (from hook-pan-timeline / #1 Hook_02): a horizontal timeline of evenly-spaced milestones, left-panned beat by beat, each marker getting a spring-popped callout, landing on the present moment ("evolution / milestone walk leading up to us").
+- Problem (from problem-camera-pan-stations / #8 Problem_01): a connected web of pain "stations" linked by hand-drawn leading lines, diagonally panned station to station, ending on a tangled scribble knot ("too many disconnected steps — it's a mess").
+- Product_Intro (from concept-demo-decode-pan): a two-shot strip bridged by ONE lateral pan — shot 1 holds a static phrase whose accent word 3D-flap-DECODES (the concept lands), then the camera pans across the strip (with background parallax) into shot 2, where a cursor drives a live typing demo. Pairs this pan with `cursor-ui-demo`'s focal-locked tracked typing.
+
+**duration**: 7–10s (union of Hook 8–10s, Problem ~7s, concept-demo ~7s)
+
+**shot structure**
+One oversized flat canvas on a solid `[bg color]`; all stations/markers pre-placed in world space; `[accent color]` text + simple line-icons; one virtual `.world` camera pans ease-in-out between stops. Each station holds ~1.0s.
+
+- Scene 1 (0.0–~1.0s): Camera opens on station 1 — `[label 1 / first step]` centered. A reveal lands on it (see variants). Camera then begins to PAN toward station 2, sliding station 1 out of frame.
+- Scene 2 → Scene N-1 (~1.0s each): Camera PANS (ease-in-out) to center the next station; on arrival its `[label k]` (+ optional `[secondary label]`) is REVEALED with the role reveal. Repeat per station.
+- Scene N (final, ~last beat): One last pan lands on the terminal station; the final `[callout / landing element]` reveals and HOLDS to the end. Camera goes static on the punchline.
+
+- Variant — Hook: stations sit as evenly-spaced `[markers]` on a thin horizontal `[timeline]` (lower third); pans are LEFT-only along the single axis (timeline scrolls left). Each callout is a bordered `[callout box]` + downward triangle (offset drop-shadow) that SPRING-POPS up (scale 0→100%, bouncy overshoot, transform-origin at triangle tip) reading `[label k]`; a `[secondary label, e.g. year]` fades in and RISES above it. Some mid markers arrive as plain static text revealed by the pan alone (no box). Final scene lands on the `[present-day label]`, springs, holds.
+- Variant — Problem: stations are scattered across a 2D web; pans are DIAGONAL, STEERED by `[accent color]` hand-drawn lines — each station has a rough write-on line/arrow that draws toward the next and the camera follows it (Scene 1 also draws a loop/circle around the headline's key word). Each station = a white `[line-icon]` above its `[label]`, revealed plainly by the pan (no spring box). Final scene: the accent line spirals into a dense chaotic SCRIBBLE KNOT centered on the field; camera holds static on the tangle (visual punchline).
+
+**motion vocabulary**
+repeated ease-in-out camera pans (horizontal-left for Hook, diagonal-steered for Problem) across one large static canvas; pre-placed stations sliding through frame via the pan; spring-overshoot callout pop with triangle-tip origin (Hook); rise-and-fade secondary label (Hook); plain labels/icons arriving via the pan alone; rough hand-drawn "write-on" leading lines/arrows + loop/circle key-word mark (Problem); terminal chaotic-scribble knot draw (Problem); static hold on the final station/punchline.
+
+**rule mapping**
+
+- camera pan / traverse across the canvas (primary) → `viewport-change` (single `.world` wrapper transform; PAN mode)
+- sequencing the repeated pan beats into stops → `multi-phase-camera`
+- centering each station as the pan target → `coordinate-target-zoom` (used as pan-to-target, no zoom)
+- spring-overshoot callout pop, triangle-tip origin (Hook) → `spring-pop-entrance`
+- rise-and-fade secondary label + plain per-station label/icon reveals via the pan → `discrete-text-sequence`
+- hand-drawn leading lines / arrows / loop-circle key-word mark / terminal scribble knot (Problem) → `svg-path-draw`
+- station line-icons (Problem) → `svg-icon-enrichment`
+- static hold on the final station / punchline → (no motion; sustained held frame, no rule needed)
+
+**camera modifier**: The pan IS the camera. One `.world` virtual-camera transform in PAN mode — `viewport-change` — sequenced across stops by `multi-phase-camera`, each stop targeted via `coordinate-target-zoom` (pan-to-target). No depth push-in (that distinguishes this from the cluster-push-in / dataviz-pushthrough blueprints).
diff --git a/skills/hyperframes-animation/blueprints/takeover-ticker-displace.md b/skills/hyperframes-animation/blueprints/takeover-ticker-displace.md
deleted file mode 100644
index 6e2724ab91..0000000000
--- a/skills/hyperframes-animation/blueprints/takeover-ticker-displace.md
+++ /dev/null
@@ -1,168 +0,0 @@
----
-id: takeover-ticker-displace
-role: takeover
-duration_seconds: [5, 8]
-phases: 4
-visual_arc: text-assembly → ticker-cycle → hero-displacement → idle
-uses_rules: [vertical-spring-ticker, reactive-displacement, sine-wave-loop]
-element_roles:
-  text_group: Combined typewriter + ticker that builds textual context, then gets displaced as a unit
-  hero: Visual element (logo, icon, product) that enters from off-screen and takes over by pushing text away
-when_to_use:
-  - Text cycles through multiple options before a hero takes over
-  - Hero feels like it has physical "weight" — it pushes content aside
-  - Transition from text to visual should be a physical collision, not a fade
-when_not_to_use:
-  - Text and hero coexist throughout — see brand-reveal-assemble-zoom
-  - Camera zoom required (this uses entry translation)
-  - Multiple hero elements enter simultaneously
-  - Text should exit voluntarily (fade / slide)
-triggers:
-  [rolling text then logo, push text away, slot machine, text cycles, logo enters forcefully]
----
-
-# Takeover · Ticker Displace (HyperFrames)
-
-This is a "context-build → cycling beat → collision → idle" arc: a typewriter lays down a lead-in phrase, an accent word ticks through a slot-machine of options to suggest "many things this could be," then a hero crashes in from off-screen and physically shoves the text aside — saying "actually, this is what it is." The hero then settles into ambient breathing so the climax doesn't go dead.
-
-One paused GSAP timeline, four phases. The two non-adjacent rules (ticker, displacement) hand off through a shared parent transform; sine-wave-loop closes out as a multiplicative idle.
-
-## When to Use
-
-- Scene has a static lead-in phrase + a cycling accent word, all of which should be physically replaced (not faded) by a hero
-- The takeover should read as a collision — the hero arrives with momentum and the text reacts to it
-- Final frame is the hero alone with subtle idle motion
-- Not for: hero and text coexist throughout (see [brand-reveal-assemble-zoom](brand-reveal-assemble-zoom.md)), camera-zoom narrowing, or multi-hero entries
-
-## Orchestration
-
-This scene chains four motions; each maps to a rule or an inline pattern:
-
-- **Phase 1 — typewriter lead-in**: inline, no rule. The lead-in is one static phrase, so we use the **smooth-slice variation** at the bottom of [discrete-text-sequence](../rules/discrete-text-sequence.md) (continuous `Math.floor(progress)` slice, not the state-array form). The full rule's machinery is overkill for a single phrase with no typos or pauses. See "Phase 1 Seam" for the one-character pop guard.
-- **Phase 2 — accent-word ticker**: use [vertical-spring-ticker](../rules/vertical-spring-ticker.md) for the rolling accent word. The rule's default footer-reveal at the tail is NOT used — Phase 3 takes its place. `STEPS` here is the number of _options_ the hero is going to replace; pick 2–3 (more reads as filler).
-- **Phase 3 — hero crashes in, text-group ejected**: this is the blueprint's core glue and the only non-trivial seam. Use [reactive-displacement](../rules/reactive-displacement.md), but **NOT** its default `back.out` driver-with-derived-onUpdate form. We want the source's "heavy mass" feel (the hero lands rather than zips), which is best expressed in GSAP as a longer `HERO_DUR` with `power2.out` — three independent tweens sharing the same start time. See "Phase 3 Seam" below.
-- **Phase 4 — hero idle breathing**: use [sine-wave-loop](../rules/sine-wave-loop.md) in its **multiplicative `onUpdate` form**, and specifically the **dual-frequency variation** (different periods on `scale` and `rotation`). The hero lands at `HERO_FINAL_SCALE > 1` from Phase 3's overshoot — the breath must compose onto that final scale, not yoyo around 1. See "Phase 4 Seam" below.
-
-## Phase Timing
-
-All boundaries are in seconds.
-
-| Phase | Start ≥                                          | Internal duration                     | Notes                                                                               |
-| ----- | ------------------------------------------------ | ------------------------------------- | ----------------------------------------------------------------------------------- |
-| 1     | `0`                                              | `TYPE_DUR`                            | Smooth slice; `TYPE_START_LEN` ≥ 1 to avoid 1-char pop                              |
-| 2     | `TYPE_END + ~1.0s` (`READ_BEAT`)                 | `(STEPS-1) × STEP_SPACING + STEP_DUR` | Reader needs ~1s on the static phrase before the ticker steals attention            |
-| 3     | `TICKER_END + ~0.8s` (`SETTLE_BEAT`)             | `HERO_DUR`                            | Last ticker word must read; `back.out` tail must settle before collision            |
-| 4     | `DISPLACE_AT + HERO_DUR + ~1.0s` (`SPRING_TAIL`) | `TOTAL - IDLE_START`                  | `power2.out` decays slowly — start sine too soon and it fights the perceived spring |
-
-The `READ_BEAT` (~1s) between Phase 1 and 2 is non-negotiable — without it, the static phrase is still being absorbed when the ticker starts rolling, and the viewer reads neither. The `SETTLE_BEAT` (~0.8s) between Phase 2 and 3 is the most-skipped value in this blueprint: the last ticker word lands with a `back.out` overshoot that takes ~0.4s to fully damp, plus the eye needs at least 0.4s to read it. Anything less and the takeover feels like a hard cut. The `SPRING_TAIL` (~1.0s) between Phase 3 and 4 is the largest gap because `power2.out` over `HERO_DUR` (0.8–1.2s) has a long visual tail even after the tween mathematically ends — sine started during that tail produces visible chatter on scale.
-
-## Initial DOM Nesting
-
-The displacement target is the **parent flex row**, not the typewriter or ticker individually. That's what makes Phase 3 work as a single collision rather than three desynced reactions, and it's the most common structural mistake in this blueprint.
-
-```
-.stage                       ← absolute fill, overflow: hidden
-  .text-group                ← Phase 3 push + fade target (single transform)
-    .typewriter
-      .typewriter-text       ← Phase 1 smooth-slice target
-    .ticker-window           ← height = ITEM_HEIGHT, overflow: hidden
-      .ticker-stack          ← Phase 2 translateY target
-        .ticker-item × N
-  .hero                      ← z-index: 20; Phase 3 entry + Phase 4 breath target
-```
-
-`.stage` is `position: absolute; inset: 0; overflow: hidden` — Phase 3 throws both `.text-group` and `.hero` past the frame edge; without `overflow: hidden` they leak into adjacent scenes. `.hero` carries `z-index: 20` explicitly (not relying on DOM order) — during the brief overlap window in Phase 3, the hero must be in front, otherwise the text's fading edges peek through.
-
-## Phase 1 Seam: Smooth-Slice Variation (rule gap)
-
-The frontmatter of [discrete-text-sequence](../rules/discrete-text-sequence.md) describes the multi-state `{text, t}` array form, but the smooth-slice form (a single tween from `0` to `FULL_TEXT.length`, `onUpdate` writes `FULL_TEXT.slice(0, Math.floor(progress))`) is what we use here. One sentence: tween a `{progress}` proxy linearly with `ease: 'none'`, `Math.floor` the result, only write `textContent` when the slice actually changed (avoids React-style re-render thrash).
-
-Set `TYPE_START_LEN ≥ 1` — starting from 0 produces a single-character flash on the first frame as the viewport renders before any tween has fired. Starting from 1 hides this.
-
-## Phase 2 Seam: Suppressing the Rule's Footer
-
-[vertical-spring-ticker](../rules/vertical-spring-ticker.md) ships with a trailing `.brand` footer reveal — omit it here. Phase 3's collision replaces that beat. Also: the rule scopes everything inside its own `.stack` flex column; in this blueprint the ticker is one cell of a flex row (`.text-group`) sharing space with the typewriter, so use only the rule's `.ticker` + `.ticker-stack` markup, not its outer `.stack` wrapper. `ITEM_HEIGHT` must equal both the container height and per-item height exactly — covered in the rule, but worth re-checking because the row context makes height mismatches less visually obvious during dev.
-
-Pick `STEPS = optionCount − 1` (you can't roll past your last item) and `STEP_SPACING ≤ STEP_DUR` for the additive-spring "click click" cadence the rule describes. The accent word's `font-weight` + `color` should distinguish it from the typewriter — readers should perceive "static base + rotating accent," not "two strings being equally typed."
-
-## Phase 3 Seam: Collision (the blueprint's core glue)
-
-The rule's default form uses a single `back.out` driver tween with `onUpdate` deriving both intruder and victim positions from `driver.p`. We **deliberately diverge** from that here, for two reasons.
-
-**Why `power2.out` instead of `back.out`:** the source pattern this blueprint emulates uses a heavy-mass spring (the hero feels weighty, lands rather than bounces). `back.out` overshoots and rebounds, which reads as "lightweight + springy" — the wrong physical metaphor. A longer `HERO_DUR` (0.8–1.2s) with `power2.out` gives the gentle high-inertia deceleration that reads as mass.
-
-**Why three independent tweens instead of one driver:** with `power2.out` (no overshoot, no oscillation), the math `driver.p × victimEnd` and `(driver.p × N)` produce monotonic linear-ish progress with no rebound — so we can express each motion as its own tween and let GSAP's clock keep them in sync. They must all start at `DISPLACE_AT` exactly; drift their start times by even a frame and the collision reads as two events.
-
-```js
-tl.fromTo(
-  ".hero",
-  { x: OFFSCREEN_X, scale: HERO_START_SCALE, rotation: HERO_START_ROT, opacity: 0 },
-  {
-    x: 0,
-    scale: HERO_FINAL_SCALE,
-    rotation: 0,
-    opacity: 1,
-    duration: HERO_DUR,
-    ease: "power2.out",
-  },
-  DISPLACE_AT,
-);
-
-tl.to(
-  ".text-group",
-  { x: PUSH_DIST, duration: HERO_DUR * PUSH_FRACTION, ease: "power2.out" },
-  DISPLACE_AT,
-);
-
-tl.to(
-  ".text-group",
-  { opacity: 0, duration: HERO_DUR * FADE_FRACTION, ease: "power2.out" },
-  DISPLACE_AT,
-);
-```
-
-`PUSH_FRACTION = 0.4–0.5` and `FADE_FRACTION ≤ PUSH_FRACTION` — these recreate the rule's `VICTIM_FRACTION` for the victim's exit. The text completes its push at roughly half the hero's duration, so by the time the hero centers the text is gone. If `PUSH_FRACTION ≥ 0.7` the two motions look parallel rather than causal — the most common failure mode.
-
-**Direction coupling:** `sign(OFFSCREEN_X) = -sign(PUSH_DIST)`. The hero enters from positive X → text shoves into negative X. Same axis, opposite signs. Reverse either and the momentum-transfer metaphor breaks.
-
-## Phase 4 Seam: Multiplicative Breath at Non-1 Scale
-
-Phase 3 leaves the hero at `scale: HERO_FINAL_SCALE` (typically 1.0–1.4 — overshoot is part of "landing"). The breath must multiply onto this resting state, not yoyo around 1. [sine-wave-loop](../rules/sine-wave-loop.md)'s multiplicative `onUpdate` form does exactly this; the `fromTo` + yoyo form would re-apply `scale: 1` on every cycle, erasing the impact landing.
-
-Use the **dual-frequency variation** (two separate `Math.sin` calls in one `onUpdate`, one driving scale, one driving rotation). The rule documents the multi-octave version primarily for scale-stacking; here we want scale + rotation oscillating _independently_, with **incommensurate periods** (no simple integer ratio). Why: synchronized scale-and-rotation reads as a single "tilt-pulse" beat — mechanical. Incommensurate periods (e.g. `SCALE_PERIOD = 1.7s`, `ROTATE_PERIOD = 2.3s`) keep the two cycles drifting against each other, which is what reads as "alive but resting."
-
-Compute idleTime as `Math.max(0, tl.time() - IDLE_START)` inside the onUpdate so that timeline seeks before `IDLE_START` don't produce negative-phase sine values.
-
-## Key Values to Choose (Not Already in the Rules)
-
-Only parameters specific to this blueprint:
-
-- **HERO_FINAL_SCALE**: 1.0 (no impact, feels light) → 1.2 (visible presence at rest) → 1.4 (heavy landing). Phase 4 breath multiplies onto this, so values >1.4 combined with `SCALE_AMP` >0.04 can push the hero past safe raster resolution.
-- **PUSH_DIST**: 100–300 px, sign opposite `OFFSCREEN_X`. Smaller than half the viewport — this isn't an exit, it's a shove; the text is gone via opacity, not via leaving the frame.
-- **PUSH_FRACTION / FADE_FRACTION**: 0.4–0.5 and `FADE_FRACTION ≤ PUSH_FRACTION` so the fade leads the push by a hair (text gets ghostly before it finishes sliding, not after).
-- **READ_BEAT / SETTLE_BEAT / SPRING_TAIL**: ~1.0s, ~0.8s, ~1.0s respectively. These are the inter-phase buffers; do NOT shrink them to fit a tight `TOTAL` — extend `TOTAL` instead.
-- **SCALE_PERIOD / ROTATE_PERIOD**: pick two values in 1.5–2.3s with NO integer ratio (e.g. 1.7 and 2.3, not 1.5 and 3.0). This is what produces organic breathing rather than mechanical pulsing.
-
-## Critical Constraints (ordered by failure frequency)
-
-- **Three Phase-3 tweens share `DISPLACE_AT` exactly** — drifting start times destroys the collision read. The most common bug: agents stagger them by 0.05s "to feel more natural" and the result feels less collisional, not more.
-- **`PUSH_FRACTION ≤ ~0.6`** — beyond this the push reads as parallel motion, not reaction. 0.4–0.5 is the sweet spot.
-- **Phase 4 breath multiplies, never yoyos around 1** — would erase `HERO_FINAL_SCALE` and undo Phase 3's landing. See Phase 4 Seam.
-- **`sign(OFFSCREEN_X) = −sign(PUSH_DIST)`** — momentum transfer requires opposite signs on the same axis.
-- **`SCALE_PERIOD : ROTATE_PERIOD` is non-integer** — equal or simple-ratio periods lock and read as mechanical.
-- **`.hero` z-index ≥ 20 (explicit, not DOM-order)** — during the Phase 3 overlap window the text's fading edges will peek through otherwise.
-- **Push the `.text-group` parent, not its children individually** — children inherit the parent transform and stay locked together; pushing them separately desynchronizes the collision.
-- **Ticker container height = item height = `ITEM_HEIGHT`** — covered in the rule but worth re-checking in this blueprint's row layout where partial-item overflow can read as a row-baseline issue rather than a ticker bug.
-
-## Spring → Ease Selection
-
-Four phases, four feels. Full table in [hyperframes-animation/SKILL.md](../SKILL.md):
-
-- Phase 1 typewriter: `ease: "none"` (linear, sine isn't involved — the discreteness comes from `Math.floor`)
-- Phase 2 ticker steps: `back.out(BOUNCE_FACTOR)` per step (the rule's default)
-- Phase 3 collision: `power2.out` over a long `HERO_DUR` (heavy-mass equivalent; NOT `back.out`)
-- Phase 4 idle: dual `Math.sin` in one `onUpdate`, incommensurate periods
-
-## Golden Sample
-
-- [takeover-ticker-displace.html](../examples/takeover-ticker-displace.html) — runnable composition with concrete values for every named constant above; single paused GSAP timeline drives all four phases. Run this first, then change values — much faster than building from scratch.
diff --git a/skills/hyperframes-animation/blueprints/ticker-takeover.md b/skills/hyperframes-animation/blueprints/ticker-takeover.md
new file mode 100644
index 0000000000..f4e0984685
--- /dev/null
+++ b/skills/hyperframes-animation/blueprints/ticker-takeover.md
@@ -0,0 +1,29 @@
+# ticker-takeover — Ticker Displace / Takeover
+
+**intent**: A context phrase types in, an accent word cycles through options like a slot-machine to suggest "this could be many things," then a hero CRASHES in from off-screen and physically shoves the text aside — "actually, this is what it is." A collision, not a fade.
+
+**roles served**
+
+- Hook (from `takeover-ticker-displace`): when a static lead-in phrase + a cycling accent word should be **physically replaced** (not cross-dissolved) by a hero arriving with momentum, and the final frame is the hero alone. Reach for it when the takeover should read as an impact.
+- Brand_Outro: the same collision used as a sign-off — options cycle, the brand mark crashes in and owns the frame.
+
+**duration**: 5–7s
+
+**shot structure** (a `[bg]` canvas; one text group on the left/center that gets ejected by an incoming hero)
+
+- **Scene 1 (0.0–~1.4s) — context build.** A typewriter lays down a `[lead-in phrase]` character-by-character (smooth, no typos — selling confidence, not human chaos). Camera static.
+- **Scene 2 (~1.4–3.0s) — the cycling beat.** An `[accent word]` slot inside the line ticks through 2–3 `[options]` on a vertical spring-roll (each click a new word), suggesting breadth — "many things this could be." (More than ~3 reads as filler.)
+- **Scene 3 (~3.0–4.2s) — the collision (signature move).** A `[hero]` crashes in from off-screen with momentum and physically SHOVES the whole text group aside — the text reacts to the impact (gets displaced), it does not fade. The hero lands **heavy** — a longer settle, not a zip — so it reads as mass, not speed.
+- **Scene 4 (~4.2–end) — the hero alone.** The hero settles dead-center and reads still. Holds.
+
+**motion vocabulary**: smooth character typewriter; vertical spring-ticker word roll (2–3 steps); off-screen hero crash-in with momentum; reactive displacement of the struck text group; heavy long-tail landing (not bouncy); dual-axis subtle jitter on the resting hero.
+
+**rule mapping**
+
+- smooth single-phrase typewriter lead-in → `discrete-text-sequence` (smooth-slice / continuous `floor(progress)` form — no typo machinery)
+- accent word slot-machine cycling through options → `vertical-spring-ticker` (`STEPS` = number of options the hero will replace; the rule's footer-reveal is unused — Scene 3 takes its place)
+- hero shoves the text group aside on impact → `reactive-displacement` (the text is the displaced mass; express the hero's "heavy land" as a longer `power2` settle, not the rule's default `back.out`)
+- hero's fast off-screen crash-in → `motion-blur-streak` (directional velocity blur resolving sharp as it lands)
+- resting-hero aliveness → `sine-wave-loop` (low-amplitude dual-frequency register — scale + rotation jitter composing onto the hero's final landed scale; never a yoyo around 1)
+
+**camera modifier**: camera-static — the displacement happens in element space (the hero moves the text), so there is no real camera move; the impact is the only motion.
diff --git a/skills/hyperframes-animation/blueprints/titlecard-reveal.md b/skills/hyperframes-animation/blueprints/titlecard-reveal.md
new file mode 100644
index 0000000000..8b1e53dedc
--- /dev/null
+++ b/skills/hyperframes-animation/blueprints/titlecard-reveal.md
@@ -0,0 +1,42 @@
+# titlecard-reveal — Title-Card / Single-Card Reveal
+
+**intent**: The calm breather/landing beat — one clean title or single brand/proof card revealed with exactly one restrained move (a slide-up crossfade, or a wipe-away-to-reveal), then a still hold. Low motion is the payload, not a deficiency.
+
+**roles served**
+
+- Benefits (from `benefits-titlecard-crossfade`, #34): a calm two-line value title card — headline value line, then one slide-up crossfade to a qualifier/elaboration line that holds center.
+- Social_Proof (from `social-proof-reveal-card`, #35): wipe a busy app-collage open away with one diagonal pill-sweep to reveal a clean brand lockup (icon + wordmark) plus a centered "loved by [N]+ [audience] teams" social-proof line that spring-settles and holds.
+
+**duration**: 3–5s (Benefits 3–4s; Social_Proof ~5s / observed 4.7s).
+
+**shot structure**
+
+```
+Scene 1 (0.0–~0.4s): static camera on [neutral / dark background]. Establish the opening state.
+  Variant — Benefits: empty-to-text — [benefit line 1] is about to fade in centered (no busy open).
+  Variant — Social_Proof: a busy intro frame holds briefly — an [app-screenshot / use-case collage] of overlapping cards under a [setup line].
+
+Scene 2 (~0.4–~1.5s): the ONE move executes — a single restrained reveal that brings the calm card to center.
+  Variant — Benefits: [benefit line 1] fades in centered while scaling slightly (~95%→100%, smooth ease-out) and holds.
+  Variant — Social_Proof: a large [accent-color] rounded pill sweeps diagonally bottom-left → top-right and exits the corner, clip-path wiping the collage away to reveal the [brand logo lockup] beneath as the [logo icon] strokes draw on.
+
+Scene 3 (~1.5s–end): the revealed/settled card holds to the end (the allocated stillness). At most one subtle live element (a slow breathing pulse on the card, or a very slow camera drift). No second development phase.
+  Variant — Benefits: [benefit line 1] translates up and fades out as [benefit line 2 — qualifier / elaboration] translates up from below center and fades in to take center; holds. (This single slide-up crossfade IS the one move — Benefits front-loads no Scene-2 wipe.)
+  Variant — Social_Proof: the lockup — [logo icon] centered, [wordmark] below, centered [social-proof tagline] "Loved by [N]+ [audience] teams" (the [N]+ may count up) — spring-settles small, then holds.
+```
+
+**motion vocabulary**: single restrained reveal (gentle fade-in + subtle scale-up settle | diagonal clip-path pill-wipe), one slide-up crossfade between two centered lines (Benefits), icon stroke draw-on (Social_Proof), optional "[N]+ teams" count-up, logo+tagline spring-settle-and-hold, subtle breathing on the held card, hold-to-end. Calm register — no spring chains, no tumble, no per-beat flips, no second phase. Camera static (optional very slow drift only).
+
+**rule mapping**
+
+- gentle fade-in + subtle scale-up settle (Benefits Scene 2) → `rules/scale-swap-transition.md` (restrained in/settle; cross-reference the fade ease in `techniques.md`)
+- single slide-up crossfade between two centered lines (Benefits Scene 3) → `rules/discrete-text-sequence.md` (one line hands off to the next; translate-up + crossfade)
+- diagonal pill-wipe reveal (Social_Proof Scene 2) → `rules/techniques.md` (clip-path reveal masks — the wipe)
+- icon stroke draw-on (Social_Proof Scene 2) → `rules/svg-path-draw.md`
+- "[N]+ teams" count-up (Social_Proof Scene 3, optional) → `rules/counting-dynamic-scale.md`
+- logo + tagline spring-settle-and-hold (Social_Proof Scene 3) → `rules/spring-pop-entrance.md` (single soft settle; intentionally one beat, not a chain)
+- subtle breathing on the held card (the one live element during the hold) → `rules/sine-wave-loop.md`
+
+**camera modifier**: optional — a single very slow drift/push under the hold only → `rules/multi-phase-camera.md`. Default is fully static; do not add unless the held beat would otherwise read as a freeze-frame.
+
+**stillness note**: This is a legitimate allocated-stillness beat. The hold in Scene 3 is the deliverable, not an unanimated gap — do NOT manufacture a development phase, extra swaps, or force-animation. One restrained move + a subtle hold (optionally one breathing element or one slow drift) is the correct and complete shape.
diff --git a/skills/hyperframes-animation/blueprints/typewriter-reveal.md b/skills/hyperframes-animation/blueprints/typewriter-reveal.md
new file mode 100644
index 0000000000..23b1cbaf91
--- /dev/null
+++ b/skills/hyperframes-animation/blueprints/typewriter-reveal.md
@@ -0,0 +1,51 @@
+# typewriter-reveal — Typewriter Reveal
+
+**intent**: A live text caret types (and edits) a line as a human would, then either collapses it to a point and pops a brand payoff, or holds it under a persistent brand mark while a sub-line types/swaps into the final CTA — making "someone is typing this" the engine of the shot.
+
+**roles served**
+
+- Hook (from hook-typed-line-to-reveal): Type a relatable question/statement live, then COLLAPSE it and spring-pop the brand — a logo lockup OR a product-UI moment ("here's the everyday pain, now here's us").
+- Brand_Outro (from brand-outro-persistent-mark-cta-rail): Hold the hero mark dead-center/top the whole shot while a sub-line beneath it swaps or types its way into the final CTA — landing the ask once the logo is already established.
+
+**duration**: 3.6–7s (Brand_Outro 3.6–6.0s · Hook 5.5–7s)
+
+**shot structure** (one consolidated template; `[slots]` are product-agnostic)
+
+- Scene 1 (0.0–~2.0s): On a solid `[bg color]` field, a blinking text-input caret `|` sits at the line start, then `[primary line]` TYPES on character-by-character with the caret trailing.
+  - _Variant — Hook_: nothing else is on screen; the typed `[hook line]` owns the frame. (Sub-variant: the line types inside UI chrome — a rounded `[input/pill]` — and the whole assembly continuously TRANSLATES leftward + scales slightly so the active caret stays pinned near frame-center while earlier words scroll off and clip past the left edge — a ticker push.)
+  - _Variant — Brand_Outro_: a `[logo mark]` (+ optional `[wordmark]`) is already centered/upper and STAYS fully visible for the entire shot; an entry flourish plays on the mark itself (e.g. `[checkmark/icon]` strokes into the mark, or thin concentric rings ripple outward from it), and the typed `[tagline / product label]` is the SUB-LINE beneath the mark.
+
+- Scene 2 (~2.0–4.5s): The typed line is MODIFIED in place — the active text is edited rather than re-shot.
+  - _Variant — Hook_: final word(s) BACKSPACE out and a new word RETYPES (`[word A]` → `[word B]`), or the fill/caret snaps to `[accent color]` on the final word. Holds briefly.
+  - _Variant — Brand_Outro_: the sub-line is REMOVED in place — a direct hard CUT/replace (NO backspace) or a moving mask-WIPE erases it — while the mark performs a small idle move (gentle rotate / sparkle reposition); the mark never leaves frame.
+
+- Scene 3 — resolve:
+  - _Variant — Hook (collapse, ~0.3–0.7s)_: caret vanishes; the whole text/assembly COLLAPSES to a point at center (horizontal X-collapse or scale-to-0 zoom-out) and disappears, leaving a clean `[bg]`. Then (remainder) a centered `[brand element]` SPRING-POPS in:
+    - _logo-lockup sub-variant_: a `[mark/icon]` pops, then slides aside as a `[wordmark]` UNMASKS / slides out from behind it; both settle into a centered lockup.
+    - _product-UI sub-variant_: a `[UI control]` (e.g. button) pops; a `[cursor]` sweeps in from a corner and homes onto it; on contact a ~150ms state-FLIP — base cross-fades to `[accent color]`, icon inverts, and a soft radial GLOW blooms outward and persists.
+  - _Variant — Brand_Outro (~4.5s–end)_: the final `[CTA]` resolves in the sub-line slot — TYPED in with a caret and/or shown as a `[CTA in accent-color button]` beside plain text; an optional `[accent color]` GLOW ring / halo settles around the persistent mark. Holds to end. Final frame: `[logo mark]` + (glow ring) + `[CTA]`.
+
+**motion vocabulary**: blinking text caret; character-by-character type-on; backspace-and-retype OR in-place hard-cut/mask-wipe text swap; optional leftward ticker push (assembly translates to keep caret centered); persistent centered hero mark (never vanishes) with entry flourish (icon stroke-draw, concentric ripple rings) and small idle move (rotate / sparkle); X-collapse / scale-to-0 zoom-out of the typed line; spring-pop brand reveal; wordmark unmask-slide into lockup; cursor sweep + UI state-flip + radial glow bloom; accent glow/halo ring settle; pill/button CTA reveal; hold.
+
+**rule mapping** (per motion verb → `rules/<id>.md`)
+
+- blinking text caret → `context-sensitive-cursor` (caret color-switch + blink)
+- character-by-character type-on → `discrete-text-sequence` (typing/typos/holds/backspace); recipe `gsap-effects` (typewriter)
+- backspace-and-retype → `discrete-text-sequence`
+- in-place hard-cut / replace text swap → `discrete-text-sequence` (whole-text state swaps)
+- mask-wipe erase of sub-line → `techniques.md` clip-path reveal (run in reverse)
+- leftward ticker push (assembly translates to keep caret centered) → `camera-cursor-tracking` (viewport follows a moving caret)
+- persistent hero mark hold → no motion rule needed (static anchor; intentional — it's the absence of motion)
+- entry flourish: icon stroke-draw into mark → `svg-path-draw`
+- entry flourish: concentric ripple rings from mark → `cursor-click-ripple` (ripple bloom)
+- small idle mark move (rotate / sparkle reposition) → `sine-wave-loop` (idle)
+- X-collapse / scale-to-0 zoom-out of typed line → `scale-swap-transition` (closest fit — it morphs/collapses elements at a shared center; approximation, since a standalone collapse-and-vanish without the paired same-center brand pop isn't its exact case)
+- spring-pop brand reveal → `spring-pop-entrance` (alt `physics-press-reaction`)
+- collapse-text → pop-brand as a same-center morph pair → `scale-swap-transition` (morph two elements at same center)
+- wordmark unmask-slide into lockup → `techniques.md` clip-path reveal (unmask); slide via `spring-pop-entrance`
+- cursor sweep onto UI control + press → `cursor-click-ripple` (cursor→target press + ripple)
+- UI state-flip (base/icon invert on contact) → `hacker-flip-3d`
+- radial glow bloom / accent glow-halo ring settle → `asr-keyword-glow` (accent glow); ring expansion via `center-outward-expansion`
+- pill/button CTA reveal → `spring-pop-entrance` (alt `scale-swap-transition`)
+
+**camera modifier**: none required — camera is static for both roles. The Hook ticker push is an ELEMENT translate (the typed assembly slides leftward to keep the caret centered), not a camera move → modeled by `camera-cursor-tracking` rather than a true camera rule.
diff --git a/skills/hyperframes-animation/blueprints/video-text-pivot.md b/skills/hyperframes-animation/blueprints/video-text-pivot.md
new file mode 100644
index 0000000000..40f75fcb79
--- /dev/null
+++ b/skills/hyperframes-animation/blueprints/video-text-pivot.md
@@ -0,0 +1,30 @@
+# video-text-pivot — Video → Text Pivot
+
+**intent**: A product video holds center and claims attention, then slides aside to hand its weight to a hero stat in the space it vacates, then both clear and kinetic text types into the center — accent words carrying the meaning the video used to carry — sealed by a gradient pill. The arc is "show → yield → pivot → stamp," and each handoff pairs an exit with a same-anchor entrance so two beats read, not four.
+
+**roles served**
+
+- Product_Intro (from `metric-video-text-pivot`): when the open is "see the feature" then "see the impact" and the `[product video]` must stay visible through the stat reveal — it slides, it doesn't cut.
+- Key_Feature: a feature clip that yields to a frame-filling metric and a typographic impact line.
+
+**duration**: 6–8s
+
+**shot structure** (a `[bg]` canvas; one `[product video]` as a real muted `.mp4` clip, a hero stat, then kinetic text — each pair shares a screen anchor so the handoff reads as a weight-transfer)
+
+- **Scene 1 (0.0–~1.6s) — the video shows.** The `[product video]` lands centered on a smooth scale-up and breathes (a small y-bob), claiming full attention. Camera static.
+- **Scene 2 (~1.6–3.2s) — yield + stat (signature move).** The video SLIDES aside (x + scale down) **into the very space** the `[hero stat]` now fills as the stat pops in with 3D-depth type — one weight-transfer reading as a single event, not two. The stat breathes within this window.
+- **Scene 3 (~3.2–5.0s) — pivot to text.** Both video and stat clear out and kinetic `[impact text]` TYPES into the vacated center, character by character; its `[accent words]` carry the meaning the video used to carry.
+- **Scene 4 (~5.0–end) — stamp.** A gradient `[pill]` snaps shut around the closing line (`scaleX` 0→1), its glow halo resolving a beat behind so the silhouette reads before the bloom — sealing the statement as one graphic. Holds.
+
+**motion vocabulary**: video scale-in + small breath; weight-transfer slide (video x + scale-down handing off to the stat at the same anchor); 3D-depth stat type; character-stream typing; gradient pill scaleX-snap; glow-halo bloom trailing the silhouette.
+
+**rule mapping**
+
+- video entrance (smooth) and the weight-transfer slide → `gsap-effects` (scale/opacity then x + scale on a long-tail `power3`); the video itself is a muted `<video class="clip">` direct child of the root
+- hero stat's frame-filling 3D type → `3d-text-depth-layers` (static-depth variation — layers built at setup, no cascade fighting the entry)
+- the same-anchor video-exit ↔ stat-entry handoff (if treated as a morph) → `scale-swap-transition` (shared center)
+- character-by-character impact typing through segmented spans → `dynamic-content-sequencing` (clean character stream) or `discrete-text-sequence`
+- pill `scaleX` snap + trailing glow halo → `gsap-effects` (scaleX) + `ambient-glow-bloom` (the halo, resolving a beat behind)
+- video / stat breath within their windows → `sine-wave-loop` (low-amplitude register — subtle jitter, gated to each element's window, never a forever loop)
+
+**camera modifier**: camera-static — all motion is element-space (the video translates), so the "pivot" is the elements moving, not a camera.
diff --git a/skills/hyperframes-animation/blueprints/workflow-approve-press.md b/skills/hyperframes-animation/blueprints/workflow-approve-press.md
deleted file mode 100644
index 459d5b3aa5..0000000000
--- a/skills/hyperframes-animation/blueprints/workflow-approve-press.md
+++ /dev/null
@@ -1,192 +0,0 @@
----
-id: workflow-approve-press
-role: workflow
-duration_seconds: [4, 6]
-phases: 4
-visual_arc: headline-entry → steps-progress → video-demo → button-press-confirm
-uses_rules: [press-release-spring]
-element_roles:
-  headline: Top concept statement with one emphasized accent word
-  video_demo: Center product video / animation showing the feature
-  step_indicators: Left-flank 3D-tilted step list with pending → active → complete states
-  action_button: Right-flank 3D-tilted button that receives the press and changes state
-when_to_use:
-  - Scene emphasizes user control over an automated process
-  - Multi-step workflow needs visualization (e.g. generate → review → approve)
-  - Button press is the narrative climax (user confirms / approves)
-  - Left-right 3D symmetry flanks a center demo
-when_not_to_use:
-  - Workflow has more than 3-4 steps (cannot read in a ~5s scene)
-  - No user-action metaphor needed (fully automated)
-  - Scene is purely informational without interaction
-triggers:
-  [review and approve, step-by-step workflow, user control, approve button, with-you metaphor]
----
-
-# Workflow · Approve & Press (HyperFrames)
-
-This is an "agency → confirmation" arc: the headline announces the verb, the demo shows what the system is doing, the step list ticks through pending → active → complete to remind the viewer "you're inside the loop," and the right-flank button takes the press as the payoff — color flips green, a checkmark stamps, the scene ends saying "you approved it." The 3D-tilted left/right flanks frame the demo like a cockpit, so the user-action feels grounded in the device.
-
-A single paused GSAP timeline drives everything. State transitions that would be `if (frame < N)` in an imperative renderer become snap `tl.set({ attr })` toggles at concrete timeline positions, so any seek lands on a deterministic state.
-
-## When to Use
-
-- Feature scene that emphasizes user agency ("AI works with you, not just for you")
-- The workflow can be shown in 2–3 steps; 4+ steps will not read in ~5s
-- A button press serves as the narrative payoff (not a passing gesture)
-- Not for: fully automated stories, pure-information scenes, or scenes whose climax is something other than a confirm
-
-## Orchestration
-
-Four phases. Only Phase 4 is rule-driven; everything else is inline because each is a single tween or a snap state machine — wrapping them in their own rule would be overengineering.
-
-- **Phase 1 — headline drop**: inline. One `fromTo` with `back.out(HEADLINE_BOUNCE)`, sliding from a small negative y to 0. Keep the bounce on the editorial end (≤1.4) — a title that oscillates reads as marketing-y, not workflow-y.
-- **Phase 2 — center demo scale-in**: inline. One `to` from `DEMO_ENTRY_SCALE` to `1`, eased with `power3.out`. The demo enters quietly because it is the _background_ of the scene — the steps and button are the foreground story; an overshoot here would steal focus from Phase 3.
-- **Phase 3 — step indicators**: inline, split into two layers driven from the same timeline. (a) A staggered `tl.to(".step", { x: 0, opacity: 1, stagger: { each: STEP_STAGGER, from: "start" } }, STEPS_START)` slides the rows in from the left. (b) A series of `tl.set(".step-N", { attr: { "data-state": "…" } })` fires at `STEPS_START` / `STEP_ACTIVE_T2` / `STEP_ACTIVE_T3` to flip the discrete state. **CSS responds to `[data-state]`**; the timeline never animates state. See "Phase 3 seam: snap state machine" below.
-- **Phase 4 — button press climax**: use [press-release-spring](../rules/press-release-spring.md) in its **"state change at release (approve / confirm pattern)" variation** — the button's terminal state is `{successColor}` + checkmark, not a return to rest. We also follow the rule's **color-shift-during-press** variation for the bg/glow transition. The press dip itself follows the rule's default linear `power1.in/out` (the rule explains why); the checkmark uses the rule's `back.out(CHECK_BOUNCE)` stamp. The rule's burst + bg-glow layers are optional embellishments and this blueprint omits them by default — the workflow's quiet, in-app aesthetic doesn't want a hero-CTA pyrotechnic moment.
-
-The button's pre-press life — entry pop and ambient glow pulse — is also inline. Both predate the press and don't share the rule's state-continuity contract, so they live alongside the rule's tweens rather than inside the rule's scope. See "Phase 4 seam: pre-press life" below.
-
-## Phase Timing
-
-| Phase   | Start ≥                                     | Internal duration                        | Notes                                        |
-| ------- | ------------------------------------------- | ---------------------------------------- | -------------------------------------------- |
-| 1       | `0.1–0.3s` (opening beat of empty frame)    | `HEADLINE_END − HEADLINE_START`          | Headline lands fully before demo dominates   |
-| 2       | `HEADLINE_END − ~0.05s` (overlap)           | `VIDEO_DUR`                              | Slight overlap on tail = flow, not cut       |
-| 3a      | `VIDEO_START + ~0.15s`                      | `numSteps × STEP_STAGGER`                | First step appears as demo finishes settling |
-| 3b      | `STEPS_START` (active-1), then `+readDwell` | snap (zero duration)                     | `readDwell` ≥ 1.0–1.5s between transitions   |
-| 4 entry | `STEP_ACTIVE_T(last) + ~0.1s`               | `BTN_ENTRY_DUR`                          | Button pops as last step goes active         |
-| 4 press | `BUTTON_ENTER + BTN_ENTRY_DUR + ~0.2s`      | `PRESS_DUR` (= `PRESS_DIP_DUR + return`) | Button must settle before press fires        |
-
-Why the gaps are what they are. The −0.05s overlap from Phase 1 to 2 is the "two beats read as flow" trick — large enough that the demo's first frame is already visible while the headline is still settling, but not so large that the eye sees them as one event. The +0.15s gap to Phase 3 exists because the demo's `power3.out` decays to near-zero velocity, not actually zero; starting the staggered step entry on top of an unsettled scale produces faint chatter on each step's left edge. The +1.0–1.5s `readDwell` between step state changes is human-perception driven, not motion-driven: the viewer needs to actually read the active step label before it becomes complete, otherwise the state machine reads as a blink. The +0.2s gap before `PRESS_FRAME` is the most critical timing constant in the scene — the button enters with `back.out(BTN_ENTRY_BOUNCE)` and its spring tail oscillates past 1.0 for ~0.15–0.2s; firing the press on top of that residual motion makes the dip "skip" because GSAP layers velocities on the same property.
-
-## Initial DOM Nesting
-
-The scene's structure is "three columns around a center demo." The only non-obvious bit is where `perspective` lives:
-
-```
-#root
-  .bg                 ← background gradient
-  .headline-wrap      ← Phase 1 target (top center)
-    .headline
-      .accent         ← emphasized word
-  .demo-wrap          ← Phase 2 target (center)
-    .demo-frame
-      <video>
-  .steps-flank        ← perspective + rotateY(+FLANK_TILT_DEG) HERE
-    .step[data-step][data-state]   ← Phase 3 targets (×N)
-      .step-circle
-        .step-num
-        .step-check (svg)
-      .step-label
-  .button-flank       ← perspective + rotateY(-FLANK_TILT_DEG) HERE
-    .btn-press        ← Phase 4 press target (scale)
-      .btn            ← color/glow target; --btn-glow-blur CSS var
-        .btn-check    ← Phase 4 checkmark stamp (scale)
-        .btn-label
-  .ambient, .vignette ← pointer-events: none overlays
-```
-
-`perspective(FLANK_PERSPECTIVE)` lives **directly on `.steps-flank` and `.button-flank`**, not on `#root`. A perspective declared far up the tree distorts depth proportions on the inner content — the steps' inner circles end up rendered at the wrong apparent depth from the camera and the tilt no longer looks symmetrical with the button side. This is the most common "why does my 3D look weird" failure in this blueprint.
-
-The button has two transform layers because the press tween writes `scale` to `.btn-press` while the color/glow tween writes `backgroundColor` and a CSS var to `.btn`. Putting both on one element means the color tween's GPU compositing fights the scale tween — visible as a faint flicker at the press frame.
-
-## Phase 3 Seam: Snap State Machine
-
-Step state is **a discrete CSS attribute, never an animated property**. The timeline only flips `data-state`; CSS does all the visual mapping (border color, fill, checkmark visibility):
-
-```
-STEPS_START        → step-1: pending → active        (snap, same frame as 3a entry)
-STEP_ACTIVE_T2     → step-1: active  → complete
-                     step-2: pending → active        (simultaneous)
-STEP_ACTIVE_T3     → step-2: active  → complete
-                     step-3: pending → active        (terminal — no T4)
-```
-
-The final step intentionally has no `T(N+1)` — the press itself is the implicit completion. This is the scene's narrative point: the system did its part, you completed it.
-
-**Do not use CSS `transition` to soften the state flip.** A `transition` interpolates on its own clock independent of HF seek, so when the renderer jumps backward (e.g. seeking to t=1.0 for a frame after rendering t=3.0), the transition replays out-of-order and the captured frame catches a half-coloured circle. Visual easing of the state change must come from a tween on the timeline, not from CSS.
-
-The `readDwell` between `STEP_ACTIVE_T2` and `STEP_ACTIVE_T3` is the only place a viewer can register the active state of step 2. Below ~1.0s the active label is unreadable; above ~1.5s the scene starts to drag. 1.2s is the sweet spot for most copy.
-
-## Phase 4 Seam: Pre-Press Life (Entry Pop + Pulsing Glow)
-
-The button's entry and its ambient glow are **not** part of the press-release-spring rule — they live before its `PRESS_START` and are unique to this blueprint.
-
-- **Entry pop** at `BUTTON_ENTER`: a single `back.out(BTN_ENTRY_BOUNCE)` tween from `scale: 0` to `1` on `.btn-press`. The bounce factor is on the firm side (1.2–1.6) because the button is announcing itself as the next interactive target. Constraint: `PRESS_FRAME ≥ BUTTON_ENTER + BTN_ENTRY_DUR + ~0.2s` so the entry spring fully settles before the press fires (see timing prose above).
-- **Pulsing glow** from `BUTTON_ENTER` until scene end: drives the CSS custom property `--btn-glow-blur`, which the button's `box-shadow` declaration reads. **`boxShadow` strings are not GSAP-tweenable**, so the only practical way to animate a glow's blur radius on a timeline is via a CSS var that the shadow rule consumes. Standard pattern:
-
-```js
-const PULSE_HALVES = Math.max(2, Math.floor((SCENE_END - BUTTON_ENTER) / (PULSE_PERIOD / 2)));
-tl.fromTo(
-  ".btn",
-  { "--btn-glow-blur": GLOW_BLUR_MIN },
-  {
-    "--btn-glow-blur": GLOW_BLUR_MAX,
-    duration: PULSE_PERIOD / 2,
-    ease: "sine.inOut",
-    yoyo: true,
-    repeat: PULSE_HALVES - 1,
-  },
-  BUTTON_ENTER,
-);
-```
-
-`repeat: -1` is forbidden by the HF render contract (rendered frame count is finite and known up-front), so the repeat count is **derived from remaining scene time**. The `Math.max(2, …)` guard handles the degenerate case where the scene is so short that `BUTTON_ENTER` is near `SCENE_END` — without it, `PULSE_HALVES` could go to 0 or 1 and the yoyo wouldn't return.
-
-## Phase 4 Seam: Press → Confirm
-
-The press itself is the rule's "approve / confirm" variation. The seam to think about is how this blueprint's adjacent layers feed each other at three timeline positions:
-
-```
-PRESS_FRAME                : scale 1 → PRESS_SCALE       (linear  power1.out, dip)
-PRESS_FRAME + PRESS_DIP_DUR: scale PRESS_SCALE → 1       (linear  power1.in,  return)
-PRESS_FRAME + PRESS_DUR  ≡ CHECK_POP:
-                              .btn      backgroundColor: accent → success (power2.out)
-                              .btn-label textContent     snap to confirmedLabel (tl.set)
-                              .btn-check scale 0 → 1     (back.out(CHECK_BOUNCE))
-```
-
-`CHECK_POP` is **derived**, not assigned independently: `CHECK_POP = PRESS_FRAME + PRESS_DUR`. Assigning it as a separate constant is the single most common refactor regression in this scene — the moment it drifts from `PRESS_FRAME + PRESS_DUR` the checkmark stamps before the button has finished returning, and the green flash arrives mid-dip. The rule's state-continuity principle covers the dip→return seam (end value of (1) = start value of (2)); the _checkmark_ seam is this blueprint's responsibility because it's the rule's "approve" variation point.
-
-The label `textContent` swap is a `tl.set`, not a tween, because text content is non-interpolable — any "transition" would be a flicker. Snapping it at exactly `CHECK_POP` rides under the checkmark's pop and reads as a single confirmation event.
-
-A small detail: `CHECK_BOUNCE` (1.4–2.0) is intentionally firmer than `HEADLINE_BOUNCE` (≤1.4). The headline is the scene's editorial top; the checkmark is its punctuation — a punctuation mark _should_ read as more emphatic than the title.
-
-## Key Values to Choose (Not Already in the Rules)
-
-Listing only parameters unique to this blueprint. For `PRESS_SCALE`, `BOUNCE_FACTOR`, `CHECK_BOUNCE`, `CHECK_POP_DUR`, the burst layer, and the bg-glow layer — see the [press-release-spring rule](../rules/press-release-spring.md).
-
-- **FLANK_TILT_DEG**: 12–18°, left = `+`, right = `-`. Above ~20° the inner step / button content distorts unreadably; below ~10° the cockpit framing disappears and the layout reads as flat columns.
-- **FLANK_PERSPECTIVE**: 600–1000 px. Smaller = stronger depth (button feels closer to camera); larger = subtler. Both flanks must share the same value or the symmetry breaks.
-- **STEP_STAGGER**: 0.3–0.7s between consecutive step entries. Calibrate so all N step entries finish before `STEP_ACTIVE_T2`, otherwise step 1 starts ticking active while step 3 is still sliding in.
-- **STEP_ACTIVE_T2 / STEP_ACTIVE_T3**: separated by `readDwell` of 1.0–1.5s. Drives the scene's perceptual pacing.
-- **PRESS_DIP_DUR**: 0.08–0.15s, intentionally shorter than the return half. `PRESS_DIP_DUR < PRESS_DUR / 2` is the rule of thumb — the dip reads as "instant," the return as "spring."
-- **PULSE_PERIOD**: 0.8–1.5s for the ambient glow. Faster reads as urgent ("press me!"), slower as confident ambient.
-- **SCENE_END**: ≥ `CHECK_POP + 0.5–1.0s` dwell. A confirmed-state hold below ~0.5s reads as "flashed and gone."
-
-## Critical Constraints (ordered by failure frequency)
-
-- **`CHECK_POP` must be derived, never assigned**: `CHECK_POP = PRESS_FRAME + PRESS_DUR`. Drift here breaks the entire approve climax.
-- **`PRESS_FRAME ≥ BUTTON_ENTER + BTN_ENTRY_DUR + ~0.2s`**: the entry spring's tail must finish before the press, or velocities layer on the same `scale` property.
-- **Perspective lives on `.steps-flank` / `.button-flank`, not `#root`**: putting it on a distant ancestor distorts inner content depth and breaks left/right symmetry.
-- **`.btn-press` and `.btn` are two separate layers**: scale on the outer, color/glow on the inner — combining them produces a press-frame flicker.
-- **Step state is snap, no CSS `transition`**: transitions interpolate on their own clock and break under HF seek.
-- **Label text swap is `tl.set`, not a tween**: text is non-interpolable.
-- **Pulsing glow `repeat` is finite, derived from remaining scene time**: `repeat: -1` is forbidden.
-- **Glow blur is driven via a CSS variable**: `boxShadow` strings are not GSAP-tweenable; only `--btn-glow-blur` is.
-- **2–3 steps maximum**: a 4-step state machine cannot be read in a ~5s scene.
-- **Video asset must out-survive the scene**: muted, long enough to cover from `VIDEO_START` through `SCENE_END` (or be a non-terminating sub-composition).
-
-## Spring → Ease Selection
-
-Six distinct feels live in this scene; full mapping is in [SKILL.md](../SKILL.md). This blueprint's choices:
-
-- Phase 1 editorial drop → `back.out(HEADLINE_BOUNCE)` (low bounce, ≤1.4)
-- Phase 2 cinematic ease → `power3.out`
-- Phase 4 dip + return → `power1.out` then `power1.in` (mechanical, per rule)
-- Phase 4 checkmark stamp → `back.out(CHECK_BOUNCE)` (firm, 1.4–2.0)
-
-## Golden Sample
-
-- [workflow-approve-press.html](../examples/workflow-approve-press.html) — runnable composition with concrete values for every named constant above; single paused GSAP timeline drives all four phases. Start from this and tune values; building from scratch is much slower than diffing against the sample.
diff --git a/skills/hyperframes-animation/rules-index.md b/skills/hyperframes-animation/rules-index.md
index 5f15dcbc8c..52c748b948 100644
--- a/skills/hyperframes-animation/rules-index.md
+++ b/skills/hyperframes-animation/rules-index.md
@@ -30,6 +30,7 @@ Atomic motion recipes. Each lives at `rules/<name>.md`. Compose 2-4 per scene wi
 <camera-cursor-tracking path="rules/camera-cursor-tracking.md">Two-phase virtual camera that locks the viewport to a moving focal point (typing cursor) — static initial framing then focal-point-locked tracking. Uses browser-native `getBoundingClientRect()` / `ctx.measureText()` after `document.fonts.ready`. Tags: camera, tracking, viewport, two-phase, typing</camera-cursor-tracking>
 <multi-phase-camera path="rules/multi-phase-camera.md">Sequential camera-zoom system (pull-back / focus / push) plus continuous micro-drift. Tags: camera, zoom, phase, drift, scale, cinematic</multi-phase-camera>
 <viewport-change path="rules/viewport-change.md">Virtual camera — simulate zoom / pan / focus-lock by transforming a single `.world` wrapper containing all scene content. Single-element composite transform `translate(x,y) scale(S)`; counter-translate math is `T = -offset × S` (DIFFERENT from coordinate-target-zoom's `T = -offset`). Tags: viewport, camera, zoom, pan, focus-lock</viewport-change>
+<depth-of-field-blur path="rules/depth-of-field-blur.md">Selective rack-focus — GSAP-tween `filter: blur()` (+ slight opacity dim) on off-focus layers via a `--dof` var while the focal element stays sharp; single pull, two-plane rack, or blur-the-cluster-while-pushing-in. Finite, deterministic, seek-safe. Tags: blur, depth-of-field, focus, rack-focus, dim, spotlight</depth-of-field-blur>
 </rules>
 
 ## Layout & Network
@@ -41,6 +42,7 @@ Atomic motion recipes. Each lives at `rules/<name>.md`. Compose 2-4 per scene wi
 <split-tilt-cards path="rules/split-tilt-cards.md">Two cards side-by-side with opposing rotationY tilts (+/- baseTilt) and entry slides from their respective sides. Continuous floating runs in phase opposition (`Math.PI` offset). Tags: 3d, cards, split, tilt, comparison, symmetric</split-tilt-cards>
 <orbit-3d-entry path="rules/orbit-3d-entry.md">Elements flip in from 3D space (`rotateX` + `rotateY` + `translateZ`) then settle into a continuous elliptical orbit. **Critical**: entry MUST flip in-place at the orbital starting position (`gsap.set` BEFORE phase 1), not at scene center. Tags: orbit, 3d, flip, ellipse, circular, icon, entry, continuous</orbit-3d-entry>
 <ai-tracking-box path="rules/ai-tracking-box.md">AI detection overlay — yellow `#facc15` L-bracket corners + confidence label (fluctuating 95-99%) following a target on a sine arc path. Box position recomputed per-frame from target position (never tweened separately). Tags: ai, tracking, bounding-box, detection, corner, ml</ai-tracking-box>
+<depth-scatter-assemble path="rules/depth-scatter-assemble.md">N elements scatter into / reassemble from a rotating 3D depth-cloud — each starts at a deterministic index-derived 3D offset (translateZ + rotateX/Y + scatter) and settles to a clean flat layout; tumble-swap and radial-explode variants. preserve-3d + perspective, transform-only, seek-safe. Tags: 3d, scatter, assemble, tumble, depth, perspective, glyphs</depth-scatter-assemble>
 </rules>
 
 ## SVG & Icons
@@ -54,6 +56,7 @@ Atomic motion recipes. Each lives at `rules/<name>.md`. Compose 2-4 per scene wi
 
 <rules>
 <sine-wave-loop path="rules/sine-wave-loop.md">Continuous breathing/idle ambient motion. Two forms: GSAP `sine.inOut` yoyo with finite repeats (preferred when standalone) or onUpdate reading `tl.time()` (preferred when multiplying onto another live value). Tags: idle, loop, breathing, sine, ambient</sine-wave-loop>
+<ambient-glow-bloom path="rules/ambient-glow-bloom.md">Un-triggered soft radial glow that blooms in behind a hero element and holds with a bounded idle breathe, or a single-pass traveling sheen across a surface. No click, no word-sync; peak opacity ≤ ~0.45, finite/deterministic. Tags: glow, bloom, ambient, radial, sheen, hero</ambient-glow-bloom>
 </rules>
 
 ## Transition & Motion
@@ -65,6 +68,8 @@ Atomic motion recipes. Each lives at `rules/<name>.md`. Compose 2-4 per scene wi
 <cursor-click-ripple path="rules/cursor-click-ripple.md">Animated cursor moves to a target, depresses cursor + target together on click, emits an expanding ripple with attack-decay opacity envelope. Element lives in DOM from t=0 with `opacity: 0` (no conditional rendering). Tags: cursor, click, ripple, interaction, mouse, button, keyframes</cursor-click-ripple>
 <scale-swap-transition path="rules/scale-swap-transition.md">Coordinated morph between two DOM elements at the same screen center. Exit cluster shrinks + fades; entrance pops in with `back.out(2)` overshoot. Tags: transition, morph, scale, swap</scale-swap-transition>
 <card-morph-anchor path="rules/card-morph-anchor.md">Container morphs apparent size + corner radius + surface treatment between two shots, then fades to reveal the real target underneath. HyperFrames substitutes uniform `scale` for the forbidden `width`/`height` tween, plus paint-only `borderRadius`/`background`/`boxShadow`. Tags: morph, anchor, transition, border-radius, container, shape, handoff</card-morph-anchor>
+<spring-pop-entrance path="rules/spring-pop-entrance.md">The canonical ENTRANCE pop — an element (or staggered group) arrives by springing `scale: 0 → 1` with `back.out` overshoot, `fromTo` so it's correct at t=0 under seek. Single hero, staggered group (≤500ms cap), overshoot tuned by personality. Distinct from `press-release-spring` (a click/press reaction). Tags: spring, entrance, pop, scale-in, overshoot, stagger, arrival</spring-pop-entrance>
+<motion-blur-streak path="rules/motion-blur-streak.md">Fake directional velocity blur on a fast entrance / camera push-through — blur peaks at max speed, resolves to 0 at the settle. Two paths: SVG `feGaussianBlur` stdDeviation on the motion axis (proxy-tweened), or a deterministic echo/ghost trail that collapses into the lead. Entrances / mid-shot only. Tags: motion-blur, streak, velocity, ghost, echo, fast</motion-blur-streak>
 </rules>
 
 ## Effect Recipes (moved from hyperframes-creative)
@@ -76,6 +81,6 @@ Atomic motion recipes. Each lives at `rules/<name>.md`. Compose 2-4 per scene wi
 
 ## See Also
 
-- `transitions/` — scene-transition catalog (CSS push / scale / dissolve / distortion / blur / cover / destruction / 3d / grid / light / mechanical / radial / other)
-- `techniques.md` — broader motion-design techniques (SVG path drawing, Canvas 2D, CSS 3D, kinetic type, variable fonts, compositing)
-- `blueprints-index.md` — multi-phase scene templates (load only when composing a full scene from a template)
+- `blueprints-index.md` — the scene-shape templates (this skill's "blueprints") that compose these rules into full shots
+- `techniques.md` — broader motion-design techniques (SVG path drawing, Canvas 2D, CSS 3D, kinetic type, variable fonts, compositing); a few rules cite it
+- `transitions/` — scene-transition catalog (shared skill; story owns `transition_in`, the harness injects it)
diff --git a/skills/hyperframes-animation/rules/ambient-glow-bloom.md b/skills/hyperframes-animation/rules/ambient-glow-bloom.md
new file mode 100644
index 0000000000..6423b4c183
--- /dev/null
+++ b/skills/hyperframes-animation/rules/ambient-glow-bloom.md
@@ -0,0 +1,305 @@
+---
+name: ambient-glow-bloom
+description: Un-triggered soft radial glow that blooms in behind a hero element and holds with a bounded idle breathe, or a single-pass traveling sweep across a surface. No click, no word-sync — it just blooms. Finite, deterministic, seek-safe.
+metadata:
+  tags: glow, bloom, ambient, radial, sweep, hero, presence, finite, un-triggered
+---
+
+# Ambient Glow Bloom
+
+A soft radial glow that **blooms in behind a hero element** (card, logo, metric) and holds, giving it presence. Unlike `press-release-spring`'s click-triggered burst or `asr-keyword-glow`'s word-timed envelope, this glow is **un-triggered** — it simply blooms on the hero's settle and stays lit. Two forms: a **hero bloom** that swells behind a settling element and then breathes, and a **traveling glow sweep** that translates a soft highlight across a surface exactly once. Both are finite, deterministic, and seek-safe.
+
+## How It Works
+
+A radial-gradient layer sits **behind** the hero (`z-index` below it), starting at `opacity: 0`. Over the bloom-in window it ramps `opacity: 0 → peak` with a gentle `scale` swell (the halo "inflates" into place), timed to land on the hero's settle so the two read as one beat.
+
+Two forms diverge after bloom-in:
+
+1. **Hero bloom** — once lit, the glow does a **bounded idle breathe** during the hold. Drive it with an `onUpdate` reading `tl.time()` (NOT a `repeat: -1` yoyo): a `Math.sin` of elapsed time nudges `opacity` and `scale` a hair around their peak. At `sin(0) = 0` the breathe starts exactly at the bloom's resting state — no jump.
+2. **Traveling sweep** — a narrow highlight gradient at one edge of the surface translates **once** across to the other edge (`x` from off-surface to off-surface), a single finite pass. No loop, no return. The sweep layer is clipped to the surface so the highlight only reads where it overlaps.
+
+Peak opacity stays restrained (≤ ~0.45) so the glow gives presence without washing the frame; the glow color is darker / more saturated than the element it backs.
+
+## HTML
+
+```html
+<div
+  class="scene"
+  id="bloom-scene"
+  data-composition-id="bloom-scene"
+  data-start="0"
+  data-duration="DURATION"
+  data-track-index="0"
+>
+  <div class="bloom-stage">
+    <!-- Glow layer sits BEHIND the hero -->
+    <div class="bloom-glow" id="bloom-glow"></div>
+    <div class="hero-card" id="hero-card">{HeroLabel}</div>
+  </div>
+</div>
+```
+
+For the traveling-sweep form, the sweep layer is clipped to the surface it crosses:
+
+```html
+<div class="surface" id="surface">
+  <!-- grid / wordmark / card content here -->
+  <div class="sweep" id="sweep"></div>
+</div>
+```
+
+## CSS
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  background: {bgColor};
+}
+.bloom-stage {
+  position: relative;
+  display: grid;
+  place-items: center;
+}
+.hero-card {
+  position: relative;
+  z-index: 2;
+  width: HERO_WIDTH;
+  height: HERO_HEIGHT;
+  display: grid;
+  place-items: center;
+  background: {heroBg};
+  border-radius: HERO_RADIUS;
+  font-family: {font};
+  font-weight: 900;
+  font-size: HERO_FONT_SIZE;
+  color: {heroTextColor};
+}
+.bloom-glow {
+  /* Radial halo behind the hero — extends past it via negative inset */
+  position: absolute;
+  z-index: 1;
+  inset: GLOW_INSET;
+  background: {glowGradient};
+  opacity: 0;
+  transform: scale(GLOW_START_SCALE);
+  transform-origin: 50% 50%;
+  pointer-events: none;
+  /* will-change because opacity + scale both animate during bloom AND breathe */
+  will-change: transform, opacity;
+}
+
+/* Traveling-sweep form */
+.surface {
+  position: relative;
+  overflow: hidden; /* clips the sweep to the surface footprint */
+  border-radius: SURFACE_RADIUS;
+}
+.sweep {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  /* A narrow soft band, wider than it needs to be so the falloff is gentle */
+  width: SWEEP_WIDTH;
+  /* Diagonal highlight: angle the gradient so the sweep reads as raked light */
+  background: {sweepGradient};
+  opacity: 0;
+  pointer-events: none;
+  will-change: transform, opacity;
+}
+```
+
+## GSAP Timeline
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  const glow = document.getElementById("bloom-glow");
+
+  // ── Form A: HERO BLOOM ──────────────────────────────────────────────
+  // Phase 1 — bloom in. opacity 0 → peak + gentle scale swell, landing on
+  // the hero's settle. ease "power2.out" so it arrives soft, not snappy.
+  tl.fromTo(
+    glow,
+    { opacity: 0, scale: GLOW_START_SCALE },
+    {
+      opacity: GLOW_PEAK_OPACITY,
+      scale: 1,
+      duration: BLOOM_DUR,
+      ease: "power2.out",
+    },
+    BLOOM_START,
+  );
+
+  // Phase 2 — bounded idle breathe during the hold. NOT a yoyo loop:
+  // a single finite tween advances `phase` 0 → 2π·CYCLES; onUpdate reads it
+  // and nudges opacity + scale a hair around their peak.
+  // sin(0) = 0 → breathe starts exactly at the bloom's resting state.
+  const phase = { p: 0 };
+  tl.to(
+    phase,
+    {
+      p: Math.PI * 2 * BREATHE_CYCLES,
+      duration: BREATHE_DUR,
+      ease: "none",
+      onUpdate: () => {
+        const s = Math.sin(phase.p);
+        glow.style.opacity = String(GLOW_PEAK_OPACITY + s * OPACITY_AMP);
+        glow.style.transform = `scale(${1 + s * SCALE_AMP})`;
+      },
+    },
+    BLOOM_START + BLOOM_DUR, // breathe begins right as the bloom settles
+  );
+
+  // ── Form B: TRAVELING SWEEP ─────────────────────────────────────────
+  // A single finite pass. opacity fades in, x travels from off one edge to
+  // off the other, opacity fades out as it exits. One pass — no repeat.
+  const sweep = document.getElementById("sweep");
+  tl.fromTo(
+    sweep,
+    { x: SWEEP_START_X, opacity: 0 },
+    {
+      x: SWEEP_END_X,
+      opacity: SWEEP_PEAK_OPACITY,
+      duration: SWEEP_DUR,
+      ease: "none", // constant glide reads as a raking light, not an ease-in object
+    },
+    SWEEP_START,
+  );
+  // Fade the trailing edge out so it doesn't pop off at the surface edge.
+  tl.to(sweep, { opacity: 0, duration: SWEEP_FADE_DUR, ease: "power1.in" }, SWEEP_FADE_START);
+
+  window.__timelines["bloom-scene"] = tl;
+</script>
+```
+
+## Variations
+
+### Bloom-and-hold (no breathe)
+
+For very short scenes (< 3s) or when the hero already has its own idle, skip Phase 2 entirely — bloom to peak and hold flat. The single `fromTo` is the whole recipe; the glow is just lit presence.
+
+### Pulse-on-arrival (one swell, then settle to a lower hold)
+
+Bloom slightly **past** peak, then ease back down to a steady hold level — a single breath that punctuates the hero's landing without an ongoing loop. Two adjacent tweens (state continuity, same as `press-release-spring`):
+
+```js
+tl.fromTo(
+  glow,
+  { opacity: 0, scale: GLOW_START_SCALE },
+  { opacity: GLOW_OVERSHOOT_OPACITY, scale: 1.06, duration: BLOOM_DUR, ease: "power2.out" },
+  BLOOM_START,
+);
+tl.to(
+  glow,
+  { opacity: GLOW_HOLD_OPACITY, scale: 1, duration: SETTLE_DUR, ease: "power2.inOut" },
+  BLOOM_START + BLOOM_DUR,
+);
+```
+
+### Multi-hero relay (staggered blooms behind a row of cards)
+
+Bloom each card's glow on a stagger so presence sweeps across the row. Per-glow `BLOOM_START` offset by `STAGGER` (~0.15-0.3s); shrink `OPACITY_AMP` / `SCALE_AMP` per the concurrent-elements rule below so N breathing halos don't compound into a shimmer.
+
+### Diagonal raked sweep (wordmark sheen)
+
+Angle `{sweepGradient}` (e.g. a 105° linear gradient) and let the band travel left→right across a wordmark or logo lockup. Reads as light raking across a surface — the classic one-pass logo sheen. Same single-pass timeline; just a narrower `SWEEP_WIDTH` and a higher `SWEEP_PEAK_OPACITY` since it's a tight highlight on a small target.
+
+## How to Choose Values
+
+### Glow geometry
+
+- **GLOW_INSET** — negative inset so the radial halo extends past the hero edges.
+  - Range: `-200` to `-450` px on a 1920×1080 canvas; larger halo for a bigger hero
+  - Effects: too small and the glow is a tight rim, not ambient presence
+- **GLOW_START_SCALE** — scale at the start of bloom-in (the halo "inflates" to 1).
+  - Range: 0.80 (clear inflation) → 0.92 (subtle) → 1.0 (no swell, opacity-only bloom)
+  - Constraints: keep ≤ 1.0 — the swell should grow into place, not shrink
+
+### Bloom-in dynamics
+
+- **BLOOM_DUR** — bloom-in duration.
+  - Range: 0.6-1.4s; longer for a hero that's still settling so they land together
+  - Effects: shorter → the glow "snaps on"; longer → it suffuses in (the ambient feel)
+- **BLOOM_START** — when the bloom begins.
+  - Constraints: align so `BLOOM_START + BLOOM_DUR` ≈ the hero's settle frame, so glow and hero resolve as one beat — not glow-then-card or card-then-glow
+- **GLOW_PEAK_OPACITY** — peak halo opacity.
+  - Range: 0.15 (subtle) → 0.30 (default) → 0.45 (dramatic)
+  - **Constraints: ≤ 0.45** — higher washes the whole frame and the hero loses contrast against its own glow
+
+### Idle breathe (hero-bloom form)
+
+- **BREATHE_DUR** — breathe tween length.
+  - Constraints: equals `TOTAL_DURATION − (BLOOM_START + BLOOM_DUR)` to fill the hold with motion
+- **BREATHE_CYCLES** — number of full breaths across `BREATHE_DUR`.
+  - Range: `BREATHE_DUR / 4s ≤ CYCLES ≤ BREATHE_DUR / 2.5s` (a 2.5-4s breath period reads as a slow ambient pulse — glow breathing wants to be slower than element breathing)
+- **OPACITY_AMP** — sine amplitude on opacity around the peak.
+  - **Default: 0.02-0.05** (barely-perceptible pulse — the right answer for most scenes)
+  - Constraints: `GLOW_PEAK_OPACITY + OPACITY_AMP` must stay ≤ 0.45
+- **SCALE_AMP** — sine amplitude on the halo scale.
+  - **Default: 0.01-0.03** (the halo "breathes" without visibly resizing)
+  - Push higher only when the glow is the sole motion in a short isolated scene
+
+### Traveling sweep
+
+- **SWEEP_WIDTH** — width of the soft highlight band.
+  - Range: 15-35% of the surface width (a wide soft band) for a grid sheen; 8-15% for a tight wordmark sheen
+- **SWEEP_START_X / SWEEP_END_X** — travel endpoints, both fully off-surface.
+  - Constraints: start ≈ `-(SWEEP_WIDTH + edge)`, end ≈ `surfaceWidth + edge` — the band must enter from fully off one edge and exit fully off the other, so there's no visible spawn/despawn mid-surface
+- **SWEEP_DUR** — single-pass travel duration.
+  - Range: 0.8-1.6s; one deliberate pass, slow enough to read as light, fast enough not to dominate
+- **SWEEP_PEAK_OPACITY** — highlight opacity.
+  - Range: 0.10 (whisper sheen) → 0.25 (default) → 0.40 (bright rake)
+  - Constraints: ≤ ~0.45 (same wash limit); tighter sweeps tolerate the high end
+- **SWEEP_START / SWEEP_FADE_START / SWEEP_FADE_DUR** — when the pass runs and tails out.
+  - Constraints: `SWEEP_FADE_START + SWEEP_FADE_DUR ≈ SWEEP_START + SWEEP_DUR` so opacity reaches 0 exactly as the band clears the far edge
+
+### Tokens
+
+- **{glowGradient}** — radial-gradient, saturated near center fading to transparent. Color should be **darker + more saturated** than `{heroBg}` — a same-color glow looks washed out (same rule as `press-release-spring`'s burst).
+- **{sweepGradient}** — a soft band: `transparent → highlight → transparent`. For a sheen, a near-white or brand-tint highlight at low alpha; angle it (e.g. `linear-gradient(105deg, …)`) for a raked look.
+- **{heroBg} / {heroTextColor}** — the hero surface the glow backs; high contrast so the lit hero still reads against its halo.
+
+## Key Principles
+
+- **Un-triggered by design** — this glow does NOT wait on a click (`press-release-spring`) or a word timestamp (`asr-keyword-glow`). It blooms on the hero's settle as ambient presence. If you need a triggered burst, reach for one of those rules instead.
+- **Glow behind, hero in front** — glow `z-index: 1`, hero `z-index: 2`. A glow in front occludes the hero at peak opacity.
+- **Glow color darker + more saturated than the element** — bright hero → dark, saturated halo. A same-hue, same-lightness glow disappears into the surface.
+- **Land glow and hero as ONE beat** — time `BLOOM_START + BLOOM_DUR` to the hero's settle. A glow that arrives before or after the card reads as two separate events; arriving together reads as the card "powering on."
+- **Restrained peak — default to the LOW end.** `GLOW_PEAK_OPACITY` 0.15-0.30 for most scenes; 0.45 is a hard ceiling. A glow you consciously notice is too strong — it should register as the hero having weight, not as a visible light source.
+- **Breathe is BOUNDED, never a loop** — the idle pulse is a finite `onUpdate` tween reading `tl.time()` (via the `phase` proxy), not `repeat: -1` / `yoyo`. `sin(0) = 0` means it starts at the bloom's resting state with no jump. (Same reason as `sine-wave-loop`: an infinite/CSS loop desyncs from the HF seek clock.)
+- **Sweep is ONE pass** — the traveling highlight enters off one edge and exits off the other a single time. No return trip, no loop. A repeating sweep reads as a loading shimmer, not a one-time reveal accent.
+- **Concurrent halos compound** — N breathing glows in a row add up. Per-glow `OPACITY_AMP` and `SCALE_AMP` ≤ default `/ √N`, and stagger the breathe period (2.6s / 2.9s / 3.3s) so they don't pulse in lockstep. (Same `/√N` discipline as `sine-wave-loop`'s concurrent-elements rule.)
+- **Don't combine `boxShadow` glow on the hero with this halo layer** — they compete in the layout pipeline and the result reads muddy. Put the glow on the dedicated `.bloom-glow` layer, not as a shadow on the hero.
+
+## Critical Constraints
+
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`
+- **Registry key = `data-composition-id`**
+- **No CSS `transition`** on the glow / sweep — interpolates independently of HF seek and flickers
+- **No `repeat` / `yoyo` / `repeat: -1`** — the breathe is a bounded finite tween; the sweep is one pass
+- **No `Math.random` / `Date.now`** — the breathe phase is deterministic (`phase.p` over a fixed duration)
+- **GSAP transform aliases only**: `x`, `y`, `scale`, `rotation` — plus `opacity` / `filter`. Never tween `width` / `height` / `left` / `top` (the halo swell is `scale`, the sweep travel is `x`).
+- **`will-change: transform, opacity`** on the glow — it animates both during bloom-in and the breathe
+- **Glow peak `opacity ≤ 0.45`** — higher washes the composition
+- **Sweep endpoints fully off-surface** — band must enter and exit beyond the clipped edges so it never spawns/despawns mid-frame
+
+## Combinations
+
+- [sine-wave-loop.md](sine-wave-loop.md) — pair the hero-bloom form with a sine breathe on the hero element itself; the glow breathes on opacity, the hero breathes on scale/y, slightly out of phase for a layered "alive" hold
+- [press-release-spring.md](press-release-spring.md) — distinct sibling: that rule's `bg-glow` is **click-triggered**, this one is un-triggered. Don't run both behind the same element
+- [counting-dynamic-scale.md](counting-dynamic-scale.md) — bloom the accent halo behind the hero stat card on the count-up's settle (the `dataviz-countup` blueprint's "soft accent glow blooms behind the hero metric" beat)
+- [stat-bars-and-fills.md](stat-bars-and-fills.md) — glow blooms behind the hero metric + its paired graphic as they land together
+- [center-outward-expansion.md](center-outward-expansion.md) — run the traveling-sweep across the assembled layout once it resolves (the `grid-card-assemble` blueprint's "traveling-glow sweep across the assembled grid")
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — `onUpdate` writing opacity/transform + bounded sine breathe
+- `/hyperframes-core` — composition wiring
+- `/hyperframes-cli` — `hyperframes lint`
diff --git a/skills/hyperframes-animation/rules/avatar-cloud-network.md b/skills/hyperframes-animation/rules/avatar-cloud-network.md
index 6f27865ecf..19cd540ad3 100644
--- a/skills/hyperframes-animation/rules/avatar-cloud-network.md
+++ b/skills/hyperframes-animation/rules/avatar-cloud-network.md
@@ -256,14 +256,14 @@ Placeholder tokens:
 
 - **CENTER_X / CENTER_Y** — px coordinates of the hub center; lines and avatar positions derive from these.
   - Constraints: **must equal the hub's actual rendered center** — when this rule is composed with another scene (e.g. a logo that has been recentered), `CENTER_X / CENTER_Y` must be baked from the same source as the hub's final position
-  - Reference: examples/proof-logo-chain.html uses `(W/2, H × 0.47)` so the cloud sits slightly above the canvas midline
+  - Reference: ../../examples/proof-logo-chain.html uses `(W/2, H × 0.47)` so the cloud sits slightly above the canvas midline
 - **RADIUS_X / RADIUS_Y** — ellipse radii in px (RADIUS_X ≥ RADIUS_Y reads as perspective).
   - Range: `RADIUS_X` ~ 20-30% of viewport width; `RADIUS_Y` ~ 18-25% of viewport height
   - Constraints: `RADIUS_X / RADIUS_Y` ratio between 1.5 and 3.0 reads as natural depth; ratio = 1 (circle) reads as a flat 2D layout
-  - Reference: examples/proof-logo-chain.html uses `W * 0.25` (`480px`) and `H * 0.22` (`237.6px`)
+  - Reference: ../../examples/proof-logo-chain.html uses `W * 0.25` (`480px`) and `H * 0.22` (`237.6px`)
 - **AVATAR_COUNT** — number of avatars distributed around the ring.
   - Range: 8-12; fewer feels sparse, more clutters the ellipse
-  - Reference: examples/proof-logo-chain.html uses `10`
+  - Reference: ../../examples/proof-logo-chain.html uses `10`
 - **AVATAR_SIZE / AVATAR_GLYPH_SIZE** — px diameter of each avatar circle and (optional) inner glyph size.
   - Range: `AVATAR_SIZE` ~ 80-120 px at 1920 wide; small enough that 10+ avatars fit the ring without overlap
 - **HUB_NUM_FONT_SIZE / HUB_LABEL_FONT_SIZE / BRAND_FONT_SIZE** — hub typography.
diff --git a/skills/hyperframes-animation/rules/cursor-click-ripple.md b/skills/hyperframes-animation/rules/cursor-click-ripple.md
index 4c1cc31b7a..007ea18e36 100644
--- a/skills/hyperframes-animation/rules/cursor-click-ripple.md
+++ b/skills/hyperframes-animation/rules/cursor-click-ripple.md
@@ -166,69 +166,69 @@ Build a paused timeline. Register it on `window.__timelines` with the same key a
   - Range: 0.4–1.0 s
   - Effects: short feels darting; long feels deliberate / "considered click"
   - Constraints: must end before `CLICK_AT` — otherwise the click fires while the cursor is still moving and reads as a misclick
-  - Reference: examples/cta-orbit-collapse.html uses 0.5 s
+  - Reference: ../../examples/cta-orbit-collapse.html uses 0.5 s
 
 - **MOVE_EASE** — easing family for the move tween
   - Discrete choice. Options:
     - `power2.inOut` — symmetric, calm; good for "the user thoughtfully moves the cursor"
     - `back.out(<n>)` — overshoot landing; good when the click target is a button you want the cursor to "settle onto" with a tiny visible recoil. Pair with a low overshoot coefficient (~1.2–1.4) — higher reads as cartoonish
     - `power3.out` — fast start, soft landing; good for a "decisive" move
-  - Reference: examples/cta-orbit-collapse.html uses `back.out(1.3)`
+  - Reference: ../../examples/cta-orbit-collapse.html uses `back.out(1.3)`
 
 - **CLICK_AT** — time the click fires, in seconds
   - Range: must be ≥ `MOVE_DUR` (cursor has settled); typically `MOVE_DUR + 0.0–0.3 s` of "decision pause"
   - Effects: zero pause reads as autopilot; >0.3 s of pause reads as hesitation
-  - Reference: examples/cta-orbit-collapse.html clicks 0.2 s after the cursor settles
+  - Reference: ../../examples/cta-orbit-collapse.html clicks 0.2 s after the cursor settles
 
 - **PRESS_DUR** — half-duration of the depression (the yoyo runs twice this)
   - Range: 0.06–0.12 s
   - Effects: short feels crisp; long feels mushy
   - Constraints: total press = `2 * PRESS_DUR`; must finish before the next scene phase needs the cursor / target back at normal scale
-  - Reference: examples/cta-orbit-collapse.html uses 0.08 s
+  - Reference: ../../examples/cta-orbit-collapse.html uses 0.08 s
 
 - **CURSOR_PRESS_SCALE / TARGET_PRESS_SCALE** — how far each compresses during the click
   - Range: cursor 0.80–0.90; target 0.92–0.97
   - Effects: smaller numbers = stronger "this click counts" feel; values close to 1 read as a gentle tap
   - Constraints: cursor compresses MORE than the target — the cursor is the actor, the target is the recipient
-  - Reference: examples/cta-orbit-collapse.html uses cursor 0.85 / target 0.95
+  - Reference: ../../examples/cta-orbit-collapse.html uses cursor 0.85 / target 0.95
 
 - **RIPPLE_AT** — when the rings start expanding, in seconds
   - Range: `CLICK_AT + 0.0–0.08 s`
   - Effects: simultaneous with the press feels causal; slight delay feels acoustic ("the click happens, then the wave radiates")
-  - Reference: examples/cta-orbit-collapse.html starts the ripple at `CLICK_AT` exactly
+  - Reference: ../../examples/cta-orbit-collapse.html starts the ripple at `CLICK_AT` exactly
 
 - **RIPPLE_DUR** — how long each ring takes to fully expand and fade
   - Range: 0.5–1.0 s
   - Effects: short rings feel sharp; long rings feel like a soft sonar
   - Constraints: must complete before any phase that depends on the ring being gone (e.g. a screen wipe)
-  - Reference: examples/cta-orbit-collapse.html uses 0.7 s
+  - Reference: ../../examples/cta-orbit-collapse.html uses 0.7 s
 
 - **RIPPLE_SCALE** — final scale of each ring before it fades
   - Range: 3–6
   - Effects: 3 keeps the ring near the click site; 6 lets it sweep the surrounding area
   - Constraints: if the ring would exit the visible frame before opacity reaches 0, lower the scale or shorten the duration
-  - Reference: examples/cta-orbit-collapse.html uses 5
+  - Reference: ../../examples/cta-orbit-collapse.html uses 5
 
 - **RIPPLE_STAGGER** — delay between consecutive rings
   - Range: 0.06–0.12 s (or 0 for a single ring; see Variations)
   - Effects: below ~0.06 s reads as one thick ring; above ~0.12 s reads as separate events
-  - Reference: examples/cta-orbit-collapse.html uses a single ring (no stagger)
+  - Reference: ../../examples/cta-orbit-collapse.html uses a single ring (no stagger)
 
 - **RIPPLE_EASE** — easing family for the expansion
   - Discrete choice. Options:
     - `power2.out` — fast start, soft tail; the standard "ping" feel
     - `power3.out` — even sharper attack, longer tail
     - `expo.out` — almost-instant expansion with a long quiet fade; reads as a strong, distant pulse
-  - Reference: examples/cta-orbit-collapse.html uses `power2.out`
+  - Reference: ../../examples/cta-orbit-collapse.html uses `power2.out`
 
 - **TARGET_X / TARGET_Y** — pixel offset of the click target from the cursor's CSS-laid origin
   - These are layout-derived, not creative knobs — they must match the visual centroid of the actual click target. A 4 px miss reads as missing the button
-  - Reference: examples/cta-orbit-collapse.html targets the white button at `CENTER_X + 130, CENTER_Y + 15`
+  - Reference: ../../examples/cta-orbit-collapse.html targets the white button at `CENTER_X + 130, CENTER_Y + 15`
 
 ## Variations
 
 - **Single ring** — keep one `.ripple` element, drop the stagger; reads as more elegant when the rest of the scene is busy
-- **Keyframed attack-decay** — replace the simple expand-and-fade with a `keyframes` block that ramps opacity 0 → peak → 0 across the duration; gives a clearer "energy radiates and dissipates" envelope (used in examples/cta-orbit-collapse.html)
+- **Keyframed attack-decay** — replace the simple expand-and-fade with a `keyframes` block that ramps opacity 0 → peak → 0 across the duration; gives a clearer "energy radiates and dissipates" envelope (used in ../../examples/cta-orbit-collapse.html)
 - **Multi-ring expanding pulse** — 3 rings with 0.08 s stagger feels richer when the click is the climactic moment of the scene
 
 ## Key Principles
diff --git a/skills/hyperframes-animation/rules/depth-of-field-blur.md b/skills/hyperframes-animation/rules/depth-of-field-blur.md
new file mode 100644
index 0000000000..702fbc4d29
--- /dev/null
+++ b/skills/hyperframes-animation/rules/depth-of-field-blur.md
@@ -0,0 +1,313 @@
+---
+name: depth-of-field-blur
+description: Selective-focus rack-focus — pull the eye to a focal element by GSAP-tweening filter blur (+ a small opacity dim) on the off-focus layers while the focal one stays sharp. Drive blur via a `--dof` CSS var; finite tweens, no CSS transition, deterministic. Covers single focal pull, rack-focus between two depth planes, and blur-the-cluster-while-pushing-in.
+metadata:
+  tags: blur, focus, depth-of-field, dof, rack-focus, filter, dim, spotlight, cinematic, push-in
+---
+
+# Depth-of-Field Blur (Selective Focus / Rack Focus)
+
+Pulls the eye to one focal element by **blurring** (and slightly **dimming**) everything around it while the focal layer stays sharp — the camera's depth-of-field falling off the background, or a rack-focus shifting which plane is in focus. The motion is `filter: blur(Npx)` plus a small `opacity` dim, tweened from sharp(0) to blurred over the focus-shift window — both seek-safe, since `filter` and `opacity` are paint-only properties HF interpolates correctly frame-by-frame.
+
+This is the backing rule for the focus-falloff beat the blueprints keep reaching for: the outer nodes blurring during the push-in (`constellation-hub`), the rack-focus across a parallax card stack (`cursor-ui-demo`), and the non-highlighted cards dimming + blurring to spotlight the hero metric (`dataviz-countup`). Each of those flags "no backing rule" for the DoF half of the move — this is it.
+
+## How It Works
+
+Every layer carries a `--dof` custom property (px of blur), read by `filter: blur(var(--dof))`, plus its own `opacity`. A single GSAP tween advances each layer's `--dof` from `0` to its target blur and its opacity from `1` to a dim level, over the focus-shift window. The focal layer's tween targets `--dof: 0` (stays sharp); the off-focus layers target a positive blur.
+
+Three mechanics, same primitive:
+
+1. **Focal pull** — one window: off-focus layers go sharp(0) → blurred while the focal layer holds at 0. The eye is pulled to the only thing still crisp.
+2. **Rack focus** — two adjacent windows on the same property: focus releases plane A (its blur ramps 0 → max) at the same position plane B's blur ramps max → 0. State continuity matters exactly as in `press-release-spring`: A's resting blur after the rack must be the value B held before it, so authoring the two as adjacent tweens on the same `--dof` is what makes the hand-off seamless.
+3. **Blur-the-cluster-while-pushing-in** — the DoF tween runs concurrently with a camera push-in (`multi-phase-camera` / `coordinate-target-zoom`): the surrounding cluster blurs + dims on the SAME timeline position as the camera scales toward the focal core, so "the world recedes" and "we push in" read as one move.
+
+Because the blur is a tween target (not a CSS `transition`), the renderer can land it at any frame — and because each layer's target is derived from its index / a data attribute (never `Math.random`), the falloff is identical on every seek.
+
+## HTML
+
+```html
+<div
+  class="scene"
+  id="dof-scene"
+  data-composition-id="dof-scene"
+  data-start="0"
+  data-duration="DURATION"
+  data-track-index="0"
+>
+  <div class="world" id="world">
+    <!-- Focal layer — stays sharp -->
+    <div class="layer focal" id="focal" data-dof="0">{FocalLabel}</div>
+
+    <!-- Off-focus layers — blur + dim. data-depth orders them near→far
+         so the falloff can scale blur by depth (see Variations). -->
+    <div class="layer ctx" data-depth="1">{Context A}</div>
+    <div class="layer ctx" data-depth="2">{Context B}</div>
+    <div class="layer ctx" data-depth="3">{Context C}</div>
+  </div>
+</div>
+```
+
+## CSS
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  background: {bgGradient};
+}
+.world {
+  /* Single wrapper so a concurrent camera push-in (multi-phase-camera)
+     transforms everything together; DoF is independent of the camera. */
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transform-origin: 50% 50%;
+}
+.layer {
+  /* --dof is the px of blur; filter reads it. Starts sharp. */
+  --dof: 0px;
+  filter: blur(var(--dof));
+  /* will-change: filter — promotes the layer so the blur is cheap to
+     re-rasterize each frame. See the perf note in Key Principles. */
+  will-change: filter;
+  font-family: {font};
+  font-weight: 900;
+  color: {textColor};
+}
+.focal {
+  /* Sits above the context layers and never blurs. */
+  z-index: 2;
+  font-size: FOCAL_FONT_SIZE;
+}
+.ctx {
+  /* The off-focus plane(s). Smaller / grouped so the blur radius can
+     stay modest yet still read — blurring a small layer is cheap. */
+  z-index: 1;
+  font-size: CTX_FONT_SIZE;
+  opacity: 1;
+}
+```
+
+## GSAP Timeline
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  const ctx = gsap.utils.toArray(".ctx");
+
+  // ── Mechanic 1: FOCAL PULL ─────────────────────────────────────────
+  // Off-focus layers blur + dim from sharp to defocused over the
+  // focus-shift window. Blur scales with data-depth so far planes blur
+  // more than near ones (deterministic — derived from the attribute,
+  // never Math.random).
+  ctx.forEach((el) => {
+    const depth = Number(el.dataset.depth) || 1;
+    const targetBlur = BLUR_PER_DEPTH * depth; // px
+    tl.to(
+      el,
+      {
+        "--dof": `${targetBlur}px`,
+        opacity: DIM_LEVEL, // e.g. 0.55 — dim, not gone
+        duration: FOCUS_DUR,
+        ease: "power2.inOut",
+      },
+      FOCUS_START,
+    );
+  });
+  // Focal layer is already sharp (--dof:0, opacity:1) and untouched.
+
+  window.__timelines["dof-scene"] = tl;
+</script>
+```
+
+## Variations
+
+### Rack focus between two depth planes (foreground ⇄ background)
+
+Two adjacent tweens on the same `--dof` per plane — focus leaves plane A as it lands on plane B. State continuity: B's _resting_ blur before the rack equals what A holds after, so the hand-off has no jump.
+
+```js
+// Start: A sharp, B pre-blurred (set BEFORE the rack so there's no pop).
+gsap.set("#planeA", { "--dof": "0px", opacity: 1 });
+gsap.set("#planeB", { "--dof": `${MAX_BLUR}px`, opacity: DIM_LEVEL });
+
+// Rack: A defocuses while B comes into focus, same position + duration.
+tl.to(
+  "#planeA",
+  { "--dof": `${MAX_BLUR}px`, opacity: DIM_LEVEL, duration: RACK_DUR, ease: "power2.inOut" },
+  RACK_START,
+);
+tl.to(
+  "#planeB",
+  { "--dof": "0px", opacity: 1, duration: RACK_DUR, ease: "power2.inOut" },
+  RACK_START,
+);
+```
+
+### Blur the cluster while pushing in (DoF + camera, one beat)
+
+Run the focal-pull tween at the **same timeline position** as a camera push-in so the surrounding cluster recedes into blur exactly as the camera scales toward the core. The camera transforms `.world`; the DoF tweens the layers — independent properties, no conflict.
+
+```js
+// Camera push-in toward the focal core (see multi-phase-camera / coordinate-target-zoom).
+tl.to(
+  "#world",
+  { scale: PUSH_SCALE, x: PUSH_X, y: PUSH_Y, duration: FOCUS_DUR, ease: "power2.inOut" },
+  FOCUS_START,
+);
+// Cluster blurs + dims on the SAME position — "the world recedes as we push in."
+ctx.forEach((el) => {
+  const depth = Number(el.dataset.depth) || 1;
+  tl.to(
+    el,
+    {
+      "--dof": `${BLUR_PER_DEPTH * depth}px`,
+      opacity: DIM_LEVEL,
+      duration: FOCUS_DUR,
+      ease: "power2.inOut",
+    },
+    FOCUS_START,
+  );
+});
+```
+
+### Spotlight a hero metric in a card grid (dim + blur the rest)
+
+The `dataviz-countup` beat: a subset of grid cards stays sharp (the hero metric) while the remainder dim + blur. Tag the hero(es) and skip them; everything else defocuses on one shared window.
+
+```js
+gsap.utils.toArray(".card:not(.hero)").forEach((el) => {
+  tl.to(
+    el,
+    { "--dof": `${GRID_BLUR}px`, opacity: DIM_LEVEL, duration: FOCUS_DUR, ease: "power2.out" },
+    FOCUS_START,
+  );
+});
+```
+
+### Refocus / settle (release the blur before the scene ends)
+
+If the beat resolves back to "everything visible" (or hands off to a crossfade that needs a clean outgoing frame), ramp the blur back to 0 over the tail so the scene settles sharp instead of mid-defocus.
+
+```js
+ctx.forEach((el) =>
+  tl.to(
+    el,
+    { "--dof": "0px", opacity: 1, duration: REFOCUS_DUR, ease: "power2.inOut" },
+    REFOCUS_START,
+  ),
+);
+```
+
+### Bounded focus-breathing on the focal layer (optional)
+
+For a subtle "rack settling" feel, let the focal layer's blur breathe a hair around 0 during its hold — a _finite_ `ease:"none"` driver writing `sin()` into `--dof` (never `repeat:-1`, never a CSS animation). Keep the amplitude well under 1px or it reads as "still focusing."
+
+```js
+const drift = { p: 0 };
+tl.to(
+  drift,
+  {
+    p: Math.PI * 2 * BREATH_CYCLES,
+    duration: BREATH_DUR,
+    ease: "none",
+    onUpdate: () => {
+      const b = Math.max(0, Math.sin(drift.p)) * FOCAL_BREATH_PX; // ≤ ~0.6px
+      document.getElementById("focal").style.setProperty("--dof", `${b}px`);
+    },
+  },
+  BREATH_START,
+);
+```
+
+## How to Choose Values
+
+### Geometry / layout
+
+- **FOCAL_FONT_SIZE / CTX_FONT_SIZE** — focal vs context sizing.
+  - Range: focal is the visual lead; context layers smaller so a modest blur radius still reads as "out of focus."
+  - Effects: small context layers let you use a smaller `BLUR_PER_DEPTH` (cheaper) yet still look soft.
+- **z-index** — focal `z-index: 2`, context `z-index: 1`.
+  - Constraints: the sharp focal layer must sit **above** the blurred ones, or its crisp edges read as bleeding into the haze.
+
+### Blur amounts
+
+- **BLUR_PER_DEPTH** — px of blur added per depth step (`data-depth`).
+  - Range: 3-6 px per step (a 3-plane stack tops out at ~9-18 px)
+  - Effects: low → gentle DoF; high → strong miniature/tilt-shift falloff
+  - Constraints: keep **per-layer blur ≤ ~24 px on large layers** — radius cost grows with both blur and area; large radius over a full-frame element is the expensive case (see Key Principles)
+- **MAX_BLUR** — terminal blur for a fully-defocused plane (rack / focal-pull peak).
+  - Range: 8 (soft) → 16 (default) → 24 (heavy) px
+  - Constraints: above ~24 px on a big surface, prefer scaling the layer down or grouping its contents so the blurred footprint shrinks
+- **GRID_BLUR** — blur on dimmed grid cards (spotlight variation).
+  - Range: 6-12 px — enough to push them back without losing the grid's shape
+
+### Dim amounts
+
+- **DIM_LEVEL** — opacity of off-focus layers at full defocus.
+  - Range: 0.4 (strong push-back) → 0.55 (default) → 0.7 (subtle)
+  - Effects: lower → context recedes hard / near-spotlight; higher → still legibly present, just secondary
+  - Constraints: rarely below 0.35 — fully dark off-focus layers read as "removed," not "defocused"
+
+### Timing
+
+- **FOCUS_START / FOCUS_DUR** — when the focal pull begins and how long the rack takes.
+  - Range: `FOCUS_DUR` 0.5-1.2 s — a rack/pull is a deliberate move, not a snap
+  - Effects: shorter → urgent "snap focus"; longer → languid cinematic rack
+- **RACK_START / RACK_DUR** — rack-focus window (foreground ⇄ background).
+  - Constraints: both planes' tweens share `RACK_START` and `RACK_DUR` so they cross at the midpoint; `gsap.set` the pre-blurred plane BEFORE `RACK_START`
+- **REFOCUS_START / REFOCUS_DUR** — settle-back window.
+  - Constraints: `REFOCUS_START + REFOCUS_DUR ≤ DURATION` so the scene actually reaches sharp before it ends / hands off
+- **PUSH_SCALE / PUSH_X / PUSH_Y** (cluster-while-pushing-in variation) — camera move on `.world`.
+  - Constraints: shares `FOCUS_START` + `FOCUS_DUR` with the DoF tween so move and defocus read as one beat; counter-translate math lives in `coordinate-target-zoom` / `viewport-change`
+- **BREATH_CYCLES / BREATH_DUR / FOCAL_BREATH_PX** (focus-breathing variation).
+  - Range: `FOCAL_BREATH_PX ≤ 0.6` px; period 2-3 s; this is a barely-there nicety, default to omitting it
+
+### Tokens
+
+- **{bgGradient}** — typically dark so the sharp focal layer reads as lit and forward
+- **{textColor}** — high-contrast on `{bgGradient}`; the blur softens edges, so don't rely on hairline contrast
+- **{font}** — display weight; blurred copy needs heavy weight to stay shape-legible when defocused
+
+## Key Principles
+
+- **`--dof` drives the blur; tween the variable, never a CSS `transition`.** Reading `filter: blur(var(--dof))` and animating `--dof` on the GSAP timeline keeps the blur on the HF seek clock. A CSS `transition` on `filter` interpolates on the browser's own clock and flickers/desyncs under frame-by-frame seek.
+- **Blur the SMALL / GROUPED layers, not the giant one.** Filter-blur cost scales with both radius and the blurred element's pixel area. A 20 px blur on a full-frame background is the worst case; the same blur on a smaller context card, or on a single grouped wrapper, is cheap. Prefer pushing the focal plane _forward and sharp_ over cranking the background blur radius.
+- **`will-change: filter`** on every layer that animates its blur — promotes it to its own layer so the re-rasterization each frame is cheap. Drop it once the blur settles if the layer also does heavy transform work.
+- **Keep the radius modest.** ≤ ~24 px on large surfaces; lean on the `opacity` **dim** to do the "push it back" work alongside a smaller blur, rather than blur alone. Dim + modest blur reads more like real DoF than blur cranked to the max.
+- **Focal layer stays genuinely sharp** — its `--dof` is `0` and untouched (or breathes ≤0.6 px). Any visible blur on the focal element kills the "this is the thing" read.
+- **State continuity on a rack** — the plane coming OUT of focus must start the rack at the blur the incoming plane _was_ holding, and vice-versa; author both as tweens on the same `--dof` at the same position so the cross is seamless (same rule as `press-release-spring`'s press↔release).
+- **DoF is independent of the camera** — blur the layers, transform `.world` for the push-in. They're different property channels, so they compose without fighting. Don't try to fake DoF with the camera transform or vice-versa.
+- **Settle sharp before a hand-off** — if the next beat is a crossfade/push, refocus to `--dof:0` in the tail so the outgoing frame is crisp; handing off mid-defocus reads as "the render glitched."
+
+## Critical Constraints
+
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`
+- **Registry key = `data-composition-id`**
+- **No CSS `transition`** on `filter` / `opacity` — animate `--dof` and `opacity` on the timeline instead
+- **No `repeat` / `yoyo` / infinite tweens** — the focus pull is a finite tween; any breathing is a bounded `onUpdate` reading the driver phase (or a finite tween), never `repeat:-1`
+- **No `Math.random` / `Date.now`** — per-layer blur is derived from `data-depth` / element index so every seek is identical
+- **Tween `filter` (blur) + `opacity` only here** — both paint-only and seek-safe. Use GSAP transform aliases (`x`, `y`, `scale`) for any concurrent camera move; never tween `width` / `height` / `left` / `top`
+- **`will-change: filter`** on layers whose blur animates; keep the blurred footprint small
+- **Per-layer blur radius ≤ ~24 px on large surfaces** — beyond that the cost (and visible banding) climbs; shrink/group the layer instead
+
+## Combinations
+
+- [multi-phase-camera.md](multi-phase-camera.md) — the push-in / push-through whose focus-falloff this rule supplies; run the DoF tween at the same position as the PUSH phase
+- [coordinate-target-zoom.md](coordinate-target-zoom.md) — zoom onto the focal core while the off-center layers blur (the `constellation-hub` hook)
+- [viewport-change.md](viewport-change.md) — pan across a tilted card plane with a rack-focus between near and far cards (the `cursor-ui-demo` focus-pull)
+- [counting-dynamic-scale.md](counting-dynamic-scale.md) — the hero metric counts up sharp while the surrounding cards dim + blur (the `dataviz-countup` spotlight)
+- [3d-page-scroll.md](3d-page-scroll.md) — the parallax card stack whose planes you rack focus between
+- [sine-wave-loop.md](sine-wave-loop.md) — the focal layer idle-breathes after the rack settles (keep idle amplitude and focus-breath both tiny)
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — tweening a CSS custom property + multi-tween coordination
+- `/hyperframes-core` — composition wiring
+- `/hyperframes-cli` — `hyperframes lint`
diff --git a/skills/hyperframes-animation/rules/depth-scatter-assemble.md b/skills/hyperframes-animation/rules/depth-scatter-assemble.md
new file mode 100644
index 0000000000..ffe9424b81
--- /dev/null
+++ b/skills/hyperframes-animation/rules/depth-scatter-assemble.md
@@ -0,0 +1,303 @@
+---
+name: depth-scatter-assemble
+description: N elements scatter into / reassemble from a rotating 3D depth-cloud, each starting at a deterministic index-derived 3D offset and settling to a clean flat layout.
+metadata:
+  tags: 3d, scatter, assemble, depth, cloud, tumble, kinetic, letter, fragment, logo, reassemble
+---
+
+# Depth Scatter ↔ Assemble
+
+N elements (glyphs, cards, icons, logo fragments) fly in from a rotating 3D depth-cloud and lock into a clean on-screen layout — or the reverse. Each element starts at a **deterministic** 3D offset (translateZ depth + rotateX/rotateY + an x/y scatter derived from its index), then tweens to its assembled flat position (`z: 0, rotation: 0`). Because every scattered position is computed by trig on the element's index — never `Math.random` — it renders identically every frame.
+
+Distinct from `orbit-3d-entry` (flip-in then a continuous orbit) and `center-outward-expansion` (a flat 2D burst from one shared center): here each element has its **own** point in a 3D cloud, and the resolve is a flat assembled layout, not an orbit or a radial spray.
+
+## How It Works
+
+Each element resolves to a flat layout position (`targetX/Y`, set once in CSS or via `data-*`). Its **scattered** state is derived from its index `i`:
+
+```js
+const GOLDEN = Math.PI * (3 - Math.sqrt(5)); // ~2.39943 rad — even angular spread, no clumping
+const a = i * GOLDEN; // this element's angle in the cloud
+const scatterX = Math.cos(a) * RADIUS; // index-derived, deterministic
+const scatterY = Math.sin(a) * RADIUS;
+const scatterZ = Z_NEAR - (i / (n - 1)) * (Z_NEAR - Z_FAR); // stepped depth across the cloud
+const rotX = Math.sin(a) * TUMBLE; // tumble orientation, also from the angle
+const rotY = Math.cos(a) * TUMBLE;
+```
+
+A single 0→1 `progress` proxy interpolates each element between scattered and assembled (lerp every channel). At `progress = 0` the elements form the depth-cloud; at `progress = 1` they sit flat in the layout. Run it forward and it's **assemble**; the cloud itself slowly rotates (a stage `rotateY` tween) so the scatter has life before it locks.
+
+Requires `perspective` on the stage and `transform-style: preserve-3d` on the stage AND each element, or the z-depth and tumble flatten to a 2D scale.
+
+## HTML
+
+```html
+<div
+  class="scene"
+  id="assemble-scene"
+  data-composition-id="assemble-scene"
+  data-start="0"
+  data-duration="4"
+  data-track-index="0"
+>
+  <!-- The cloud rotates; the layout lives inside it. targetX/Y = each
+       element's FLAT assembled offset from stage center (px). -->
+  <div class="cloud-stage">
+    <div class="frag" data-target-x="-260" data-target-y="0">{glyph1}</div>
+    <div class="frag" data-target-x="-130" data-target-y="0">{glyph2}</div>
+    <div class="frag" data-target-x="0" data-target-y="0">{glyph3}</div>
+    <div class="frag" data-target-x="130" data-target-y="0">{glyph4}</div>
+    <div class="frag" data-target-x="260" data-target-y="0">{glyph5}</div>
+  </div>
+</div>
+```
+
+For a logo lockup, `targetX/Y` describe the parts' resting layout; for kinetic type, one `.frag` per glyph (inject spans from the phrase string at setup so width is exact — see Variations).
+
+## CSS
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  background: {bgColor};
+  perspective: 1400px; /* REQUIRED — without it, z-depth + tumble read as flat 2D scale */
+}
+.cloud-stage {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  transform-style: preserve-3d; /* REQUIRED — preserves child 3D context */
+  will-change: transform;
+}
+.frag {
+  position: absolute;
+  /* Live at stage center; GSAP translates each one to its layout / cloud point. */
+  top: 50%;
+  left: 50%;
+  display: grid;
+  place-items: center;
+  font-family: {font};
+  font-weight: 900;
+  font-size: 120px;
+  color: {textColor};
+  transform-style: preserve-3d; /* each fragment keeps its own 3D context */
+  backface-visibility: hidden; /* hides the mirrored face mid-tumble */
+  will-change: transform, opacity;
+}
+```
+
+## GSAP Timeline
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  const frags = Array.from(document.querySelectorAll(".frag"));
+  const n = frags.length;
+  const GOLDEN = Math.PI * (3 - Math.sqrt(5)); // ~2.39943 — even spread, no clumps
+
+  // RADIUS, Z_NEAR, Z_FAR, TUMBLE, ASSEMBLE_DUR, ASSEMBLE_EASE, STAGGER,
+  // CLOUD_SPIN_DEG, CLOUD_SPIN_DUR — named constants per "How to Choose Values".
+
+  // Precompute each fragment's deterministic scattered state from its index.
+  const scatter = frags.map((el, i) => {
+    const a = i * GOLDEN;
+    const depthT = n > 1 ? i / (n - 1) : 0;
+    return {
+      x: Math.cos(a) * RADIUS,
+      y: Math.sin(a) * RADIUS,
+      z: Z_NEAR - depthT * (Z_NEAR - Z_FAR),
+      rotationX: Math.sin(a) * TUMBLE,
+      rotationY: Math.cos(a) * TUMBLE,
+    };
+  });
+
+  // 1) Park every fragment in the cloud BEFORE any tween fires.
+  frags.forEach((el, i) => {
+    const s = scatter[i];
+    gsap.set(el, {
+      xPercent: -50,
+      yPercent: -50, // bake self-centering so x/y are offsets from stage center
+      x: s.x,
+      y: s.y,
+      z: s.z,
+      rotationX: s.rotationX,
+      rotationY: s.rotationY,
+      opacity: 0,
+    });
+  });
+
+  // 2) The cloud rotates so the scatter has life before / during assembly.
+  tl.to(
+    ".cloud-stage",
+    { rotationY: CLOUD_SPIN_DEG, duration: CLOUD_SPIN_DUR, ease: "power1.out" },
+    0,
+  );
+
+  // 3) ASSEMBLE — each fragment tweens from its cloud point to its flat target.
+  frags.forEach((el, i) => {
+    tl.to(
+      el,
+      {
+        x: Number(el.dataset.targetX),
+        y: Number(el.dataset.targetY),
+        z: 0,
+        rotationX: 0,
+        rotationY: 0,
+        opacity: 1,
+        duration: ASSEMBLE_DUR,
+        ease: ASSEMBLE_EASE, // out-ease — fragments fly in then settle
+      },
+      i * STAGGER, // index stagger reads as "cloud collapsing inward"
+    );
+  });
+
+  window.__timelines["assemble-scene"] = tl;
+</script>
+```
+
+## Variations
+
+### Tumble-swap (mid-shot hand-off between two phrases)
+
+The signature for `kinetic-type-beats` beat changes: one phrase's glyphs scatter **into** the cloud at the same moment the next phrase's glyphs assemble **out** of it — a 3D hand-off between two states, never an empty frame. Two glyph sets share the cloud; drive both with one shared 0→1 `progress` so they cross deterministically.
+
+```js
+// outgoing[] and incoming[] are two glyph arrays, each with precomputed scatter[] (above).
+const swap = { p: 0 };
+tl.to(
+  swap,
+  {
+    p: 1,
+    duration: SWAP_DUR,
+    ease: "power2.inOut",
+    onUpdate: () => {
+      const p = swap.p;
+      outgoing.forEach((el, i) => {
+        // 1 → 0: layout → cloud (scatters AWAY)
+        const s = outScatter[i];
+        const tx = Number(el.dataset.targetX);
+        const ty = Number(el.dataset.targetY);
+        el.style.opacity = String(1 - p);
+        el.style.transform =
+          `translate(-50%,-50%) translate3d(${tx + (s.x - tx) * p}px,${ty + (s.y - ty) * p}px,${s.z * p}px)` +
+          ` rotateX(${s.rotationX * p}deg) rotateY(${s.rotationY * p}deg)`;
+      });
+      incoming.forEach((el, i) => {
+        // 0 → 1: cloud → layout (assembles IN)
+        const s = inScatter[i];
+        const tx = Number(el.dataset.targetX);
+        const ty = Number(el.dataset.targetY);
+        el.style.opacity = String(p);
+        el.style.transform =
+          `translate(-50%,-50%) translate3d(${s.x + (tx - s.x) * p}px,${s.y + (ty - s.y) * p}px,${s.z * (1 - p)}px)` +
+          ` rotateX(${s.rotationX * (1 - p)}deg) rotateY(${s.rotationY * (1 - p)}deg)`;
+      });
+    },
+  },
+  SWAP_AT,
+);
+```
+
+Inject a per-glyph span set for each phrase at setup (so `targetX` per glyph is the exact laid-out advance width — measure after `document.fonts.ready`), and hide each set's opacity to 0 until its window.
+
+### Radial letter-explode → resolve
+
+A flat-plane special case (the `kinetic-type-beats` "letters explode radially then resolve" GAP): set `Z_NEAR = Z_FAR = 0` and `TUMBLE` small so the cloud is a 2D ring, then reverse the assemble for the explode — fragments fling out to `scatter[i]` then snap back to layout. Pure in-plane, no depth.
+
+### Scatter-OUT (final-frame exit only)
+
+Reverse the assemble (layout → cloud, opacity 1→0) ONLY as the composition's last beat. A scatter-out mid-shot reads as an exit and breaks the shot — keep entrances and hand-offs as assemble or tumble-swap.
+
+### Parallax depth slide-in (logo lockup)
+
+For `logo-assemble-lockup`, give back layers a larger `|Z_FAR|` and a longer `ASSEMBLE_DUR`, foreground parts a shallower depth and shorter duration — parts at different depths slide in at different apparent speeds (parallax) and lock into the lockup.
+
+## How to Choose Values
+
+- **n (ELEMENT_COUNT)** — fragments / glyphs in the cloud
+  - Range: 4–14 (glyph sets follow the word length; for fragments/cards stay 4–9)
+  - Effects: few reads as deliberate assembly; many reads as a dense swarm condensing
+  - Constraints: above ~14 the cloud crowds the center and individual paths stop reading
+
+- **RADIUS** — cloud spread in the x/y plane, px
+  - Range: 250–700 px
+  - Effects: small = a tight knot that barely separates; large = fragments arrive from the frame edges
+  - Constraints: keep the farthest scatter inside frame at the chosen `perspective`, or fragments pop in from off-screen with no travel read
+
+- **Z_NEAR / Z_FAR** — depth band of the cloud, px (front / back)
+  - Range: Z_NEAR +150 to +450; Z_FAR −150 to −500
+  - Effects: a wide band (e.g. +400 / −400) gives strong fly-toward / recede-from camera depth; a narrow band keeps it nearly flat
+  - Constraints: very large `|z|` against a short `perspective` over-distorts (fragments smear huge then tiny) — widen `perspective` to match
+
+- **TUMBLE** — peak rotateX/rotateY of scattered fragments, deg
+  - Range: 40–110°
+  - Effects: low = fragments drift in nearly upright; high = they tumble through space and rotate upright on arrival
+  - Constraints: with `backface-visibility: hidden`, glyphs past 90° show blank mid-tween (intended for the tumble); for cards with content on one face, cap near 80°
+
+- **ASSEMBLE_DUR** — per-fragment cloud → layout tween, s
+  - Range: 0.7–1.4 s
+  - Effects: short = snappy lock-in; long = a floating condense
+  - Constraints: `(n − 1) × STAGGER + ASSEMBLE_DUR` must fit the scene's assembly window
+
+- **ASSEMBLE_EASE** — shared ease across fragments
+  - Discrete choice: `power3.out`, `expo.out`, `back.out(1.4)`
+  - Selection: `power3.out` default (fly in, settle). `expo.out` snaps hard at the end. `back.out` adds a small overshoot as parts seat. Avoid `in` easings — fragments look sucked backward into the cloud mid-air.
+
+- **STAGGER** — gap between successive fragments' assembly starts, s
+  - Range: 0.03–0.09 s
+  - Effects: < 0.03 = a single chord (whole cloud collapses at once); > 0.09 = a slow drip that loses the "swarm" read
+  - Constraints: `n × STAGGER` should stay below `ASSEMBLE_DUR` so the cloud is collapsing as one motion, not a queue
+
+- **CLOUD_SPIN_DEG / CLOUD_SPIN_DUR** — stage rotateY over the assembly, deg / s
+  - Range: 15–60° over a duration ≥ `ASSEMBLE_DUR`
+  - Effects: a gentle spin gives the scatter life so it doesn't read as a frozen explosion diagram; too fast competes with the assembly
+  - Constraints: keep finite and ending by settle — no `repeat`
+
+- **SWAP_DUR / SWAP_AT** (tumble-swap) — hand-off length / when it fires, s
+  - Range: SWAP_DUR 0.5–1.0 s; SWAP_AT on the beat boundary
+  - Effects: shorter = a hard cross; longer = a visible dissolve-through-cloud
+  - Constraints: outgoing and incoming MUST share one `progress` (one tween) so they cross at the same instant
+
+## Key Principles
+
+- **`perspective` on the scene root + `preserve-3d` on stage AND each fragment** — without all three, z-depth and tumble collapse to a flat scale
+- **Every scattered value is index-derived** — `cos/sin(i × GOLDEN)`, stepped `z` by `i/(n−1)`. The golden angle spreads points evenly with no clumps and (critically) **no `Math.random`**, so the cloud is byte-identical every render
+- **`gsap.set` the cloud BEFORE adding tweens** — park each fragment at its scatter point with `opacity: 0` first; the assemble tweens FROM there. Skipping the set leaves frame 0 showing the assembled layout, then a teleport when the first tween starts
+- **Resolve flat** — the settled state is `z: 0, rotationX: 0, rotationY: 0` in the layout. A cloud that resolves still-tilted reads as unfinished
+- **Assemble / hand-off only; scatter-OUT is an exit** — fragments leaving for the cloud mid-shot reads as the shot ending. Use forward assemble for entrances, tumble-swap for beat changes; reserve scatter-out for the final frame
+- **Depth ordering is automatic** — inside `preserve-3d`, paint order follows actual Z, so nearer fragments correctly occlude farther ones with no manual z-index (unlike the orbit case, where the orbit is faked in 2D and needs capped z-index)
+
+## Critical Constraints
+
+- **No `Math.random` / `Date.now`** — derive every scatter coordinate from the index (golden-angle trig + stepped depth). This is the whole point of the rule: a randomized cloud renders differently each frame and the seek breaks
+- **No CSS `transition`** — all motion is GSAP tweens on the paused timeline
+- **No `repeat` / `yoyo` / infinite** — the cloud spin and every assemble are finite, one-shot tweens that end before settle
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`
+- **Registry key = `data-composition-id`**
+- **Transform aliases only** — `x`, `y`, `z`, `scale`, `rotation`/`rotationX`/`rotationY`. Never `width`/`height`/`left`/`top`; `x`/`y` compose with the `xPercent/yPercent -50` self-centering
+- **`will-change: transform`** on stage + fragments — many simultaneous 3D transforms benefit from compositor hints
+- **In tumble-swap, one shared `progress` for both glyph sets** — two separate tweens can drift out of phase under seek and the cross stops looking like a single hand-off
+
+## Combinations
+
+- [orbit-3d-entry.md](orbit-3d-entry.md) — alternative 3D entrance (settles into a continuous orbit instead of a flat lockup); shares the `perspective` + `preserve-3d` stage setup
+- [hacker-flip-3d.md](hacker-flip-3d.md) — per-glyph 3D flip/decode as the fragments seat; layer for a "letters tumble in AND decode on arrival" read
+- [3d-text-depth-layers.md](3d-text-depth-layers.md) — give the assembled wordmark a stacked extrusion once it locks
+- [center-outward-expansion.md](center-outward-expansion.md) — flat 2D cousin (single shared center, no depth) when perspective isn't wanted
+- [press-release-spring.md](press-release-spring.md) — a spring settle on the assembled lockup once the cloud resolves
+- [sine-wave-loop.md](sine-wave-loop.md) — idle breathe on the resolved layout instead of a frozen hold
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — timeline + `onUpdate` API (the shared-progress tumble-swap)
+- `/hyperframes-core` — composition wiring
+- `/hyperframes-cli` — `hyperframes lint`
diff --git a/skills/hyperframes-animation/rules/dynamic-content-sequencing.md b/skills/hyperframes-animation/rules/dynamic-content-sequencing.md
index 722a5e453b..14ab6ea7d8 100644
--- a/skills/hyperframes-animation/rules/dynamic-content-sequencing.md
+++ b/skills/hyperframes-animation/rules/dynamic-content-sequencing.md
@@ -246,43 +246,43 @@ document
   - Range: 0.6-1.5 s
   - Effects: low end snaps through short entries too fast for the eye; high end stalls on short titles
   - Constraints: ensures even one-word entries have time to read
-  - Reference: see `examples/messaging-multi-phrase.html` (and any blueprint that uses this rule)
+  - Reference: see `../../examples/messaging-multi-phrase.html` (and any blueprint that uses this rule)
 
 - **SEC_PER_CHAR** — extra time added per body character
   - Range: 0.03-0.06 s/char (≈ 17-33 chars/sec read pace for video)
   - Effects: low end feels rushed for paragraph-style bodies; high end feels slow when bodies are short
   - Constraints: should be uniform across the sequence so the pace reads as one engine; for languages with wider characters, lean to the high end
-  - Reference: see `examples/messaging-multi-phrase.html` (and any blueprint that uses this rule)
+  - Reference: see `../../examples/messaging-multi-phrase.html` (and any blueprint that uses this rule)
 
 - **HOLD_MID** — dwell after the typing of a non-final entry completes
   - Range: 0.5-1.0 s
   - Effects: low end feels rushed; high end feels lazy
   - Constraints: `HOLD_MID < HOLD_FINAL`
-  - Reference: see `examples/messaging-multi-phrase.html` (and any blueprint that uses this rule)
+  - Reference: see `../../examples/messaging-multi-phrase.html` (and any blueprint that uses this rule)
 
 - **HOLD_FINAL** — dwell on the last entry (outro / climax)
   - Range: 1.0-2.0 s
   - Effects: low end truncates the closing beat; high end overstays
   - Constraints: must exceed HOLD_MID by a clear margin so the close reads as a beat, not another mid-sequence pause
-  - Reference: see `examples/messaging-multi-phrase.html` (and any blueprint that uses this rule)
+  - Reference: see `../../examples/messaging-multi-phrase.html` (and any blueprint that uses this rule)
 
 - **SPEED_FACTOR** — per-entry pacing multiplier
   - Range: 0.5-2.0 (default 1.0)
   - Effects: <1 stretches an entry's body-driven duration (good for high-density passages); >1 compresses it
   - Constraints: discrete choice — use 1.0 unless one entry needs special pacing; if every entry uses the same factor, fold it into SEC_PER_CHAR instead
-  - Reference: see `examples/messaging-multi-phrase.html` (and any blueprint that uses this rule)
+  - Reference: see `../../examples/messaging-multi-phrase.html` (and any blueprint that uses this rule)
 
 - **TAIL_PAD** — seconds added to `TOTAL_DURATION` after the last entry's `end`
   - Range: 0.0-1.0 s
   - Effects: 0 ends the driver exactly at the last `hold` completion; >0 leaves a quiet beat (useful before a transition to the next composition)
   - Constraints: if downstream is another composition, prefer 0 and handle the breath at the composition seam
-  - Reference: see `examples/messaging-multi-phrase.html` (and any blueprint that uses this rule)
+  - Reference: see `../../examples/messaging-multi-phrase.html` (and any blueprint that uses this rule)
 
 - **CONTENT length (N)** — number of entries in the sequence
   - Range: 3-6 entries
   - Effects: <3 isn't a sequence (use a static scene); >6 drags
   - Constraints: each entry's `title` must fit one line at the chosen `.title` fontSize; bodies should fit within `min-height` after wrapping
-  - Reference: see `examples/messaging-multi-phrase.html` (and any blueprint that uses this rule)
+  - Reference: see `../../examples/messaging-multi-phrase.html` (and any blueprint that uses this rule)
 
 ## Critical Constraints
 
diff --git a/skills/hyperframes-animation/rules/hacker-flip-3d.md b/skills/hyperframes-animation/rules/hacker-flip-3d.md
index d397740db9..f831dce924 100644
--- a/skills/hyperframes-animation/rules/hacker-flip-3d.md
+++ b/skills/hyperframes-animation/rules/hacker-flip-3d.md
@@ -164,23 +164,23 @@ The `REVEAL_THRESHOLD` separates "scrambled" from "revealed" — by the time the
 - **HACKER_FONT_SIZE** — font-size of the flip text in px.
   - Range: 6-10% of viewport min-dimension; the flip text is the focal beat, scale accordingly
   - Constraints: ghost row must use the identical size so layout width stays stable mid-flicker
-  - Reference: examples/proof-logo-chain.html uses `163px` at 1920×1080
+  - Reference: ../../examples/proof-logo-chain.html uses `163px` at 1920×1080
 - **FLIP_DURATION** — per-character flip tween duration.
   - Range: 0.4-1.0s; under 0.4s the random-glyph phase has no time to flicker, over 1.0s drags
   - Effects: shorter feels snappy and modern; longer feels mechanical / typewriter
-  - Reference: examples/proof-logo-chain.html uses `0.55s`
+  - Reference: ../../examples/proof-logo-chain.html uses `0.55s`
 - **CHAR_STAGGER** — delay between consecutive characters starting their flips, in seconds.
   - Range: 0.03-0.08s; too fast and chars overlap visually, too slow and the effect feels labored
   - Constraints: total decode time = `CHAR_STAGGER × (charCount − 1) + FLIP_DURATION`; ensure this fits the phase budget
-  - Reference: examples/proof-logo-chain.html uses `0.033s` (≈2 frames at 60fps)
+  - Reference: ../../examples/proof-logo-chain.html uses `0.033s` (≈2 frames at 60fps)
 - **REVEAL_THRESHOLD** — progress at which a glyph swaps from random → real.
   - Range: 0.5-0.7; lower reveals too early (no decode tension), higher feels like a hard reveal at the end
   - Effects: this is a discrete tuning of when the eye locks onto the real letter
-  - Reference: examples/proof-logo-chain.html uses `0.6`
+  - Reference: ../../examples/proof-logo-chain.html uses `0.6`
 - **FLICKER_RATE** — frames between glyph reshuffles during the random phase.
   - Range: 3-6; lower than 3 looks like noise, higher than 6 looks like discrete typing instead of flicker
   - Constraints: must be ≥ ~3 frames (see Critical Constraints)
-  - Reference: examples/proof-logo-chain.html uses an equivalent of `3` (one shuffle every 3 internal-clock frames)
+  - Reference: ../../examples/proof-logo-chain.html uses an equivalent of `3` (one shuffle every 3 internal-clock frames)
 - **{bgColor} / {textColor}** — stage background and live-character color tokens.
 - **{monoFont}** — monospace family preferred so flicker glyphs don't change width per swap; if a proportional font is required, the ghost placeholder makes the cost recoverable.
 - **{phrase}** — the target word the flip resolves to. Length feeds the total decode duration via `CHAR_STAGGER`.
diff --git a/skills/hyperframes-animation/rules/kinetic-beat-slam.md b/skills/hyperframes-animation/rules/kinetic-beat-slam.md
index 1d3ab34cd5..5ada2370ab 100644
--- a/skills/hyperframes-animation/rules/kinetic-beat-slam.md
+++ b/skills/hyperframes-animation/rules/kinetic-beat-slam.md
@@ -152,7 +152,7 @@ Use **at least 3 distinct easings** across the piece (entrances are its "tone of
 - **Entrance duration** — 0.35–0.6s. The hit must resolve before the next beat.
 - **Distinct entrances** — assign a different transform axis per phrase (scale / x / y+rotate). Reuse the _ease family_, vary the _motion_.
 - **Accent hue** — exactly one (the verbs). The rest is mono white/near-black.
-- **Rhythm chrome** — optional but high-impact for "rhythmic": a 5-tick metronome, a center beat bar, or a `// label` monospace tag pulsing on-beat. Mark any decorative that must survive a shader transition per `transitions/overview.md` rules.
+- **Rhythm chrome** — optional but high-impact for "rhythmic": a 5-tick metronome, a center beat bar, or a `// label` monospace tag pulsing on-beat. Mark any decorative that must survive a shader transition per `../../transitions/overview.md` rules.
 
 ## Key Principles
 
@@ -166,7 +166,7 @@ Use **at least 3 distinct easings** across the piece (entrances are its "tone of
 
 - **Timeline paused**: `gsap.timeline({ paused: true })`. Never `tl.play()`.
 - **No infinite repeats** on the hold/chrome — use `repeat: Math.max(0, Math.floor(dur / cycle) - 1)` (no `repeat: -1`). Use **`Math.floor`, not `Math.ceil`** — `ceil` overshoots `data-duration` and trips the `gsap_repeat_ceil_overshoot` lint rule; the `Math.max(0, …)` guards against a negative repeat (which GSAP reads as `-1` = infinite = non-deterministic) when the hold is shorter than two cycles.
-- **No banned exit animations** between scenes — if this is one of several scenes, the _transition_ is the exit (see `transitions/overview.md`); only a final scene may fade out.
+- **No banned exit animations** between scenes — if this is one of several scenes, the _transition_ is the exit (see `../../transitions/overview.md`); only a final scene may fade out.
 - **Display font must be embedded** or it silently falls back at render (Anton/Bebas-as-literal are NOT embedded — `Bebas Neue` aliases to League Gothic; verify in `typography.md`).
 - **Registry key = `data-composition-id`** on the root.
 
@@ -178,6 +178,6 @@ Use **at least 3 distinct easings** across the piece (entrances are its "tone of
 
 ## Pairs with HF skills
 
-- `/hyperframes-animation` — timeline + easing vocabulary (`adapters/gsap-easing-and-stagger.md`)
+- `/hyperframes-animation` — timeline + easing vocabulary (`../../adapters/gsap-easing-and-stagger.md`)
 - `/hyperframes-creative` — `references/video-composition.md` (foreground rhythm chrome), `references/typography.md` (embedded display fonts)
 - `/hyperframes-core` — composition wiring, determinism (finite repeats)
diff --git a/skills/hyperframes-animation/rules/motion-blur-streak.md b/skills/hyperframes-animation/rules/motion-blur-streak.md
new file mode 100644
index 0000000000..f94f61b394
--- /dev/null
+++ b/skills/hyperframes-animation/rules/motion-blur-streak.md
@@ -0,0 +1,328 @@
+---
+name: motion-blur-streak
+description: Fake directional velocity blur on a fast entrance or camera push-through — blur peaks at max speed and resolves to 0 at the settle, so the element streaks in then snaps sharp. Two paths — SVG feGaussianBlur on the motion axis, or an echo/ghost trail that collapses into the lead.
+metadata:
+  tags: motion-blur, velocity, streak, entrance, fly-in, ghost, echo, svg-filter, kinetic, camera, snap
+---
+
+# Motion-Blur Streak
+
+Real per-frame motion blur isn't available to a seeked renderer (it integrates over shutter time, which a paused timeline has no concept of), so this rule **fakes** it for a fast element fly-in or a hard camera push-through. The blur **peaks at maximum velocity and resolves to 0 at the settle** — the element reads as streaking in then snapping sharp on arrival. The whole point is the _coupling_: the blur envelope rides the same ease and window as the position tween, so peak-blur lands exactly on peak-speed, and the element is razor-sharp the instant it stops.
+
+Two implementation paths, both finite, deterministic, and seek-safe:
+
+- **(A) Directional SVG blur** — an inline `<filter>` with `<feGaussianBlur stdDeviation="X 0">` (X on the axis of motion, 0 across it). GSAP tweens `X` from high → 0 through a proxy that calls `setAttribute` each frame. Cleanest, one element, true directional smear.
+- **(B) Echo / ghost trail** — 2–4 duplicate copies at decreasing opacity, offset backward along the motion vector, collapsing into the lead element as it settles. No filter cost; reads as a "speed-line" stutter trail. Better when you want the streak _colored_ or _stylized_ rather than a literal optical blur.
+
+This is for **entrances and mid-shot moves only** — a fast arrival, a beat that zooms past camera, a card slamming into a grid slot, a logo punching through into a lockup. **Never an exit on a non-final frame** (a blurred element fleeing off-frame mid-composition reads as a glitch, and a hard exit between scenes is the transition's job, not a per-element blur).
+
+## How It Works
+
+A fast move has a velocity profile: it accelerates off the start, peaks, then decelerates into the settle. An `out` ease (`expo.out`, `power4.out`) front-loads that — velocity is highest right at the start and bleeds to zero at the end. The fake works by mapping a **blur (or echo) envelope onto that same curve**:
+
+1. **Position tween** — the element travels from an off-frame / pushed-back start to its resting transform (`x`/`y` for a fly-in, `scale` for a push-through) on a fast `out` ease over `MOVE_DUR`.
+2. **Blur envelope** — in lockstep over the **same window and ease**, the smear goes from `PEAK_BLUR` → `0`. Because the ease front-loads velocity and the envelope shares it, max blur coincides with max speed, and blur hits exactly `0` as the element lands.
+3. **Settle is sharp** — by `MOVE_START + MOVE_DUR` the element is at its resting transform with blur `0` (path A) or all echoes collapsed onto the lead (path B). It then holds, fully crisp, for the climax dwell.
+
+Path A tweens the filter's `stdDeviation` attribute (a non-DOM-style numeric attribute) via a **proxy object** — GSAP can't tween an SVG attribute directly, so you tween a plain `{ v: PEAK_BLUR }` and write it back with `setAttribute` in `onUpdate`. Path B places the ghosts at deterministic backward offsets (`i * ECHO_STEP_PX`) and fades/collapses them on the same envelope.
+
+## HTML
+
+### Path A — directional SVG blur (recommended default)
+
+```html
+<div
+  class="scene"
+  id="streak-scene"
+  data-composition-id="streak-scene"
+  data-start="0"
+  data-duration="DURATION"
+  data-track-index="0"
+>
+  <!-- Inline filter: blur on the X axis only (stdDeviation="X 0"); 0 on Y keeps it a clean horizontal smear. -->
+  <svg width="0" height="0" aria-hidden="true" style="position: absolute">
+    <defs>
+      <filter id="streak" x="-50%" y="-50%" width="200%" height="200%">
+        <feGaussianBlur id="streak-blur" in="SourceGraphic" stdDeviation="0 0" />
+      </filter>
+    </defs>
+  </svg>
+
+  <div class="streak-stage">
+    <div class="streak-el" id="streak-el">{phrase}</div>
+  </div>
+</div>
+```
+
+### Path B — echo / ghost trail
+
+```html
+<div
+  class="scene"
+  id="streak-scene"
+  data-composition-id="streak-scene"
+  data-start="0"
+  data-duration="DURATION"
+  data-track-index="0"
+>
+  <div class="streak-stage">
+    <!-- N-1 ghosts BEHIND the lead, then the lead on top. Ghosts are aria-hidden duplicates. -->
+    <div class="streak-ghost" data-i="3" aria-hidden="true">{phrase}</div>
+    <div class="streak-ghost" data-i="2" aria-hidden="true">{phrase}</div>
+    <div class="streak-ghost" data-i="1" aria-hidden="true">{phrase}</div>
+    <div class="streak-el" id="streak-el">{phrase}</div>
+  </div>
+</div>
+```
+
+## CSS
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  background: {sceneBg};
+  font-family: {font};
+  overflow: hidden; /* the smear/echo extends past the resting position before settling */
+}
+.streak-stage {
+  position: relative;
+  display: grid;
+  place-items: center;
+}
+.streak-el {
+  position: relative;
+  z-index: 2;
+  font-size: EL_FONT_SIZE;
+  font-weight: 900;
+  letter-spacing: EL_TRACKING;
+  color: {textColor};
+  /* Path A only — reference the directional filter. (Omit for Path B.) */
+  filter: url(#streak);
+  will-change: transform, filter;
+}
+
+/* Path B ghosts — identical glyphs behind the lead, decreasing opacity */
+.streak-ghost {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  z-index: 1;
+  font-size: EL_FONT_SIZE;
+  font-weight: 900;
+  letter-spacing: EL_TRACKING;
+  color: {textColor};
+  opacity: 0;
+  will-change: transform, opacity;
+  pointer-events: none;
+}
+```
+
+## GSAP Timeline
+
+### Path A — directional SVG blur
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  // GSAP can't tween an SVG attribute directly — tween a proxy and write it back each frame.
+  const blurNode = document.getElementById("streak-blur");
+  const blurProxy = { v: PEAK_BLUR };
+  const writeBlur = () => blurNode.setAttribute("stdDeviation", `${blurProxy.v} 0`); // X-axis only
+  writeBlur(); // seed frame 0 so a seek to t=0 shows the streaked start, not a sharp pre-frame
+
+  // Position: travel from off-frame to rest on a fast `out` ease (velocity front-loaded).
+  tl.fromTo(
+    "#streak-el",
+    { x: ENTER_FROM_X, opacity: 0 },
+    { x: 0, opacity: 1, duration: MOVE_DUR, ease: MOVE_EASE },
+    MOVE_START,
+  );
+
+  // Blur envelope: SAME window + SAME ease so peak-blur == peak-speed, resolving to 0 at the settle.
+  tl.to(blurProxy, { v: 0, duration: MOVE_DUR, ease: MOVE_EASE, onUpdate: writeBlur }, MOVE_START);
+
+  window.__timelines["streak-scene"] = tl;
+</script>
+```
+
+### Path B — echo / ghost trail
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  // Lead element: same fast `out` move as Path A.
+  tl.fromTo(
+    "#streak-el",
+    { x: ENTER_FROM_X, opacity: 0 },
+    { x: 0, opacity: 1, duration: MOVE_DUR, ease: MOVE_EASE },
+    MOVE_START,
+  );
+
+  // Ghosts: each starts FURTHER back along the motion vector (deterministic, by index),
+  // dimmer, and collapses onto the lead — all on the SAME ease/window so they vanish at the settle.
+  const ghosts = gsap.utils.toArray(".streak-ghost");
+  ghosts.forEach((g) => {
+    const i = Number(g.dataset.i); // 1..N-1, set in HTML (no Math.random)
+    tl.fromTo(
+      g,
+      { x: ENTER_FROM_X - i * ECHO_STEP_PX, opacity: GHOST_BASE_OPACITY / i },
+      { x: 0, opacity: 0, duration: MOVE_DUR, ease: MOVE_EASE },
+      MOVE_START,
+    );
+  });
+
+  window.__timelines["streak-scene"] = tl;
+</script>
+```
+
+## Variations
+
+### Vertical streak (rise / drop-in)
+
+Swap the motion axis: use `y` instead of `x` for the position tween, `stdDeviation="0 Y"` for Path A (blur on Y, 0 on X), and `ENTER_FROM_Y` / vertical echo offsets for Path B. A phrase that streaks _up_ into place pairs with `kinetic-type-beats`' rise-rotate beat.
+
+### Camera push-through (scale streak into a lockup)
+
+Instead of translating, the element rushes the camera: `scale: SCALE_FROM → 1` on the fast `out` ease, with a **radial / zoom blur** feel approximated by a symmetric `stdDeviation="B B"` envelope (blur on both axes since the smear is depth-wise, not directional). This is the `logo-assemble-lockup` push-through — the wordmark punches forward out of soft focus and snaps crisp at the lock.
+
+```js
+tl.fromTo(
+  "#streak-el",
+  { scale: SCALE_FROM, opacity: 0 },
+  { scale: 1, opacity: 1, duration: MOVE_DUR, ease: MOVE_EASE },
+  MOVE_START,
+);
+tl.to(
+  blurProxy,
+  {
+    v: 0,
+    duration: MOVE_DUR,
+    ease: MOVE_EASE,
+    onUpdate: () => blurNode.setAttribute("stdDeviation", `${blurProxy.v} ${blurProxy.v}`),
+  },
+  MOVE_START,
+);
+```
+
+### Staggered grid streak-in (cards assemble)
+
+For `grid-card-assemble`: each card streaks into its slot from its own backward offset, staggered. Drive every card off the same ease/window with a per-index delay; derive the entrance offset and start time from the card's index (no `Math.random`). Each card is sharp the instant it lands in its slot.
+
+```js
+gsap.utils.toArray(".grid-card").forEach((card, i) => {
+  const at = MOVE_START + i * CARD_STAGGER;
+  tl.fromTo(
+    card,
+    { x: ENTER_FROM_X, opacity: 0 },
+    { x: 0, opacity: 1, duration: MOVE_DUR, ease: MOVE_EASE },
+    at,
+  );
+  // + a per-card blur proxy tween at the same `at` (Path A), or per-card ghosts (Path B)
+});
+```
+
+### Hold-the-streak (whip emphasis on a single beat)
+
+For a single kinetic phrase that "zooms past," keep the streak slightly visible a frame or two longer by easing the blur on a marginally _slower_ curve than the position (e.g. position `expo.out`, blur `power3.out`) — the element arrives, then the last wisp of smear resolves. Use sparingly; the default is locked envelopes.
+
+## How to Choose Values
+
+### Motion
+
+- **MOVE_EASE** — shared ease for position and blur/echo.
+  - Range: `expo.out` (hardest snap), `power4.out` (hard slam, default), `power3.out` (firm but softer)
+  - Effects: harder `out` → velocity more front-loaded → blur reads as a sharper streak that resolves later in the window
+  - Constraints: must be an `out`-family ease (velocity front-loaded). An `inOut` or `in` ease puts peak speed mid/late and the blur-speed coupling breaks. **Position and blur must use the SAME ease** (except the deliberate Hold-the-streak variation).
+- **MOVE_DUR** — travel + blur-resolve duration.
+  - Range: 0.25–0.6 s
+  - Effects: shorter → more violent whip; longer → a glide, the streak loses punch
+  - Constraints: a streak is _fast_ — over ~0.7 s it stops reading as velocity blur and looks like a focus pull
+- **MOVE_START** — timeline position of the entrance.
+  - Constraints: leave **≥1 s of dwell** after `MOVE_START + MOVE_DUR` before the composition ends (climax dwell — a streak that lands at `t = DURATION − 0.2 s` reads as "flashed and gone")
+- **ENTER_FROM_X / ENTER_FROM_Y** — off-frame start offset along the motion axis.
+  - Range: 40–120% of the element's own dimension on that axis (far enough to read as "came from off-frame")
+  - Effects: larger → longer travel → the streak has more runway to read; too small and there's no sense of speed
+
+### Path A — SVG blur
+
+- **PEAK_BLUR** — `stdDeviation` at maximum velocity (start of the window).
+  - Range: 8 (subtle) → 18 (default) → 30 (extreme whip)
+  - Effects: higher → heavier smear at peak speed; too high erases the glyph entirely at the start frame
+  - Constraints: ≤ ~30 — beyond that the element is unreadable for the first several frames and reads as "missing then appearing"; the filter region (`x/y/width/height` on `<filter>`) must be large enough (≥`-50% … 200%`) or the smear clips at the box edge
+- **SCALE_FROM** (push-through variation) — starting scale for a camera push.
+  - Range: 1.3 (gentle push) → 2.5 (aggressive punch-through)
+
+### Path B — echo trail
+
+- **N (ghost count)** — number of ghosts behind the lead (set by how many `.streak-ghost` you author).
+  - Range: 2–4
+  - Effects: more ghosts → a longer, smoother smear; >4 reads as a stutter / strobe rather than a streak
+- **ECHO_STEP_PX** — backward offset per ghost along the motion vector.
+  - Range: 12–40 px
+  - Effects: larger → a more spread-out, visible trail; smaller → a tight blur-like cluster
+  - Constraints: `(N) × ECHO_STEP_PX` should be ≲ `ENTER_FROM_X` so the furthest ghost still starts within the travel runway
+- **GHOST_BASE_OPACITY** — opacity of the nearest ghost (`i = 1`); falls off as `BASE / i`.
+  - Range: 0.3 (faint) → 0.6 (pronounced)
+  - Constraints: ≤ ~0.6 — opaque ghosts read as duplicate elements, not a trail
+
+### Layout & type
+
+- **EL_FONT_SIZE / EL_TRACKING** — the streaking element's type weight (when it's a phrase).
+  - Constraints: heavy display weight (≥120 px at 1080p, ≥800 weight) so the smear has mass to streak; thin type smears into invisibility
+- **CARD_STAGGER** (grid variation) — delay between consecutive cards.
+  - Range: 0.05–0.12 s — tight enough to read as one assembling wave, not separate arrivals
+
+### Tokens
+
+- **{sceneBg}** — background; a streak reads best against a solid / low-detail field (a busy bg fights the smear)
+- **{font}** — typographic stack (embedded display face if the streaking element is text — see typography reference)
+- **{textColor}** — element color; for Path B the ghosts inherit this, so a slightly desaturated trail can be had by tinting `.streak-ghost` separately
+- **{phrase}** — the word / glyph / wordmark that streaks in
+
+## Key Principles
+
+- **Blur peaks at peak speed, resolves to 0 at the settle** — this is the whole rule. Share the ease and window between the position tween and the blur/echo envelope so they're locked. A blur that lingers after the element stops, or peaks after it's already slow, reads as a focus pull, not velocity.
+- **`out`-family ease, always** — velocity must be front-loaded (fast off the start, decelerating in). `expo.out` / `power4.out` / `power3.out`. An `in` or `inOut` ease puts peak speed in the wrong place and the coupling falls apart.
+- **Directional blur on the motion axis** (Path A) — `stdDeviation="X 0"` for horizontal, `"0 Y"` for vertical, `"B B"` only for a depth/scale push. A symmetric blur on a sideways move looks like defocus, not speed.
+- **Tween a proxy, write the attribute** (Path A) — GSAP tweens the plain `{ v }` object; `onUpdate` calls `setAttribute("stdDeviation", …)`. You cannot tween the SVG attribute directly, and you must **seed it once at setup** so a seek to `t=0` shows the streaked start.
+- **Ghosts are deterministic, by index** (Path B) — offset `i * ECHO_STEP_PX`, opacity `BASE / i`. Never `Math.random` for the trail; index drives all per-ghost variation so every seek is identical.
+- **Entrances only, never a mid-composition exit** — a streak is an _arrival_. A blurred element leaving on a non-final frame reads as a glitch; scene-to-scene exits are the transition's job (see `../../transitions/overview.md`).
+- **Earn the sharp hold** — after the snap, the crisp element must dwell ≥1 s. The contrast between the violent streak and the still, sharp settle _is_ the effect.
+- **Heavy element, solid background** — thin type or a busy backdrop both swallow the smear. Big bold mass on a clean field reads.
+
+## Critical Constraints
+
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`. Never `tl.play()`.
+- **Registry key = `data-composition-id`** on the root.
+- **No CSS `transition`** on the streaking element (or ghosts) — it interpolates independently of HF seek and causes flicker. Only GSAP drives the move and the blur.
+- **No `repeat` / `yoyo` / infinite** — a streak is a single finite arrival. Finite tweens only.
+- **No `Math.random` / `Date.now`** — ghost offsets/opacities and any stagger derive from the element index; deterministic every seek.
+- **GSAP transform aliases only**: `x`, `y`, `scale`, `rotation`. Never tween `width` / `height` / `left` / `top`. Tweening `filter` (the proxy → `stdDeviation`) and `opacity` is seek-safe and fine.
+- **Seed the SVG `stdDeviation` at setup** (Path A) — write it once before play so a seek to the first frame renders the streaked start, not a momentarily-sharp pre-frame.
+- **Filter region must be generous** (Path A) — `<filter x="-50%" y="-50%" width="200%" height="200%">` so the smear doesn't clip at the element's box edge.
+- **`overflow: hidden` on the scene** — the smear / furthest ghost extends past the resting position during travel; contain it so it doesn't bleed outside the frame.
+
+## Combinations
+
+- [kinetic-beat-slam.md](kinetic-beat-slam.md) — use this streak as the entrance for one phrase in a beat sequence (the scale-slam beat _is_ a motion-blur fly-in); reads its onset from the shared `BEATS[]` array
+- [center-outward-expansion.md](center-outward-expansion.md) — the grid streak-in is center-expansion with a velocity-blur envelope on each element's travel
+- [3d-text-depth-layers.md](3d-text-depth-layers.md) — extruded depth on the phrase that streaks in (depth layers ride the lead's transform)
+- [scale-swap-transition.md](scale-swap-transition.md) — alternative for a SAME-footprint state swap (this rule is for a fast ARRIVAL from off-frame / depth, not a morph)
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — `out`-family easing, proxy-driven `onUpdate` attribute tweens, and locked-envelope coordination (`../../adapters/gsap-easing-and-stagger.md`)
+- `/hyperframes-creative` — `references/typography.md` (embedded display face for a text streak), `references/video-composition.md` (solid field behind the smear)
+- `/hyperframes-core` — composition wiring, determinism (finite tweens, no `Math.random`)
+- `/hyperframes-cli` — `hyperframes lint` / `hyperframes validate` (validate catches a missing `#streak-blur` node or an unreferenced filter)
diff --git a/skills/hyperframes-animation/rules/orbit-3d-entry.md b/skills/hyperframes-animation/rules/orbit-3d-entry.md
index 3ddc8cfc4d..8d6203f470 100644
--- a/skills/hyperframes-animation/rules/orbit-3d-entry.md
+++ b/skills/hyperframes-animation/rules/orbit-3d-entry.md
@@ -178,53 +178,53 @@ The orbit runs **inside the timeline** — not via `requestAnimationFrame` — s
   - Range: 300–900 px
   - Effects: small radius reads as a tight cluster; large radius spreads the ring across the frame and lets a large center element breathe
   - Constraints: must clear the center element horizontally at every angle — see Key Principles for the `RADIUS_X * min(|cos(θ)|) ≥ L_w + I_w + breathing_room` rule
-  - Reference: examples/cta-orbit-collapse.html uses 480
+  - Reference: ../../examples/cta-orbit-collapse.html uses 480
 
 - **Y_TO_X_RATIO** — `RADIUS_Y / RADIUS_X`, the orbit's perspective flattening
   - Range: 0.4–0.7
   - Effects: low values read as a near-horizontal disc seen from above; values approaching 1 read as a flat plane facing the camera
   - Constraints: keep < 1 — the orbit should look like a tilted ring, not a frontal halo
-  - Reference: examples/cta-orbit-collapse.html uses ≈ 0.58
+  - Reference: ../../examples/cta-orbit-collapse.html uses ≈ 0.58
 
 - **ORBIT_DURATION** — seconds for one full revolution
   - Range: 4–25 s (longer for ambient backdrop, shorter for active feature motion)
   - Effects: short durations look frenetic; long durations read as drifting / calm
   - Constraints: must be ≥ the time the orbit is on screen, otherwise the tween ends and items stop
-  - Reference: examples/cta-orbit-collapse.html uses ~25 s effective (orbit speed 0.25 rad/s)
+  - Reference: ../../examples/cta-orbit-collapse.html uses ~25 s effective (orbit speed 0.25 rad/s)
 
 - **ENTRY_DUR** — per-element flip-in duration
   - Range: 0.4–0.8 s
   - Effects: short feels punchy; long feels stately
   - Constraints: must be ≤ the gap between the first and last element's start so the cascade doesn't overlap to incoherence
-  - Reference: examples/cta-orbit-collapse.html uses 0.55 s
+  - Reference: ../../examples/cta-orbit-collapse.html uses 0.55 s
 
 - **STAGGER** — delay between consecutive element entries
   - Range: 0.06–0.12 s
   - Effects: below ~0.06 s reads as "popcorn"; above ~0.12 s reads as plodding
   - Constraints: total cascade `(n - 1) * STAGGER` should still complete before the next scene phase begins
-  - Reference: examples/cta-orbit-collapse.html uses 0.10 s
+  - Reference: ../../examples/cta-orbit-collapse.html uses 0.10 s
 
 - **FLIP_BACK** — `back.out(<n>)` overshoot for the flip-in
   - Range: 1.2–2.0
   - Effects: low end is a soft arrive; high end snaps with visible overshoot
   - Constraints: pair with a calmer `CENTER_BACK` if both fire close together — competing overshoots cancel each other
-  - Reference: examples/cta-orbit-collapse.html uses 1.4
+  - Reference: ../../examples/cta-orbit-collapse.html uses 1.4
 
 - **CENTER_BACK** — `back.out(<n>)` overshoot for the center label fade-in
   - Range: 1.2–1.8
   - Effects: low end keeps the label calm under the busy orbit; high end gives it a small "pop" of arrival
-  - Reference: examples/cta-orbit-collapse.html uses 1.4
+  - Reference: ../../examples/cta-orbit-collapse.html uses 1.4
 
 - **CENTER_FADE_AT** — when the center label fades in, in seconds
   - Range: just after the first 2–4 elements have landed
   - Effects: too early competes with the cascade; too late leaves a hole at the center of the orbit
-  - Reference: examples/cta-orbit-collapse.html starts the center brand near the front of the scene
+  - Reference: ../../examples/cta-orbit-collapse.html starts the center brand near the front of the scene
 
 - **ROTATE_X_FROM / ROTATE_Y_FROM / Z_FROM / SCALE_FROM** — initial 3D orientation
   - Range: rotateX ±60° to ±120°; rotateY ±45° to ±120°; z −200 to −400; scale 0.2–0.6
   - Effects: higher absolute rotation + deeper negative z = more dramatic "card flipping out of depth"; lower = subtle reorientation
   - Constraints: pick a direction consistent with the scene's perspective; mixing positive and negative rotateY across items reads as noise
-  - Reference: examples/cta-orbit-collapse.html uses rotateX 90, rotateY −45, z −100, scale 0
+  - Reference: ../../examples/cta-orbit-collapse.html uses rotateX 90, rotateY −45, z −100, scale 0
 
 ## Variations
 
diff --git a/skills/hyperframes-animation/rules/sine-wave-loop.md b/skills/hyperframes-animation/rules/sine-wave-loop.md
index 0754532d0e..81aff5ecbc 100644
--- a/skills/hyperframes-animation/rules/sine-wave-loop.md
+++ b/skills/hyperframes-animation/rules/sine-wave-loop.md
@@ -1,13 +1,15 @@
 ---
 name: sine-wave-loop
-description: Continuous breathing / idle ambient motion using trigonometry — keeps elements alive after entry settles. Pairs with virtually every entry rule.
+description: Bounded sine-driven idle — subtle jitter or a single genuinely-needed bounded ambient breath on a held element. De-emphasized: circular breathing as "aliveness" is cheap; prefer sequential reveal timed to the VO, then subtle jitter, before reaching here.
 metadata:
-  tags: idle, loop, breathing, sine, trigonometry, ambient, post-entry
+  tags: idle, jitter, bounded-ambient, sine, trigonometry, low-amplitude, post-entry
 ---
 
-# Sine Wave Loop (Breathing / Idle)
+# Sine Wave Loop (subtle jitter / bounded ambient)
 
-Keeps elements alive after the entry beat finishes. Subtle continuous floating using `Math.sin` driven by a long-running timeline tween.
+> **Reach for this last.** Per the motion doctrine (`references/motion-language.md`): **circular breathing — scaling text/cards up and down to look "alive" — is cheap, the agent's reflexive cheat, and reads weak.** "I'd rather have NO motion than BAD motion." Before using this rule to keep a held frame alive, prefer (1) **sequential reveal timed to the voiceover** — reveal the next line/element when the VO says it, across the back ~50% of the scene; that, not ambient motion, is what fills a shot. If a frame has genuinely settled and still needs a touch of life, the **sanctioned move is subtle jitter** — a small, low-amplitude jitter (this rule, at the LOW end of its amplitude range). A full breathing loop is reserved for the rare case where a single held hero genuinely needs bounded ambient; keep it de-emphasized and small.
+
+Keeps a settled element from feeling dead — as **subtle jitter** or, rarely, a single bounded ambient breath — using `Math.sin` driven by a finite timeline tween. This is the implementation behind the "subtle jitter" move in the motion vocabulary; it is **not** a license to breathe every hero.
 
 ## How It Works
 
@@ -243,6 +245,7 @@ For HF (`onUpdate` doesn't expose frame directly), use the tween's `phase` value
 
 ## Key Principles
 
+- **Prefer reveal, then jitter, then breath** — circular breathing as "aliveness" is cheap and reads weak; "no motion over bad motion." First fill the back of a shot with **sequential reveal timed to the VO**; if it's genuinely settled and still feels dead, use this rule at the **LOW end of its amplitude range as subtle jitter**; a full breathing loop is the rare last resort on a single held hero, never stamped on every element.
 - **`sin(0) = 0`** — at the moment idle begins, the offset must be zero so there's no visible jump from the entry's settled state to idle. Start the phase tween at `phase = 0`.
 - **Amplitude subtlety — default to the LOW end of the range.** Scale `0.008-0.015` (push to 0.02-0.04 only when isolated / short scene / kinetic brief), rotation `±0.3-0.8°` (rarely needed at all), translation `±2-3px` (push to 4-6px only when isolated). Bigger and idle reads as "still animating" instead of "alive but resting" — and a viewer watching 5+ consecutive scenes at the upper end will read the whole film as "shimmering."
 - **Cycle duration: 2.5-4s per breath when idle is long, 1.5-3s otherwise** — 2.5-3s is a comfortable breathing cadence; under 1.5s feels frantic in a long-idle window; over 4s feels lifeless in a short one.
diff --git a/skills/hyperframes-animation/rules/spring-pop-entrance.md b/skills/hyperframes-animation/rules/spring-pop-entrance.md
new file mode 100644
index 0000000000..ea8fc47c74
--- /dev/null
+++ b/skills/hyperframes-animation/rules/spring-pop-entrance.md
@@ -0,0 +1,273 @@
+---
+name: spring-pop-entrance
+description: The canonical entrance pop — an element (or staggered group) arrives by scaling 0 → 1 on a smooth long-tail settle (power3 default); bouncy overshoot is a rare, explicitly-playful exception. fromTo so it's correct at t=0 under seek.
+metadata:
+  tags: spring, entrance, pop, scale, power3, settle, stagger, reveal, arrival
+---
+
+# Spring-Pop Entrance
+
+> **Smooth beats bouncy.** Per the motion doctrine (`references/motion-language.md`), this entrance **defaults to a smooth long-tail settle — `power3.out` (or `expo.out` for a faster arrival)** that decelerates cleanly into the resting size with **no overshoot**. Bouncy `back.out` overshoot is the **#1 instant turn-off** in agent-made videos and is almost never executed well; it is demoted here to a **rare, explicitly-playful exception** (a consumer / fun brand), never the default. When unsure, settle smoothly.
+
+THE entrance primitive: an element (or a staggered group of them) arrives on screen by springing from nothing — `scale: 0 → 1`, optionally with a small `y` rise — riding a **smooth long-tail ease (`power3.out` default)** so it grows confidently into its resting size and settles without bouncing. This is **arrival**, not reaction.
+
+Explicitly distinct from [press-release-spring.md](press-release-spring.md): that rule is a click/press → release feedback chain (a press phase, then a spring recovery to `1.0`). This one has **no press phase** — there is no prior resting state, the element did not exist on screen, it springs into being. Many blueprints used to borrow `press-release-spring` to fake an entrance; reach for this instead.
+
+## How It Works
+
+A single `fromTo` carries the whole arrival:
+
+1. **From-state**: `{ scale: 0, opacity: 0 }` — the element is collapsed to a point and invisible. Stated explicitly in the `from` object so a seek to `t=0` lands the element in this exact state (never rely on a CSS-hidden start — see Critical Constraints).
+2. **To-state (default)**: `{ scale: 1, opacity: 1, ease: "power3.out" }` — a long-tail decel that grows the element into its resting size and **settles smoothly, no overshoot**. Use `expo.out` instead for a punchier, faster-front arrival (still no bounce). This smooth settle is the house style; the bouncy `back.out` variant is the rare playful exception (see Variations).
+
+For a **group**, the same `fromTo` runs per element with a **deterministic, index-derived stagger** (`i * STAGGER`), and the total entry window is **capped** (`ITEM_COUNT × STAGGER ≤ ~0.5s`) so the group reads as one arriving beat, not a slow arpeggio.
+
+A small `y` rise (`y: 24 → 0`) layers a subtle "lifts into place" on top of the pop — optional garnish; the `scale` grow on a smooth ease is the load-bearing motion. (A `rotation` settle belongs only to the playful overshoot variant below.)
+
+## HTML
+
+```html
+<!-- Single hero pop -->
+<div
+  class="scene"
+  data-composition-id="pop-scene"
+  data-start="0"
+  data-duration="3"
+  data-track-index="0"
+>
+  <div class="pop-hero" id="hero">{heroLabel}</div>
+</div>
+
+<!-- Staggered group: nodes / cards / icons / pills / callouts -->
+<div
+  class="scene"
+  data-composition-id="pop-group-scene"
+  data-start="0"
+  data-duration="3"
+  data-track-index="0"
+>
+  <div class="pop-grid">
+    <div class="pop-item">{itemA}</div>
+    <div class="pop-item">{itemB}</div>
+    <div class="pop-item">{itemC}</div>
+    <div class="pop-item">{itemD}</div>
+    <div class="pop-item">{itemE}</div>
+    <div class="pop-item">{itemF}</div>
+  </div>
+</div>
+```
+
+## CSS
+
+```css
+.scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  background: {bgColor};
+}
+.pop-hero {
+  display: grid;
+  place-items: center;
+  width: {heroSize};
+  height: {heroSize};
+  background: {heroBg};
+  border-radius: HERO_RADIUS;
+  font-family: {font};
+  font-weight: 900;
+  font-size: HERO_FONT_SIZE;
+  color: {heroTextColor};
+  /* Pop scales around the center — see Critical Constraints */
+  transform-origin: 50% 50%;
+  will-change: transform;
+}
+.pop-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: GRID_GAP;
+  place-items: center;
+}
+.pop-item {
+  display: grid;
+  place-items: center;
+  width: {itemSize};
+  height: {itemSize};
+  background: {itemBg};
+  border-radius: ITEM_RADIUS;
+  font-family: {font};
+  font-weight: 800;
+  font-size: ITEM_FONT_SIZE;
+  color: {itemTextColor};
+  transform-origin: 50% 50%;
+  will-change: transform;
+}
+```
+
+## GSAP Timeline
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<script>
+  window.__timelines = window.__timelines || {};
+  const tl = gsap.timeline({ paused: true });
+
+  // --- Single hero pop (default: smooth long-tail settle, no overshoot) ---
+  // fromTo states the collapsed start explicitly so the hero is correct at t=0
+  // under seek. power3.out grows scale into 1.0 and decelerates smoothly.
+  tl.fromTo(
+    "#hero",
+    { scale: 0, opacity: 0 },
+    {
+      scale: 1,
+      opacity: 1,
+      duration: POP_DUR,
+      ease: "power3.out", // smooth beats bouncy; expo.out for a punchier front
+    },
+    ENTRY_AT,
+  );
+
+  // --- Staggered group pop ---
+  // Deterministic, index-derived stagger (no Math.random). The cap keeps the
+  // whole group inside one arriving beat: ITEM_COUNT * STAGGER <= ~0.5s.
+  const items = gsap.utils.toArray(".pop-item");
+  items.forEach((el, i) => {
+    tl.fromTo(
+      el,
+      { scale: 0, opacity: 0, y: Y_RISE },
+      {
+        scale: 1,
+        opacity: 1,
+        y: 0,
+        duration: POP_DUR,
+        ease: "power3.out",
+      },
+      GROUP_ENTRY_AT + i * STAGGER,
+    );
+  });
+
+  window.__timelines["pop-scene"] = tl;
+</script>
+```
+
+## Variations
+
+### Calm settle (refined / enterprise / "premium calm") — default
+
+`power3.out`, no rotation, drop the `y` rise or keep it tiny (~12px). Reads as a confident, weighted settle — right for a hero wordmark or a single product shot landing. The safe default for premium / enterprise brands.
+
+### Firm settle (default product reveal) — default
+
+The everyday entrance. `power3.out` (or `expo.out` for a punchier front), optional `Y_RISE` ~24px. Clear, deliberate arrival that decelerates clean — the safe default for cards, icons, and callouts. **No overshoot.**
+
+### Bouncy pop (RARE — explicitly-playful only)
+
+The exception, not the default. **Only** for a deliberately playful register (a consumer / fun brand, a toy-like icon set) where a bounce is clearly the intent — never for product / enterprise / serious launch tone. Bouncy is the #1 turn-off and the agent rarely lands it, so reach for this knowingly and sparingly. Swap `power3.out` for `back.out(OVERSHOOT)` and (optionally) add a `rotation` settle so each element looks hand-placed:
+
+```js
+// Playful exception only — default to power3.out (see above).
+tl.fromTo(
+  el,
+  { scale: 0, opacity: 0, rotation: ROT_FROM },
+  { scale: 1, opacity: 1, rotation: 0, duration: POP_DUR, ease: `back.out(${OVERSHOOT})` },
+  GROUP_ENTRY_AT + i * STAGGER,
+);
+```
+
+Keep `OVERSHOOT` modest even here (≤ ~2) — past that it reads as a cartoon wobble, not an arrival.
+
+### Origin-anchored pop (callout springs from a pointer / source)
+
+When a callout should appear to grow out of a specific point (e.g. a station marker or pointer tip), set `transform-origin` to that point instead of center, so the `scale: 0 → 1` reads as "emerging from the source" rather than "inflating in place."
+
+```css
+.callout {
+  transform-origin: 0% 100%; /* bottom-left = pointer tip; match to the anchor */
+}
+```
+
+### Pop into a held slot — then hold (jitter at most)
+
+When a popped element then **holds** an ongoing slot (a constellation node, a persistent badge), do **not** bake an idle loop into this entrance — it must stay finite. Land the pop and let it hold still; if the held frame genuinely needs life, hand off to [sine-wave-loop.md](sine-wave-loop.md) for **subtle jitter** (low amplitude) on a separate, later tween — not a breathing loop. Prefer revealing the next element on its VO cue over keeping this one animating.
+
+## How to Choose Values
+
+- **EASE** — the settle curve (the load-bearing decision)
+  - Default: **`power3.out`** — a smooth long-tail settle, no overshoot; the house style for product / enterprise / serious tone. Use `expo.out` for a punchier, faster-front arrival (still smooth).
+  - Playful exception only: `back.out(OVERSHOOT)` — see the Bouncy pop variation; reach for it only when a bounce is clearly the brand intent.
+
+- **OVERSHOOT** — `back.out(OVERSHOOT)` overshoot strength — **only used in the rare bouncy variant**; the smooth default has no overshoot dial
+  - Range (playful only): ~1.3 (barely) → ~2.0 (clearly bouncy)
+  - Constraints: keep ≤ ~2 — past that the overshoot exceeds the element's bounds and reads as a cartoon wobble, not an arrival. If you're not in the explicitly-playful case, don't use this — use `power3.out`.
+
+- **POP_DUR** — duration of each element's `scale: 0 → 1` tween
+  - Range: 0.4 – 0.7 s
+  - Effects: shorter = tight snap; longer = a looser, more floating pop
+  - Constraints: the main subject must be visible by **`t ≤ 0.5s`** — keep `ENTRY_AT + POP_DUR`'s readable midpoint early; don't let the hero finish arriving after the half-second mark
+
+- **STAGGER** — gap between successive items' start times (group only)
+  - Range: 0.04 – 0.08 s
+  - Effects: < 0.04 reads as a simultaneous chord; > 0.08 feels lazy / arpeggiated
+  - Constraints: **`ITEM_COUNT × STAGGER ≤ ~0.5s`** (the cap) — beyond that the group stops reading as one beat. Cap the per-item stagger for large groups: `STAGGER = min(0.06, 0.5 / ITEM_COUNT)`
+
+- **ITEM_COUNT** — number of elements in a group pop
+  - Range: 3 – 9
+  - Effects: 3 = sparse; 9 = full grid. More than ~9 forces `STAGGER` so small the stagger vanishes — switch to a wipe/sweep reveal instead
+
+- **Y_RISE** — optional upward offset the element lifts from (`y: Y_RISE → 0`)
+  - Range: 0 (pure pop) – 32 px
+  - Effects: adds a subtle "lifts into place"; keep small so the `scale` pop stays dominant
+  - Constraints: 0 for the calm-settle variant; never large enough to read as a slide-up (that's a different primitive)
+
+- **ROT_FROM** — optional starting rotation, **playful (bouncy) variant only** (`rotation: ROT_FROM → 0`)
+  - Range: −10° – +10°
+  - Effects: a small tilt that resolves makes the element look hand-placed
+  - Constraints: derive sign/size deterministically from index if you want alternating tilt (e.g. `i % 2 ? 6 : -6`) — never `Math.random`
+
+- **ENTRY_AT / GROUP_ENTRY_AT** — timeline offset before the (group's) pop begins
+  - Range: 0 – 0.4 s
+  - Effects: > 0 gives a beat of quiet before the arrival; keep small so the subject still lands by `t ≤ 0.5s`
+
+### Geometry & tokens
+
+- **{heroSize} / {itemSize}** — footprints. A hero entrance should occupy a clearly readable share of the frame; group items size down so the grid fits with `GRID_GAP` breathing room.
+- **HERO_RADIUS / ITEM_RADIUS** — `height × 0.15` (sharp) → `height / 2` (pill).
+- **{heroBg} / {itemBg} / {\*TextColor}** — surface + label tokens; inherit from the composition palette.
+
+## Key Principles
+
+- **Smooth beats bouncy** — default to `power3.out` (or `expo.out`): a long-tail settle into `scale: 1`, no overshoot. Bouncy `back.out` is the rare, explicitly-playful exception (the #1 turn-off, and the agent rarely lands it). When unsure, settle smoothly.
+- **fromTo, always** — the collapsed `{ scale: 0, opacity: 0 }` start is stated in the `from` object so a seek to `t=0` lands it exactly there. An entrance built on a CSS-hidden start (e.g. `opacity:0` in CSS + a `.to()`) flickers under HF seek — the element renders visible before the tween claims it.
+- **Easing carries the motion, not keyframes** — let the ease produce the settle for free. Don't hand-key a `scale: 1.1` mid-state; that double-bounces and fights the curve. (And in the playful variant, the overshoot is a byproduct of `back.out`, not a hand-keyed bounce.)
+- **The grow is the motion** — `scale` is load-bearing; the `y` rise (and, in the playful variant, the `rotation` settle) is garnish layered on top. If you drop everything but the `scale` grow, it should still read as a clean entrance.
+- **Cap the stagger window** — a group must arrive inside ~0.5s total or it stops reading as one beat and starts reading as a slow list reveal. Derive the stagger from `ITEM_COUNT` so it self-caps.
+- **Deterministic per index** — all stagger and any rotation/tilt variation comes from the loop index, never `Math.random` — the renderer must produce the identical frame on every seek.
+- **Visible early** — the main subject must be on screen by `t ≤ 0.5s`. A hero that finishes arriving at `t=1s` wastes the opening beat.
+- **Don't bake an idle loop here** — this entrance is finite. If the element then holds a slot, hand off to `sine-wave-loop` on a later tween; an infinite `repeat`/`yoyo` here breaks seek.
+
+## Critical Constraints
+
+- **Timeline must be paused**: `gsap.timeline({ paused: true })`
+- **Registry key = `data-composition-id`**
+- **Entrances use `fromTo`** — explicit `{ scale: 0, opacity: 0 }` from-state; never rely on a CSS-hidden starting state
+- **No CSS `transition`** on popped elements — those interpolate independently of HF seek and cause flicker
+- **No `repeat` / `yoyo` / infinite tweens** — this is a finite arrival; idle motion is a separate `sine-wave-loop` tween
+- **No `Math.random` / `Date.now`** — stagger and tilt are index-derived and deterministic
+- **GSAP transform aliases only**: `x`, `y`, `scale`, `rotation`. Never tween `width` / `height` / `left` / `top`
+- **`transform-origin: 50% 50%`** for an in-place pop (default); set it to the source point only for the origin-anchored variation
+- **Default ease `power3.out`** (smooth, no overshoot); `back.out(OVERSHOOT)` only in the explicitly-playful variant, and there keep **`OVERSHOOT ≤ ~2`** — beyond that it reads as a cartoon wobble, not an arrival
+- **`ITEM_COUNT × STAGGER ≤ ~0.5s`** — the group must land inside one beat
+- **`will-change: transform`** on popped elements, especially groups — many simultaneous spring tweens benefit from compositor hints
+
+## Combinations
+
+- [sine-wave-loop.md](sine-wave-loop.md) — at most **subtle jitter** on a held node/badge AFTER its pop lands (don't bake any loop into the entrance; and prefer a VO-timed reveal over ambient motion — see that rule's caution)
+- [center-outward-expansion.md](center-outward-expansion.md) — elements pop in as they radiate from center to their slots
+- [press-release-spring.md](press-release-spring.md) — the reaction counterpart: once popped in, a button can take a press→release; this rule supplies the arrival, that one the click feedback
+
+## Pairs with HF skills
+
+- `/hyperframes-animation` — `power3.out` settle (smooth default), `fromTo` entrances, deterministic stagger
+- `/hyperframes-core` — composition wiring
+- `/hyperframes-cli` — `hyperframes lint`
diff --git a/skills/hyperframes-animation/rules/stat-bars-and-fills.md b/skills/hyperframes-animation/rules/stat-bars-and-fills.md
index a25d305efe..a2e654ca28 100644
--- a/skills/hyperframes-animation/rules/stat-bars-and-fills.md
+++ b/skills/hyperframes-animation/rules/stat-bars-and-fills.md
@@ -9,12 +9,12 @@ metadata:
 
 The graphics that give a stat **visual weight** beside its number: a small bar chart, a progress bar/ring filling to a percentage, or a star row filling to a fractional rating. Pair these with [counting-dynamic-scale.md](counting-dynamic-scale.md) (the number) for a complete stat scene.
 
-**Layout archetype — pick ONE and hold it across all stats:**
+**Layout blueprint — pick ONE and hold it across all stats:**
 
 - **Single-focus** — one centered frame, the number is the hero, a ring or bar sits under/around it. Cleanest for a sequential reveal (stat 1 → stat 2 → stat 3 in the same frame).
 - **Split-frame** — big number on the left, paired graphic on the right. Better when stats are shown together or each needs a distinct visual.
 
-Don't mix archetypes between stats in one piece — that reads as inconsistent.
+Don't mix blueprints between stats in one piece — that reads as inconsistent.
 
 ## 1 — Growth Bars (CSS `scaleY` stagger)
 
@@ -135,7 +135,7 @@ tl.to(
 - **Transforms only** — `scaleY` / `scaleX` / `clipPath`, never `width`/`height` tweens (runtime-forbidden).
 - **Match the number's timing** — the fill and the count-up should peak together (same start + ease), so the stat resolves as one beat, not two.
 - **Measure, don't hard-code** — ring length via `getTotalLength()`; a hard-coded circumference breaks if the radius changes.
-- **One accent hue, consistent archetype** — see `hyperframes-creative/references/data-in-motion.md`.
+- **One accent hue, consistent blueprint** — see `hyperframes-creative/references/data-in-motion.md`.
 
 ## Critical Constraints
 
diff --git a/skills/hyperframes-animation/rules/vertical-spring-ticker.md b/skills/hyperframes-animation/rules/vertical-spring-ticker.md
index e71852cd93..88bbd17ec0 100644
--- a/skills/hyperframes-animation/rules/vertical-spring-ticker.md
+++ b/skills/hyperframes-animation/rules/vertical-spring-ticker.md
@@ -159,16 +159,16 @@ Each spring fires at a different time, settles, then the next fires. When summed
 - **ITEM_HEIGHT** — px height of each ticker slot AND the masked window.
   - Range: ~`ITEM_FONT_SIZE × 1.25`; the line must hold capital descenders without clipping
   - Constraints: **`.ticker` height MUST equal `.item` height** exactly — mismatched values cause partial items to peek above/below the mask
-  - Reference: examples/proof-logo-chain.html uses `204px`
+  - Reference: ../../examples/proof-logo-chain.html uses `204px`
 - **TICKER_WIDTH** — px width of the masked window.
   - Range: wide enough to hold the longest item without ellipsis; typically 30-60% of viewport width
 - **STEPS** — number of additive springs (number of state transitions, not number of items).
   - Range: typically 1-4; each step = one "click" in the slot-machine cadence
   - Constraints: `STEPS ≤ itemCount − 1` (you can only roll as far as there are items below the visible one)
-  - Reference: examples/proof-logo-chain.html uses `1` (single roll between two states)
+  - Reference: ../../examples/proof-logo-chain.html uses `1` (single roll between two states)
 - **STEP_DUR** — duration of each spring tween.
   - Range: 0.3-0.7s; under 0.3 the overshoot is invisible, over 0.7 the click reads as a slide
-  - Reference: examples/proof-logo-chain.html uses `0.45s`
+  - Reference: ../../examples/proof-logo-chain.html uses `0.45s`
 - **STEP_SPACING** — seconds between consecutive springs' start times.
   - Range: 0.3-0.5s; closer and the steps blur together (looks like linear scroll), further and the ticker feels lazy
   - Constraints: `STEP_SPACING ≤ STEP_DUR` so the previous step is still settling when the next fires (this is what makes them "additive")
diff --git a/skills/hyperframes-media/references/tts.md b/skills/hyperframes-media/references/tts.md
index 7f7b6c17a9..22ec77f0b4 100644
--- a/skills/hyperframes-media/references/tts.md
+++ b/skills/hyperframes-media/references/tts.md
@@ -51,7 +51,7 @@ node skills/hyperframes-media/scripts/heygen-tts.mjs ./script.txt -o narration.w
 node skills/hyperframes-media/scripts/heygen-tts.mjs --list   # public starfish voices
 ```
 
-- **Voice:** `--voice <id>` must be a **starfish** voice_id (`--list`, or `GET /v3/voices?engine=starfish`). v2-catalog ids are rejected with HTTP 400. Omit `--voice` and the script auto-picks the first English public starfish voice.
+- **Voice:** `--voice <id>` must be a **starfish** voice_id (`--list`, or `GET /v3/voices?engine=starfish`). v2-catalog ids are rejected with HTTP 400. Omit `--voice` (English) and it defaults to **Marcia** (`05f19352e8f74b0392a8f411eba40de1`, a fixed default so the choice is deterministic). Non-English with no `--voice` falls back to the first matching catalog voice.
 - **Output:** `.wav` → transcoded to 44.1k mono via ffmpeg; `.mp3` → raw bytes (no ffmpeg needed).
 - **Words:** `--words <path>` writes the flat `[{id,text,start,end}]` shape below, drop-in for the captions pipeline. HeyGen's `<start>`/`<end>` boundary sentinels are filtered out and ids are re-contiguous.
 - **Non-English:** `--lang <code>` (anything but `en`) is sent as the request `language`.
diff --git a/skills/hyperframes-media/scripts/lib/tts.mjs b/skills/hyperframes-media/scripts/lib/tts.mjs
index c21d2b87ba..e93b3c3d43 100644
--- a/skills/hyperframes-media/scripts/lib/tts.mjs
+++ b/skills/hyperframes-media/scripts/lib/tts.mjs
@@ -56,7 +56,11 @@ export async function resolveVoiceId({ provider, userVoice, lang = "en" }) {
     if (lang === "en") return "am_michael";
     throw new Error("Kokoro non-English needs an explicit --voice (see references/tts.md)");
   }
-  // heygen
+  // heygen — pin a fixed English default so the choice is deterministic. The old
+  // "first English voice the API returns" drifts whenever HeyGen re-sorts the
+  // public catalog. Marcia (mature, low female). Override with --voice / request.voice.
+  if (lang === "en") return "05f19352e8f74b0392a8f411eba40de1"; // Marcia · English · female
+  // Non-English: no fixed default — fall back to the first matching catalog voice.
   const payload = await heygenJSON(`/voices?engine=starfish&type=public&limit=50`, {
     headers: heygenAuthHeaders(),
   });
diff --git a/skills/pr-to-video/references/visual-design.md b/skills/pr-to-video/references/visual-design.md
index ba3ccda5e5..8584a599f6 100644
--- a/skills/pr-to-video/references/visual-design.md
+++ b/skills/pr-to-video/references/visual-design.md
@@ -32,7 +32,7 @@ Entrance: the snowball seats upper-left on a dim hill gradient. Development: it
 ```
 
 - **`effects`** — name atomic effect **ids** from `hyperframes-animation`'s rules index. **Cite ≥3 when you name no `blueprint`** (the worker composes them into the beat; fewer than 3 reads as generic motion); 1+ as accents when a blueprint already carries the choreography. With no blueprint, those **≥3 effects are the shot's phases** — your note must **sequence them** (one enters, one develops, one emphasizes), not list them as a flat set that all fires at entry. You cite; the worker **reads the recipe body and reproduces it** (not a name-guess).
-- **`blueprint`** — name **one** multi-phase blueprint id from `hyperframes-animation/blueprints-index.md` when a frame's beat wants a proven multi-phase shape. Two postures — both require the worker to read the recipe body (and run its `examples/<id>.html`) first:
+- **`blueprint`** — name **one** multi-phase blueprint id from `hyperframes-animation/blueprints-index.md` when a frame's beat wants a proven multi-phase shape. Two postures — both require the worker to read the recipe body first:
   - **Reproduce** — the blueprint fits the beat cleanly and the frame's content maps onto its slots; write the composition note shot-by-shot to match.
   - **Adapt** — the blueprint is the right _structure_ but the content / beat doesn't fit its exact form (or you want a fresher surface). Lead the note with a **`Base / Keep / Depart`** line — `Base:` the blueprint id · `Keep:` its **signature** move (never drop this) · `Depart:` what you change and why. Adapt may **extend or vary, never reduce below the shot model** — never flatten a multi-phase blueprint into a single entrance.
 
diff --git a/skills/product-launch-video/SKILL.md b/skills/product-launch-video/SKILL.md
index d8aab42c5d..98e88e7407 100644
--- a/skills/product-launch-video/SKILL.md
+++ b/skills/product-launch-video/SKILL.md
@@ -1,6 +1,6 @@
 ---
 name: product-launch-video
-description: "turn a product or marketing URL, pasted script, or brief into a product launch video, including SaaS promos, feature reveals, app launches, company promos, and product marketing videos. Use this skill when the user wants to market, launch, promote, or reveal a product. Do not use it for general non-launch website tours, non-product topic explainers, GitHub pull requests, captioning existing footage, or short unnarrated motion graphics. If the intent is unclear, route through /hyperframes first."
+description: "turn a product or marketing URL, pasted script, or brief into a product launch video, including SaaS promos, feature reveals, app launches, company promos, and product marketing videos. Use this skill when the user wants to market, launch, promote, or reveal a product. Do not use it for general non-launch website tours, non-product topic explainers, GitHub pull requests, captioning existing footage, or short unnarrated motion graphics. If the intent is unclear, route through /hyperframes first. This is the new shot-sequence architecture: every visual frame is authored as a time-coded shot sequence picked from a menu of golden blueprints, so frames develop over their full duration instead of freezing after entrance."
 ---
 
 > **media-use**: Before sourcing audio/images, call `/media-use` to resolve BGM/SFX/images from the HeyGen catalog. Run `--adopt` first to register existing assets. See `/media-use` skill.
@@ -11,7 +11,7 @@ Use this skill to capture a product, understand its brand, plan a launch video,
 
 > **Confirm the route before Step 0.** You are the orchestrator. Run each step, verify its gate, and only then continue to the next step. This skill is for a **product being marketed, launched, promoted, or revealed**, including requests such as "promo for our site" when the purpose is promotional. Route other intents elsewhere: a general non-launch website tour -> `/website-to-video`; a topic explainer with no product -> `/faceless-explainer`; a GitHub PR -> `/pr-to-video`; captions on existing footage -> `/embedded-captions`; a short unnarrated motion graphic -> `/motion-graphics`. If the user says only "make a video" or the route is uncertain, read `/hyperframes` first.
 
-You are the orchestrator. Work in `videos/<project>/`. Run steps in order and pass each gate before continuing. User-gated steps are Step 0, Step 3, and Step 6. Do every step yourself except Step 5, where you dispatch one sub-agent per frame. Do not put design or motion rules here; those live in the frame-worker sub-agent, `hyperframes-creative`, and `hyperframes-animation`.
+You are the orchestrator. Work in `videos/<project>/`. Run steps in order and pass each gate before continuing. User-gated steps are Step 0, Step 3, and Step 6. Do every step yourself except Step 5, where you dispatch one sub-agent per frame. Do not put design or motion rules here; those live in the frame-worker sub-agent, this skill's local `../hyperframes-animation/rules/` + `../hyperframes-animation/blueprints/`, and `hyperframes-creative`.
 
 Workflow: Step 0 setup -> `hyperframes.json`; Step 1 capture -> `capture/`; Step 2 design system -> `frame.md`; Step 3 storyboard/script -> `STORYBOARD.md` and `SCRIPT.md`; Step 3.1 audio -> `audio_meta.json`; Step 4 visual design -> enriched `STORYBOARD.md`; Step 5 frames -> `compositions/frames/NN-*.html` and `index.html`; Step 6 final render -> `renders/video.mp4`.
 
@@ -69,9 +69,9 @@ The script does the rest deterministically: copies the preset's `FRAME.md` → `
 
 Goal: Turn the brief and captured material into an approved frame-by-frame story plan.
 
-Read `references/story-design.md`, `../hyperframes-core/references/storyboard-format.md`, and `../hyperframes-core/references/script-format.md`. Use them to write `STORYBOARD.md` and, when narration is needed, `SCRIPT.md`.
+Read `references/story-design.md`, `../hyperframes-animation/blueprints-index.md`, `../hyperframes-core/references/storyboard-format.md`, and `../hyperframes-core/references/script-format.md`. Use them to write `STORYBOARD.md` and, when narration is needed, `SCRIPT.md`.
 
-Use `story-design.md` for story archetype, hook, persuasion logic, beats, `VO_MODE`, and asset choices. Choose each visual frame's `asset_candidates` from `capture/extracted/asset-descriptions.md` (the canonical inventory) — don't browse raw `capture/assets/`. Do not ask the user to pick assets unless that inventory is missing or unusable. Use the exact required fields from the storyboard and script references.
+Use `story-design.md` for story blueprint, hook, persuasion logic, beats, `VO_MODE`, and asset choices. As a **soft guide**, consult the role→blueprint menu in `../hyperframes-animation/blueprints-index.md`: for each beat, note a candidate blueprint id when one fits. Story truth still decides which beats exist — never force a beat to fit a blueprint, and never invent a beat just because a proven shape is available. Choose each visual frame's `asset_candidates` from `capture/extracted/asset-descriptions.md` (the canonical inventory) — don't browse raw `capture/assets/`. Do not ask the user to pick assets unless that inventory is missing or unusable. Use the exact required fields from the storyboard and script references.
 
 After drafting, show a frame-by-frame summary. In that same message ask the user two things: (a) to approve or request changes, and (b) whether they want a live preview of the storyboard scaffold (npx hyperframes preview) — open it only on a yes. Iterate until approved, and carry the preview choice to Step 6.
 
@@ -101,9 +101,9 @@ Goal: Add the visual direction, layout intent, and motion choices to each storyb
 
 Edit `STORYBOARD.md` in place. Do not create another storyboard. Use `frame.md` as source of truth for color, type, layout feel, and style.
 
-Read `references/visual-design.md`, `references/composition.md`, `references/motion-language.md`, and `../hyperframes-animation/`. Use `visual-design.md` for required frame fields and the required `## Video direction` block. Use `composition.md` for layout, hierarchy, focal points, and visual roles. Use `motion-language.md` and `../hyperframes-animation/` for valid effects and blueprint IDs. Do not invent effect names or blueprint IDs.
+Read `references/visual-design.md`, `../hyperframes-animation/blueprints-index.md`, `references/motion-language.md`, and `../hyperframes-animation/rules-index.md`. Use `visual-design.md` for the method (the time-coded shot sequence, the inline Layout vocabulary, and the required `## Video direction` block). Use `../hyperframes-animation/blueprints-index.md` to pick each frame's shot shape. Use `motion-language.md` (the motion vocabulary + the motion doctrine) and `../hyperframes-animation/rules-index.md` (valid rule names) for motion — do not invent motion names.
 
-For every visual frame, add required visual and motion fields, including `effects` and `focal` and/or `roles`. Add one video-wide `## Video direction` block for overall visual direction, motion style, pacing, and design rules.
+For every visual frame, write a **time-coded shot sequence** into `STORYBOARD.md` per `visual-design.md`'s method: pick the frame's blueprint (or compose), instantiate it with THIS product's content, and pace each Scene's reveal to the voiceover so the frame develops across its full duration instead of front-loading then freezing. State layout and motion **inline** per Scene (vocabularies in `visual-design.md` and `motion-language.md`). Add one video-wide `## Video direction` block.
 
 Do not change story, script, asset choices, `asset_candidates`, `transition_in`, or captured source material. Do not write HTML in this step.
 
@@ -111,7 +111,7 @@ Stage named assets after visual design is locked:
 
 `node <SKILL_DIR>/scripts/stage-assets.mjs --storyboard ./STORYBOARD.md --hyperframes .`
 
-**Gate:** every visual frame has `effects` plus `focal` and/or `roles`; `## Video direction` exists; `assets/` contains the named assets.
+**Gate:** every visual frame has a time-coded shot sequence whose reveals are paced to the voiceover (no front-loading); `## Video direction` exists; `assets/` contains the named assets.
 
 ---
 
@@ -129,7 +129,7 @@ Duration sync is mechanical: real voice duration wins; silent frames keep estima
 
 Before dispatch, read `sub-agents/frame-worker.md` and `../hyperframes-core/references/subagent-dispatch.md`. Dispatch one sub-agent per frame, in parallel if possible; otherwise run workers in waves. Each worker gets exactly one frame.
 
-Each worker context must include `PROJECT_DIR`, `frame_id`, canvas size, caption status and keep-out band if captions are enabled, and `ANIM_DIR` as the absolute path to `../hyperframes-animation/`. Each worker reads `frame.md`, its own `## Frame N` block from `STORYBOARD.md`, and the recipe body for each cited effect or blueprint ID. Each worker writes only `compositions/frames/NN-*.html`. Workers must never edit `STORYBOARD.md`.
+Each worker context must include `PROJECT_DIR`, `frame_id`, canvas size, caption status and keep-out band if captions are enabled, and `RULES_DIR` as the absolute path to this skill's `../hyperframes-animation/rules/`. Each worker reads `frame.md`, its own `## Frame N` block from `STORYBOARD.md`, the local rule recipe (`../hyperframes-animation/rules/<id>.md`) for each cited motion, and the frame's blueprint template (`../hyperframes-animation/blueprints/<id>.md`). Each worker writes only `compositions/frames/NN-*.html`. Workers must never edit `STORYBOARD.md`.
 
 As each worker returns, the orchestrator marks that frame as `animated` in `STORYBOARD.md`.
 
@@ -167,8 +167,6 @@ Inject transitions, run checks, pause for review, then render.
 
 If a command fails, surface stderr and stop — don't pile on recovery commands. Fix it yourself: the cheapest safe edit to `compositions/frames/NN-*.html`, then rerun the failed check.
 
-**Known false-positive — do not chase it.** `inspect` may report a handful of `text_box_overflow` errors of ~1–4px on the **caption** highlight words (selector `#caption-word-*` / `.caption-line`). The caption pill uses a deliberately snug `line-height` (set once in `scripts/captions.mjs`) and has **no `overflow:hidden`**, so a heavy display glyph's ink spills a few px into the pill's own padding — nothing is actually clipped. Treat these as expected and proceed. Do **not** inflate the caption `line-height` (it balloons the pill, which is worse). Only act on a `text_box_overflow` when it names a **frame** element (`#el-NN-*`), not a caption word.
-
 After checks pass, pause for user review. The video is assembled, viewable, and editable in Studio. Manage preview only once across Step 3 and Step 6: open it if the user asked earlier, offer it if they declined earlier, and do not ask again if they are already reviewing in Studio.
 
 Preview: `npx hyperframes preview`
@@ -189,17 +187,20 @@ Do not rerun `lint`, `validate`, `inspect`, or `snapshot` after rendering unless
 
 **Background scripts:** the workflow ships only these scripts under `scripts/`: `build-frame` for adopting + brand-remixing a frame preset into `frame.md` (+ caption skin); `audio` for TTS, transcription, BGM, SFX, and duration syncing; `captions`; `transitions` for inject and verify; `stage-assets` for copying frame-named assets into `assets/`; and `assemble-index`. Everything else is handled by the `hyperframes` CLI.
 
-| Read                                                                                                         | When                                                     |
-| ------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------- |
-| `[../hyperframes-creative/frame-presets/](../hyperframes-creative/frame-presets/)`                           | Step 2: choose and adopt a frame preset.                 |
-| `[../hyperframes-creative/references/design-spec.md](../hyperframes-creative/references/design-spec.md)`     | Step 2: apply brand tokens correctly.                    |
-| `[references/story-design.md](references/story-design.md)`                                                   | Step 3: plan the product-launch story.                   |
-| `[../hyperframes-core/references/storyboard-format.md](../hyperframes-core/references/storyboard-format.md)` | Step 3: write `STORYBOARD.md`.                           |
-| `[../hyperframes-core/references/script-format.md](../hyperframes-core/references/script-format.md)`         | Step 3: write `SCRIPT.md`.                               |
-| `[../hyperframes-media/references/tts.md](../hyperframes-media/references/tts.md)`                           | Step 3.1: choose or understand TTS providers and voices. |
-| `[references/visual-design.md](references/visual-design.md)`                                                 | Step 4: enrich the storyboard visually.                  |
-| `[references/composition.md](references/composition.md)`                                                     | Step 4: judge composition.                               |
-| `[references/motion-language.md](references/motion-language.md)`                                             | Step 4: judge motion language.                           |
-| `[../hyperframes-animation/](../hyperframes-animation/)`                                                     | Step 4: cite effect and blueprint IDs.                   |
-| `[sub-agents/frame-worker.md](sub-agents/frame-worker.md)`                                                   | Step 5: dispatch per-frame workers.                      |
-| `[../hyperframes-core/references/subagent-dispatch.md](../hyperframes-core/references/subagent-dispatch.md)` | Step 5: dispatch sub-agents safely.                      |
+The reusable, product-agnostic shot shapes live in `../hyperframes-animation/blueprints/` (indexed by `../hyperframes-animation/blueprints-index.md`).
+
+| Read                                                                                                                                                        | When                                                           |
+| ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
+| `[../hyperframes-creative/frame-presets/](../hyperframes-creative/frame-presets/)`                                                                          | Step 2: choose and adopt a frame preset.                       |
+| `[../hyperframes-creative/references/design-spec.md](../hyperframes-creative/references/design-spec.md)`                                                    | Step 2: apply brand tokens correctly.                          |
+| `[references/story-design.md](references/story-design.md)`                                                                                                  | Step 3: plan the product-launch story.                         |
+| `[../hyperframes-animation/blueprints-index.md](../hyperframes-animation/blueprints-index.md)`                                                              | Step 3: role→blueprint menu. Step 4: pick the shot shape.      |
+| `[../hyperframes-core/references/storyboard-format.md](../hyperframes-core/references/storyboard-format.md)`                                                | Step 3: write `STORYBOARD.md`.                                 |
+| `[../hyperframes-core/references/script-format.md](../hyperframes-core/references/script-format.md)`                                                        | Step 3: write `SCRIPT.md`.                                     |
+| `[../hyperframes-media/references/tts.md](../hyperframes-media/references/tts.md)`                                                                          | Step 3.1: choose or understand TTS providers and voices.       |
+| `[references/visual-design.md](references/visual-design.md)`                                                                                                | Step 4: write the frame's shot sequence (+ Layout vocabulary). |
+| `[references/motion-language.md](references/motion-language.md)`                                                                                            | Step 4: the motion vocabulary + the motion doctrine.           |
+| `[references/cut-catalog.md](references/cut-catalog.md)`                                                                                                    | Step 4-5: the cut catalog (worker builds within-frame seams).  |
+| `[../hyperframes-animation/rules-index.md](../hyperframes-animation/rules-index.md)` + `[../hyperframes-animation/rules/](../hyperframes-animation/rules/)` | Step 5: local rule recipe bodies for the cited motions.        |
+| `[sub-agents/frame-worker.md](sub-agents/frame-worker.md)`                                                                                                  | Step 5: dispatch per-frame workers.                            |
+| `[../hyperframes-core/references/subagent-dispatch.md](../hyperframes-core/references/subagent-dispatch.md)`                                                | Step 5: dispatch sub-agents safely.                            |
diff --git a/skills/product-launch-video/references/composition.md b/skills/product-launch-video/references/composition.md
deleted file mode 100644
index 8836e959b2..0000000000
--- a/skills/product-launch-video/references/composition.md
+++ /dev/null
@@ -1,119 +0,0 @@
-# Composition — product-launch visual-design judgment
-
-> The composition-judgment layer for **Step 4 (Visual design)**. You read it while enriching `STORYBOARD.md` frames: which layout, how much frame the hero fills, how many depth layers — **director decisions**. Concrete px (safe margins 96-150), scale (1.05 / 0.92), three-layer `box-shadow`, `perspective` values are the **frame worker's** job; you name the intent in the frame's composition note. Video composition is closer to film / poster design than webpage layout — no scrolling, no reflow; every frame is a fixed canvas, every pixel matters. Default canvas **1920×1080**; portrait `1080×1920` / square `1080×1080` per the storyboard `format`.
-
-## Squint test
-
-Squint (or blur the frame). Can you still pick out the most important element, the second, and clear spatial groups? If everything has equal weight after blur, hierarchy is broken — redesign before writing the note. The strongest frames pass this: one dominant block + one supporting structural element, everything else demoted.
-
-## Canvas zones (conceptual)
-
-```
-+--------------------------------------------------+
-|         Optional top chrome                       |
-|  +----------------------------------------------+ |
-|  |         Safe margin                          | |
-|  |  +----------------------------------------+  | |
-|  |  |       Primary content area             |  | |
-|  |  |     (center 65-75% of frame)           |  | |
-|  |  +----------------------------------------+  | |
-|  |  | Caption band (bottom ~17%, HARD w/ captions) | |
-|  |  +----------------------------------------+  | |
-|  +----------------------------------------------+ |
-+--------------------------------------------------+
-```
-
-- **Top chrome** — only for workspace-mockup frames; otherwise skip.
-- **Safe margin** — key content stays off the edges; hero / editorial frames need more air.
-- **Primary content area** — the center 65-75% is where the eye rests; body text never presses the edge.
-- **Caption band (bottom ~17%, HARD-reserved when captions are on)** — when the film has captions enabled (the frame's `Captions:` flag), the bottom ~17% of **canvas height** is reserved (landscape 1080h → bottom 180px, y 900-1080; portrait 1920h → bottom 320px, y 1600-1920): primary content and key visuals **cap at the band top**, and a centered hero anchors at **y ≈ 0.42 × height** (landscape ≈454, portrait ≈806), not the canvas midpoint. Background / ambient / surface layers are exempt and may stay full-bleed. Captions disabled → the zone is usable, but keep it clear anyway for bottom-edge consistency across frames.
-
-You write "hero word centered with generous safe margins"; you do not write `padding: 150px 120px 92px`.
-
-## Portrait & square (non-16:9 canvases)
-
-The zones, density, hierarchy, and depth principles all still apply; the **aspect ratio** changes, and a wide-frame layout does not transplant into a tall one. Design for the storyboard's `format` from the start — never plan landscape and "crop."
-
-- **Stack vertically, not side-by-side.** Portrait has little horizontal room: split-screen / triptych / 60-40 asymmetry become **top/bottom stacks**, vertical step lists, stacked bands. Square tolerates side-by-side only for two compact items.
-- **Vertical center moves with the canvas** — anchor a centered hero around **y ≈ 0.42 × height** (portrait ≈806, square ≈454), not a fixed 540.
-- **Type runs larger, fewer words per line** — narrow frames wrap long headlines badly; prefer short kinetic lines, bigger type, more vertical rhythm.
-- **Travels well to portrait:** Centered, Layered Depth, Full-Width Strip (now a stacked band), vertical Rule-of-Thirds. **Avoid** wide Split Screen and Triptych — use stacked equivalents.
-- **Density still rules** — primary visual ≥ 40% of canvas, ≥ 3 depth layers, measured against the tall frame; an empty top or bottom third reads as placeholder.
-- **Real 16:9 screenshots don't fit a tall frame** — never letterbox with dead bars, never stretch-distort. Instead: crop to the salient region; seat it as a top/bottom band with kinetic type filling the rest; or scale it inside a device / browser-frame mock.
-
-## 7 composition templates
-
-Use ≥3 different templates per video (5 frames → 3+, 9 frames → 4+). **Don't default every frame to centered**; never use the same layout class twice in a row.
-
-1. **Centered (hero / climax)** — one dominant element, generous breathing room. Brand reveal, key metric, CTA, climax.
-2. **Rule of thirds** — anchor on a thirds intersection; remaining space carries support or negative space. Feature showcase, demo + description.
-3. **Split screen (comparison / dual focus)** — left/right halves carry separate elements. Before/after, comparison, problem/solution.
-4. **Layered depth (immersive)** — foreground / midground / background differ in scale + opacity. Opening hooks, atmosphere, workbench beats.
-5. **Asymmetric (editorial)** — primary content pushed to one side (60/40, 70/30); intentional imbalance → tension + sophistication. Feature focus, dense info, editorial proof.
-6. **Triptych (three-panel)** — three equal zones for three capabilities / beats at once.
-7. **Full-width strip** — one horizontal band (ticker, logo chain, marquee), usually ~20% of canvas height.
-
-## Frame density — avoid empty frames
-
-Common failure: small elements floating in the center with empty space around them. Every frame must feel **intentionally filled**.
-
-- **Primary visual occupies ≥ 40% of canvas** — hero text 50-75% height × 60-80% width; a centered card 30-50% × 50-70%.
-- **≥ 3 visual layers** — background (gradient / particles / grid) + midground (main content) + foreground (emphasis / decoration).
-- **Openings and closings** are prone to emptiness — black background + a lonely line of text reads as placeholder. Add environmental layers: dual-radial swell, floating particles, brand-color ambient texture, low-opacity scanlines.
-- **Text-only frames still need visual elements** — logo, an asset, icon decoration, halftone field, brand-derived geometry.
-- **Feature the frame's `asset_candidates`** — story already chose the real assets for this frame (they're the highest-value material); a product screenshot at 60% + supporting text + an ambient layer feels full; the text alone feels empty.
-
-**Fullness test:** could this frame stand as a poster or social graphic? If it looks like a sparse slide → add layers.
-
-## Negative space
-
-Whitespace directs attention, it isn't waste. Tight grouping (icon + label) → small spacing; unrelated groups → large separation; asymmetric outer margins feel more designed than equal padding; a hero word keeps large side whitespace so one word carries the weight. **Failure modes:** everything equidistant (no grouping); unintended overlap; text tight against an edge; captions colliding with bottom visuals; the framework's default padding everywhere.
-
-## In-frame visual hierarchy
-
-Visual weight, strong → weak: **large image** › **motion** (moving beats static) › **high contrast** › **type scale** › **position** (center + upper third are golden). Combine **at least two** — an element that is large, moving, and upper-third is unquestionably primary.
-
-A title that is only _larger_ (sharing weight/color/spacing with body) reads weak. Stack dimensions:
-
-| Dimension | Strong contrast                             |
-| --------- | ------------------------------------------- |
-| Size      | 3:1 ratio or larger                         |
-| Weight    | 800-900 vs 400                              |
-| Color     | high contrast against background            |
-| Motion    | one element moving vs all else static       |
-| Position  | top / left = primary                        |
-| Space     | large surrounding whitespace vs equidistant |
-
-## Cards and grouping
-
-Spacing + alignment can group without a card container. **Use cards** when content is genuinely distinct, when a UI-demo group is independently actionable (command row, feature card), or when shadow-stacking communicates "lifted." **Don't** card for mere separation (use whitespace) or for a continuous list. **Never nest cards** — claustrophobic, muddy hierarchy. You write "comparison-split: left/right dual cards, three-layer shadow stack"; the worker writes the `box-shadow`.
-
-## Asset prominence
-
-The frame's assets (logos, product images, screenshots) are real and strongly brand-related — feature them, don't shrink them into decoration. A focal product screenshot fills **40-60% of the frame**; a logo stays recognizable at playback size; use the highest-quality version. **Never** replace a real asset with a generic decorative graphic when a real one exists.
-
-## Depth on a 2D canvas
-
-Layer **2-3 depth techniques** per frame to avoid a flat poster (concrete perspective / rotate / scale values are the worker's):
-
-| Technique        | Effect                                                                                     |
-| ---------------- | ------------------------------------------------------------------------------------------ |
-| Size difference  | larger = nearer, smaller = farther                                                         |
-| Blur             | blurred = background, sharp = foreground                                                   |
-| Opacity gradient | low = receding, full = primary                                                             |
-| Overlap          | foreground partially covers background                                                     |
-| Shadow stacking  | three-layer shadow = lift + brand feel                                                     |
-| Motion speed     | faster parallax = closer                                                                   |
-| Counter-scale    | camera pushes toward focus → background appears larger, focal CSS scale <1 but fills frame |
-
-You write "3 depth layers: background swell + midground product + foreground CTA glow; background counter-scales for the push"; the worker writes the scale values.
-
-## What should not appear
-
-Nav bars, footers, cookie banners, scrollbars, cursor arrows, browser chrome, unclickable buttons, generic decorative shapes replacing real assets, floating bokeh / purple-to-blue AI gradients (the "default AI cliché," banned). **Exception:** an intentional product-interface reconstruction for a UI-demo frame — nav bars, command panels, timeline tracks, CTA buttons give real context, making it read as a real workflow.
-
-## Composition note example
-
-> "Composition: asymmetric 60/40 — product screenshot occupies left 60%, copy + CTA right 40%. Generous safe margin; text capped inside the primary content area. 3 depth layers: background swell + midground screenshot + foreground CTA glow. Density: primary visual ~55%, ambient adds 5% scanline + architectural grid."
-
-One line per frame; never concrete px / scale / shadow recipes (the worker writes those).
diff --git a/skills/product-launch-video/references/cut-catalog.md b/skills/product-launch-video/references/cut-catalog.md
new file mode 100644
index 0000000000..1c54a5e776
--- /dev/null
+++ b/skills/product-launch-video/references/cut-catalog.md
@@ -0,0 +1,220 @@
+# Cut catalog — within-frame seams (worker-built)
+
+> **A worker build-recipe (Step 5) — the sibling of `../hyperframes-animation/rules/`, not a second motion doc.** These are within-frame cuts the **frame worker builds INSIDE its own composition** (Z-scale + blur + opacity tweens, or per-word x-staggers, all on the frame's own paused GSAP timeline). They are **not** the between-frame transition: story owns that via `transition_in`, which the harness's injector stamps from a **separate registry vocabulary** (`crossfade` / `blur-crossfade` / `push-slide` / `zoom-through` / `squeeze`) — the catalog names here (**cut-the-curve / inverse-zoom / waterfall**) are **not** valid `transition_in` values. Use this catalog when a frame's shot sequence has an internal seam — a within-scene text/element swap, a **Scene-to-Scene** cut (a `Scene` is a time window WITHIN one frame, **not** a frame-to-frame boundary), or a text-to-text line change — and you want it to read as one continuous move instead of a hard slideshow cut. (`zoom-through` lives in both worlds: a whole-frame wrapper transition in the registry, an element-level Z-cut here — same idea, different scope.)
+
+Four techniques that create depth and continuity:
+
+1. **Zoom-Through** — within-scene text swaps, Z-axis, moving TOWARD the viewer
+2. **Inverse Zoom-Through** — Z-axis swaps moving AWAY from the viewer
+3. **Cut the Curve** — between-scene transitions on x/y
+4. **Waterfall Cut** — word-by-word cut-the-curve with staggered exits and entries
+
+All four are the same underlying principle: **cut at peak velocity, match direction and
+speed on both sides of the cut.** The differences are axis, scope, and granularity.
+
+**Choosing which at a seam:** for an UNFINISHED phrase (building one larger idea across
+several visually distinct scenes that still approach the same point — multi-line text, a
+run of consecutive cards) use **cut-the-curve** / **waterfall**. For a STATE CHANGE (turning
+to a NEW part of the video — most often hook → context, between two distinct chapters) use
+**zoom-through**, and **inverse zoom-through** for an arrival / payoff beat. Chain these so
+the frame's internal seams feel like one camera moving through the content.
+
+---
+
+## Blur Logic (applies to all Z-axis variants)
+
+Blur sells the speed at the cut, but it must scale with the SUBJECT SIZE:
+
+| Subject                                                | Peak blur   | Why                                                                                                                                                                                                                                                 |
+| ------------------------------------------------------ | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Text-scale (headline, line, word group)                | **10px**    | At 20px text smears into illegibility — the eye loses the word it was tracking and the cut reads as a glitch, not speed. (Learned 2026-06-10: the until-now inverse zooms shipped at 20px and read mushy; 10px keeps letterforms readable mid-cut.) |
+| Full-frame surface (terminal window, card, screenshot) | **18–20px** | Big surfaces have edges and texture that survive heavy blur; lighter blur on a full-frame move reads as a rendering hiccup instead of motion.                                                                                                       |
+
+Both sides of a cut use the SAME peak blur — the value must match at the swap frame.
+Apply blur to the WRAPPER, never to individual children.
+
+---
+
+## 1. Zoom-Through (forward)
+
+### The Problem
+
+Text enters, holds, exits. Then next text enters, holds, exits. Each text block is
+independent — no depth, no continuity. The video feels like a slideshow.
+
+### The Principle
+
+A velocity-matched cut on the Z-axis. You **never see both texts at the same time.** The
+outgoing text scales toward the viewer (accelerating), blur and opacity peak at the cut
+point hiding a hard swap, and the incoming text continues scaling up from behind
+(decelerating into the focal plane). One continuous forward motion, two different texts.
+
+### The Three Phases
+
+**Phase 1: Exit** — text accelerates forward (toward viewer)
+
+- Scale: `1.0 -> 1.2`, Blur: `0px -> 10px` (text-scale; see Blur Logic), Opacity: `1.0 -> 0.15`
+- Scale/blur easing: `power3.in` (steep acceleration)
+- Opacity easing: `none` (linear — even dimming, separated from scale)
+- Duration: 0.2s
+
+**Phase 2: Hard cut** at peak velocity + peak blur
+
+- Outgoing: `opacity: 0` (instant via `tl.set`)
+- Incoming: `opacity: 0.15, scale: 0.75, blur: 10px` (instant via `tl.set`)
+- All properties match at the cut: blur, opacity, and scale DIRECTION (both scaling up)
+
+**Phase 3: Entry** — text continues forward (growing into focal plane)
+
+- Scale: `0.75 -> 1.0`, Blur: `10px -> 0px`, Opacity: `0.15 -> 1.0`
+- Easing: `expo.out` (steep initial burst matching exit velocity, long settle)
+- Duration: 0.5s
+
+### Why Opacity Must Be Separate on Exit
+
+Scale uses `power3.in` but that keeps opacity near 1.0 for most of the tween. Splitting
+opacity to its own tween with linear ease makes the dimming even. On entry, all properties
+can share `expo.out`.
+
+---
+
+## 2. Inverse Zoom-Through (backward)
+
+The mirror: the camera "pulls back" instead of pushing through. The outgoing element
+RECEDES away from the viewer; the incoming element arrives OVERSIZED (as if it had been
+just behind the camera) and retracts into the focal plane. Both move in the shrinking
+direction — same-direction rule preserved, just reversed.
+
+**When to use over the forward variant:** arrival beats. The incoming element lands with
+presence because it comes from larger-than-frame — right for a payoff line ("That changes
+today."), a giant reply, or a held end-state. Forward zoom-through reads as _progressing
+through_ content; inverse reads as _arriving at_ content.
+
+### The Three Phases
+
+**Phase 1: Exit** — element recedes (away from viewer)
+
+- Scale: `1.0 -> 0.8`, Blur: `0px -> 10px` (text-scale)
+- Scale/blur easing: `power3.in`; Opacity: `1.0 -> 0.15` on `none` (separate tween)
+- Duration: 0.2s
+
+**Phase 2: Hard cut**
+
+- Outgoing: `opacity: 0` via `tl.set`
+- Incoming: `opacity: 0.15, scale: 1.25, blur: 10px` via `tl.set`
+
+**Phase 3: Entry** — incoming retracts into place
+
+- Scale: `1.25 -> 1.0`, Blur: `10px -> 0px`, Opacity: `0.15 -> 1.0`
+- Easing: `expo.out`, Duration: 0.5s
+
+Shipped examples: `boring → until-now` and `B3 → "That changes today."` (sfx-music-launch);
+seams 3/4 in claude-paper (`follow-up → thinking`, `thinking → compose UI`).
+
+---
+
+## 3. Cut the Curve (Scene Transitions)
+
+### The Principle
+
+Use cut-the-curve for **all scene-to-scene transitions** on x and y axes. The outgoing
+scene's hero element accelerates in one direction, the cut lands mid-motion, and the
+incoming scene's hero element continues moving in the **same direction** and decelerates.
+Nothing exits fully off-screen and nothing enters from fully off-screen — **speed plus
+opacity fading trick the eye**; the partial moves are enough.
+
+### Same Path, Same Direction
+
+If Scene A's hero slides left, Scene B's hero enters from the right and continues sliding
+left. Both move leftward. One continuous motion.
+
+| Direction | Scene A exit   | Scene B entry start | Scene B entry end |
+| --------- | -------------- | ------------------- | ----------------- |
+| Leftward  | `x: 0 -> -230` | `x: +230`           | `x: 0`            |
+| Rightward | `x: 0 -> +230` | `x: -230`           | `x: 0`            |
+| Upward    | `y: 0 -> -230` | `y: +230`           | `y: 0`            |
+| Downward  | `y: 0 -> +230` | `y: -230`           | `y: 0`            |
+
+### Velocity matching via mirrored eases
+
+The cleanest match: exit `power4.in` and entry `power4.out` with the SAME distance and
+duration — mathematically the two halves of one `power4.inOut` composite, so the entering
+element picks up at exactly the 50% point of the notional path at identical velocity
+(e.g. 230px / 0.3s ≈ 3,070 px/s at the cut on both sides).
+
+The fade trick: the exit's opacity completes at ~25–30% of its travel (fade duration
+≈ 0.18–0.3s vs motion 0.3–0.34s) — the element vanishes while still visibly accelerating,
+and nothing has to reach the frame edge. Entry fades IN fast from ~0.35 under its
+deceleration. Time the LAST fading element to die right at the hard cut — gaps where
+nothing is moving read as awkward dead air.
+
+### Rules
+
+- Use cut-the-curve for all scene transitions — it's the default, not an accent
+- Same direction on both sides; mirrored `.in`/`.out` eases, same distance + duration
+- Exit duration short (0.2–0.4s), entry duration >= exit duration
+- Partial travel + fade, never full off-screen moves
+
+---
+
+## 4. Waterfall Cut (word-by-word cut-the-curve)
+
+Cut-the-curve at WORD granularity — the strongest version of the leftward cut for
+text-to-text seams. Each word of the outgoing line ramps out on its own pronounced curve;
+each word of the incoming line cascades in mid-flight. The stagger turns the cut into a
+wave the eye rides across the seam.
+
+### Exit (per word)
+
+- Motion: `x: 0 -> -230` over 0.34s on **power4.in** — a much more pronounced ramp than
+  the usual power2: the word barely creeps, then RIPS
+- Fade: `opacity -> 0` over 0.18s (separate tween, `power1.in`) — completes when the word
+  is only ~25–30% into its travel
+- Stagger: reading order, ~0.022s per word, timed so the LAST word finishes fading right
+  at the hard cut
+
+### Entry (per word)
+
+- `fromTo x: +230 -> 0, opacity: 0.35 -> 1` over 0.3s on **power4.out** — the mirrored
+  back half of the composite; every word ignites already moving at matched velocity
+- Waterfall stagger with SHRINKING gaps (start 0.05s, multiply by ~0.84 per word) so the
+  cascade accelerates across the line — the cascade should speed up word over word, not run
+  at a flat per-word delay
+- Pre-set all words to `x: +230, opacity: 0` at build time — `immediateRender: false`
+  alone leaves un-started words sitting visible at rest during the stagger window
+
+### Whole-line variant
+
+A single-line beat (e.g. a big intro line) exits as one group with the same pronounced
+ramp, but stretch its fade to ~0.3s ending ~0.02s before the cut — a lone element that
+fades early leaves dead air that a word cascade would have covered.
+
+Shipped example: `until-now.html` B1→B2→B3 (sfx-music-launch).
+
+---
+
+## Choosing a Variant
+
+|                | Zoom-Through                | Inverse Zoom                | Cut the Curve     | Waterfall Cut             |
+| -------------- | --------------------------- | --------------------------- | ----------------- | ------------------------- |
+| Scope          | Within-scene text swap      | Arrival/payoff beat         | Between scenes    | Text-to-text seam         |
+| Axis           | Z, toward viewer            | Z, away from viewer         | X / Y             | X, per-word               |
+| Peak blur      | 10px text / 20px full-frame | 10px text / 20px full-frame | none required     | none (fade does the work) |
+| Opacity at cut | 0.15                        | 0.15                        | exit faded by cut | last word dies at cut     |
+| Feel           | progressing through         | arriving at                 | carried sideways  | a wave across the seam    |
+
+---
+
+## Anti-Patterns
+
+| Don't                                    | Why                                         | Instead                                                |
+| ---------------------------------------- | ------------------------------------------- | ------------------------------------------------------ |
+| Two texts visible during a zoom-through  | Overlapping text breaks the Z-axis illusion | Hard cut at blur peak, one text at a time              |
+| 20px blur on text-scale subjects         | Letterforms smear; reads as a glitch        | 10px for text, 18–20px only full-frame                 |
+| Elements on different paths across a cut | Eye tracks one direction, cut goes another  | Same property, same direction                          |
+| Mismatched blur/opacity at the swap      | Visible flash or brightness jump            | Identical values at the cut frame                      |
+| Gentle easing on entry (`power2.out`)    | Entry velocity feels slower than exit       | Mirror the exit: `power4.out` / `expo.out`             |
+| Full off-screen exits / entries          | Wastes time and breaks the speed illusion   | Partial travel + early fade                            |
+| Lone element fading long before its cut  | Dead air at the seam                        | Fade ends ~0.02s before the cut, or use a word cascade |
+| Zoom-through on body text                | Small text at 0.75 scale is unreadable      | Only headlines and short phrases                       |
+| Scene cuts without cut-the-curve         | Static cuts feel like a slideshow           | Cut-the-curve is the default                           |
diff --git a/skills/product-launch-video/references/motion-language.md b/skills/product-launch-video/references/motion-language.md
index ddde39ccf9..d9d42f22ec 100644
--- a/skills/product-launch-video/references/motion-language.md
+++ b/skills/product-launch-video/references/motion-language.md
@@ -1,139 +1,156 @@
-# Motion language — product-launch visual-design judgment
+# Motion language — the move vocabulary + the motion doctrine + the seek-safe core
 
-> The motion-judgment layer for **Step 4 (Visual design)**. You name **each shot's choreography, spring intent, beat rhythm, holds, stillness, and the idle-motion budget** while enriching `STORYBOARD.md` frames; the **frame worker** maps intent to concrete GSAP eases / ms / stagger / code (via `hyperframes-animation`). A good promo feels like one continuous whole — one camera, one spring feel, **every shot directed across its full length** — not a pile of slides that animate once and freeze. You reference motion by **role**, never by curve: eases / durations resolve from `frame.md`'s motion tokens, named `entry` / `emphasis` / `exit` / `drift` (the pack's exact keys may differ); the worker maps the curve. Between-frame **transitions are not yours** — story names `transition_in`, the harness injects it.
+> The motion layer for **Step 4 (Visual design)**. When you write a frame's **time-coded shot sequence**, you name each scene's move **inline from the vocabulary below** — a named palette of the moves the golden corpus actually uses. Each move carries the **backing rule id** in this skill's local `../hyperframes-animation/rules/`; cite that id so the move resolves to a real recipe when a **frame worker** implements it in Step 5 (the worker reads the rule body in `../hyperframes-animation/rules/<id>.md` — it reproduces the move, it does not guess from the name). You name motion by **role / move name**, never by raw GSAP curve, ms, or stagger formula — the worker maps the curve. Between-frame **transitions are not yours**: story names `transition_in`, the harness injects it; that injected transition **is** the frame's exit. For cuts a worker builds INSIDE a frame (within-scene swaps, scene-to-scene seams), see the catalog in `cut-catalog.md`.
 
-## A frame is a shot, not a slide
+A good promo feels like one continuous film — one camera, one motion feel, **smooth and timed to the voiceover** — not a pile of slides that animate once and freeze. The doctrine in Part 2 is load-bearing: when in doubt, do what it says.
 
-The single failure that makes a promo read as PowerPoint: a frame whose content **animates in over the first ~0.8s, then freezes** for the rest of its duration while a slow drift plays underneath. The entrance is not the shot — it's the **first beat** of it. You direct the **whole duration**.
+---
 
-Three layers fill a shot, each governed by a different rule:
+# Part 1 — the move vocabulary
 
-| Layer                     | What                                                                                             | Rule                                                                        |
-| ------------------------- | ------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------- |
-| **Camera** (macro)        | ONE correlated move on the frame root — slow drift / dolly / push / parallax pan                 | **always on, the whole shot** — this is the "someone is filming this" layer |
-| **Choreography** (action) | the beat develops: entrance → mid-shot move (reveal / rearrange / morph / emphasis hit) → settle | **fill the duration** — a shot animated only at entry is a slide            |
-| **Idle life** (texture)   | ambient continuation on the 1-2 elements that hold a live slot — breathing, glow, float          | **budgeted** — this is where screensaver lives; cap it                      |
+Reach into this palette when naming a scene's motion. Pick the move that matches the beat, name it in the shot sequence, and cite the rule id after `→`. The blueprints (`../hyperframes-animation/blueprints/`) name these same moves in their `rule mapping`; you're drawing from one shared palette. Compose 2–4 across a shot's scenes (entrance → sequential reveal → settle), not all at once.
 
-The reconciliation that matters: **mandate choreography, budget idle life.** Purposeful, sequential motion that carries information should fill the shot; ambient, simultaneous motion that carries none should be capped. Many elements each floating independently reads as _screensaver / UI animation_; a shot that only enters then freezes reads as _slideshow_. Avoid both — **one camera move + a directed multi-phase action + 1-2 living elements**, nothing scattered.
+## Kinetic type
 
-## Multi-phase choreography — direct the full shot
+- **hard-cut / flash word-swap** — a word or line replaces the previous one on an instant cut (no fade/roll); the swap itself is the beat. → `discrete-text-sequence`
+- **in-place token cycle** — a fixed line holds and only its variable slot changes, token → token → token. → `discrete-text-sequence`
+- **per-word staggered reveal** — a phrase assembles word-by-word (or chunk-by-chunk), each landing on its own beat. → `dynamic-content-sequencing`
+- **kinetic beat-slam** — short phrases slam in on a shared percussive beat array, each with a distinct entrance, resolving on a locked finale; the recipe for "punchy / rhythmic" taglines. → `kinetic-beat-slam`
 
-Every non-still frame's timeline is choreographed across its length, not front-loaded into the entrance:
+## Typewriter
 
-```
-entrance → development → settle
-```
+- **type-on with caret** — text types in character-by-character behind a blinking caret. → `discrete-text-sequence` (+ `context-sensitive-cursor` for the caret blink / color)
+- **backspace-and-retype** — the line types, deletes the last word(s), and retypes a new one (typo-correction, reframe). → `discrete-text-sequence` (+ `context-sensitive-cursor`)
 
-- **entrance** — the beat's primary content arrives (hero `entry` / `heavy`; groups staggered).
-- **development (the phase that's usually missing → PPT)** — mid-shot, the content _does something_: a second element reveals, elements rearrange to a new layout, a card morphs to its next state, a count-up runs, an emphasis hit lands on the keyword. This is the motion that separates video from slides.
-- **settle** — the shot resolves and holds for its read; the camera + idle life continue underneath (never a hard freeze).
+## Count-up / data
 
-**Architecture:** in hyperframes only the **exit** is forbidden mid-video (the frame unmounts; the harness transition _is_ the exit). Everything _before_ the settle — including rich mid-shot development — is free and seek-safe. Build the development phase; skip only the exit (unless you are the final frame).
+- **value-scaled counter** — a number counts up and its font size grows with the value, so the climb itself escalates. → `counting-dynamic-scale`
+- **bars / progress / star wipe** — a number paired with a graphic that fills: bar-height stagger, a progress bar / ring filling, a fractional star-rating wipe. → `stat-bars-and-fills`
 
-When you name a **`blueprint`**, the development phases come from its recipe — write the composition note **shot-by-shot** to match. When you name **no blueprint**, the **≥3 cited effects ARE the phases** — sequence them (one enters, one develops, one emphasizes); **don't fire them all at t=0** (simultaneous entry collapses three phases into one slide).
+## Reveal / decode
 
-## Spring intent (by role, not curve)
+- **3D char flip-decode** — characters flip in 3D and resolve from scrambled glyphs to the real text (decryption feel). → `hacker-flip-3d`
+- **SVG self-draw** — an outline / icon / ring draws itself stroke-by-stroke. → `svg-path-draw`
 
-| Intent     | Feel                                        | Use                                               |
-| ---------- | ------------------------------------------- | ------------------------------------------------- |
-| **entry**  | confident slight overshoot, settles quickly | primary element entry (default)                   |
-| **gentle** | soft slide-in, no overshoot                 | background elements, subtle motion                |
-| **snappy** | tight overshoot, nearly instant             | UI elements, small icons, buttons                 |
-| **heavy**  | weighted deceleration                       | large images, prototype screenshots, hero visuals |
-| **slam**   | bouncy overshoot, intentionally loud        | logo / bell / impact moments                      |
+## Camera
 
-**Consistency:** similar elements share one intent (all icons `snappy`, all hero images `heavy`). Don't invent a unique ease + duration per element.
+- **push / focus / drift** — a sequential camera move on the frame root (pull-back → focus → push) plus continuous micro-drift; the cinematic baseline. → `multi-phase-camera`
+- **zoom-to-target** — zoom into a non-centered element (scale + counter-translate to keep it framed). → `coordinate-target-zoom`
+- **pan / focus-lock** — a virtual camera transforming one `.world` wrapper to pan / zoom / lock onto a region. → `viewport-change`
+- **camera-cursor-tracking** — the viewport locks to a moving focal point (a typing cursor), static framing then focal-locked tracking. → `camera-cursor-tracking`
 
-**Forbidden:** `bounce.out` / `elastic.out` (dated; real objects decelerate, they don't bounce — low overshoot for `entry` is fine, high overshoot only for clearly playful moments); a unique ease+duration per element (visual noise).
+## Layout motion
 
-## Duration intent
+- **cluster→outward expansion** — elements start clustered at center and expand outward to their final positions in lockstep. → `center-outward-expansion`
+- **orbit** — elements flip in from 3D space and settle into a continuous elliptical orbit (entry flips in-place at the orbital position). → `orbit-3d-entry`
+- **split-tilt cards** — two cards side-by-side with opposing rotationY tilts, entering from their respective sides (comparison / before-after). → `split-tilt-cards`
+- **logo/avatar ring + connectors** — avatars or logos on an elliptical ring with SVG connection lines to a center point, staggered entry. → `avatar-cloud-network`
 
-Reference by **tier** ("instant feedback" / "state change" / "layout change" / "entry animation"); the worker maps concrete ms / frames at 30fps. **A single entry should not exceed ~800ms** — for a longer buildup, use multi-element stagger or a development phase, **not** one long tween.
+## Surface / UI
 
-**Phase-to-phase within a shot is swift** — when one element makes way for the next (development), the outgoing move runs ~75% of an entry; arrival is deliberate, hand-off is quick. (The between-frame **exit** is the harness's transition, never your within-shot motion.)
+- **3D page-scroll reveal** — a full webpage as a tilted 3D card whose internal content scrolls to reveal specific sections. → `3d-page-scroll`
+- **cursor click + ripple** — a cursor moves to a target, depresses with it on click, and emits an expanding ripple. → `cursor-click-ripple`
+- **button press** — a tactile press: compression then spring recovery, optional release burst / glow. → `press-release-spring` (or `physics-press-reaction` for a click that compresses cursor + target together)
+- **keyword glow** — keywords light up with glow + scale + color on an attack-decay-rest envelope, synced to a word rail. → `asr-keyword-glow`
 
-## Stagger cap
+## Morph / handoff
 
-When staggering N elements, **total ≤ 500ms** (longer feels dragged):
+- **scale-swap** — two elements at the same screen center hand off: the outgoing cluster shrinks + fades as the incoming one arrives. → `scale-swap-transition`
+- **card morph-anchor** — a container morphs apparent size + corner radius + surface between two shots, then fades to reveal the real target beneath (HyperFrames uses uniform `scale`, not `width`/`height`). → `card-morph-anchor`
 
-- **3-7 elements** — normal stagger, total 300-700ms.
-- **8+ elements** — tighten per-item delay, or stagger only the first few and enter the rest with the last.
-- Never let stagger run past 500ms.
+## Seam cuts (worker-built, inside a frame)
 
-## Beat structure across frames (the cross-frame rhythm)
+The velocity-matched cuts a worker authors between a frame's own Scenes. Name the seam in the shot sequence; the recipe is in the catalog, not a single `../hyperframes-animation/rules/` id.
 
-Rhythmic videos breathe: tension → release → tension → release. A clean reference shape for a ~46s video:
+- **zoom-through / inverse zoom-through** — a within-scene swap on the Z-axis; forward reads "progressing through", inverse reads "arriving at" (payoff). → `cut-catalog.md`
+- **cut-the-curve** — a scene-to-scene cut where both sides move the same direction at matched velocity. → `cut-catalog.md`
+- **waterfall cut** — cut-the-curve at word granularity, a wave across a text-to-text seam. → `cut-catalog.md`
 
-| Phase          | Duration | Rhythm             | Frame type                         |
-| -------------- | -------- | ------------------ | ---------------------------------- |
-| Slow setup     | 6-10s    | slow build         | hero establish, VO not yet present |
-| Fast montage   | 6-10s    | ~2s each           | quick cuts every 1.5-2s            |
-| Process reveal | 12-18s   | continuous, no cut | screen recording, real workflow    |
-| Closure        | 3-5s     | still, breathable  | logo, URL, CTA                     |
+## Emphasis / marker
 
-Allocate motion by a frame's energy: **high-energy** (hook, CTA) → faster entry, tighter stagger, `snappy`, busier development; **breathable** (brand reveal, emotional beat) → slower entry, `gentle`, longer hold, minimal development; **data** (stat, feature) → medium rhythm, clean stagger, count-up as the development phase.
+- **highlight / circle / burst / scribble** — a marker-drawn emphasis on a word or element: yellow highlight sweep, hand-drawn circle, radiating burst, scribble, or rough sketch-outline. → `css-marker-patterns`
 
-## Hold time — read time, not freeze time
+## Aliveness during a hold (use sparingly — see Part 2)
 
-After an element enters it must stay long enough to read (the worker maps concrete frames). "Hold" means **don't cut early** — the camera + idle life keep playing underneath; it is never a hard freeze.
+- **subtle jitter** — the sanctioned way to keep a settled frame alive: a small, low-amplitude positional/scale jitter on the held element. The motion-graphics trick that reads "alive" without reading "weak." → `sine-wave-loop` (low-amplitude register)
+- **live SVG internals** — internal SVG parts move so an icon feels alive (rotating hands, oscillating blades, pulsing dots, dash-flow); fine because it's the subject doing something, not a card breathing. → `svg-icon-enrichment`
+- **finite bounded ambient** — a single bounded breathe/drift on ONE held hero, only when genuinely needed; de-emphasized — prefer sequential reveal or jitter first. → `sine-wave-loop`
 
-| Content                              | Minimum hold |
-| ------------------------------------ | ------------ |
-| display text (1-3 words)             | ~1s          |
-| short sentence                       | ~1.5s        |
-| data / statistic                     | ~1.5s        |
-| product screenshot                   | ~2s          |
-| complex visual (diagram, comparison) | ~2.5s        |
-| hero / climax word                   | ~1-1.4s      |
+## The added moves — now backed by local rules
 
-Narration shorter than the needed hold → the frame's `duration` should still give the visual its read time.
+Five moves the golden corpus needs were added to this skill's `../hyperframes-animation/rules/`, rounding out the vocabulary above:
 
-## Stillness before climax — the marked exception
+- **depth-of-field / selective-blur** — blur the off-focus subset to spotlight the focal element → `depth-of-field-blur`
+- **motion-blur streak** — directional velocity blur on a fast fly-in / camera push-through → `motion-blur-streak`
+- **3D depth scatter-assemble** — glyphs/elements scatter into a tumbling 3D cloud, then reassemble → `depth-scatter-assemble`
+- **spring-pop entrance** — the canonical entrance pop; default to a smooth long-tail settle, overshoot only when explicitly playful → `spring-pop-entrance`
+- **ambient glow / bloom** — un-triggered soft glow blooming behind a static hero → `ambient-glow-bloom`
 
-Archive signature: a **0.3-0.75s pause** between the major action and its confirmation / result — the silence builds tension before the landing. It lands **because the rest of the video is choreographed** — stillness is a contrast against motion, so it only reads when motion is the baseline (if every frame is already frozen, a pause carries nothing). **Allocate it to only 2-3 frames per video, named in the `## Video direction` block**, where the narration lands a payoff. Stamped on every frame it becomes a tic and flattens the rhythm. Name `stillness-before-climax` in that frame's motion note; even then the camera move continues (still ≠ frozen).
+---
 
-## The idle-life budget — what may move during the hold
+# Part 2 — the motion doctrine (load-bearing)
 
-The 1-2 elements that keep moving _after_ the development settles. This is the layer that, overdone, becomes screensaver — so it is **capped**, not mandated:
+These four rules are the difference between a clip that reads as a serious launch video and one that reads as an agent-made PowerPoint. Follow them as written.
 
-1. **Camera move** — always present (the macro layer above); it alone keeps everything coherently alive.
-2. **At most 1-2 secondary live elements** — the ones carrying the beat (hero, CTA). Everything else holds.
-3. Prefer **macro move + depth parallax** over many independent floats.
+## 1. Smooth beats bouncy — `power3` is the default
 
-Secondary-slot menu (formulas are the worker's): **multiplicative breathing** (hero — small ±2-5% on final scale) · **glow pulse** (CTA / click target) · **sine float** (one decorative cluster at most) · **rotational drift** (3D cards, hero logo) · **orbit** (surrounding icons; counts as the one decorative cluster) · **halftone breathing** (atmospheric frames).
+Elements should use **long-tail decel curves that let them settle smoothly. `power3` is enough in most cases.** No bouncy, no overshoot, no `back.out` / `bounce.out` / `elastic.out` as a default.
 
-Multiplicative breathing is the signature for a hero **that holds a live slot** — not stamped on every hero. **Minimum amplitude ±6px or ±2-5% scale** — a 3px micro-float doesn't count; the budget caps how many things idle, it does not license invisible motion.
+Bouncy is the **#1 instant turn-off** in user-made Remotion / HyperFrames videos, and the agent almost never gets it right — it thinks bouncy adds emphasis, but it buys that emphasis at the cost of cleanliness. The serious launch-video shops feel the same. **Smooth always wins.** Overshoot is demoted to a **rare, explicitly-playful exception** (a consumer/fun logo slam, a deliberate bell-hit) — never the house style. Name the intent as a long-tail settle; the worker maps `power3` (or `expo.out` on a fast arrival). See `../hyperframes-animation/rules/spring-pop-entrance.md` — it now leads with the smooth settle.
 
-## Seek-safe motion — intents that don't survive the renderer
+## 2. Sequential reveal in the back ~50%, timed to the voiceover
 
-The frame is a **paused GSAP timeline seeked frame-by-frame**, so some "continuous" intents from a real-time engine cannot render — **don't name them**:
+This is the anti-PowerPoint mechanism — sharper than "put development in the middle."
 
-- **No infinite / forever motion** — "particles loop endlessly," "logo rotates forever," "marquee scrolls on repeat." Idle life is a **finite tween over the hold** (breathe up then back), never `repeat`/`yoyo`.
-- **No randomness or wall-clock** — `Math.random` particle fields, `Date.now` drift. Every motion is the same on every render; name deterministic motion only.
-- **Entrance + development only** (exit = final frame only) — the cross-frame exit is the harness's transition.
-- Express oscillation/breathing as a **bounded finite move**, not a loop; the worker writes it, but don't ask for a loop the timeline can't hold.
+- **Don't dump everything on screen in the first ~25%** of the scene. Rushing all content in up front is exactly what forces the slideshow feel.
+- **Reveal each piece — a line, a card, even an h1 — when the voiceover mentions it**, sequencing reveals across the **later ~50%** of the scene. Same amount of agent work, but the cut becomes coherent and gains rhythm.
+- **Less is more.** Fewer things on screen, each arriving on its VO beat, beats a full canvas that animated once and froze.
 
-## Forbidden — both failure modes
+Practically: a frame's shot sequence front-loads almost nothing — the entrance carries only what the VO is saying at t=0, and the rest of the elements wait in the timeline for their spoken cue. A reveal maps onto a development-class move from Part 1 (`per-word staggered reveal`, `cluster→outward expansion`, a `count-up`, an `asr-keyword-glow` synced to the word rail).
 
-**Slideshow (under-motion):**
+## 3. No lazy breathing, no bad pan/push — "no motion over bad motion"
 
-- Content animates in, then **freezes** for the rest of the shot (the PPT tell).
-- Only the entrance is animated; the remaining duration is a frozen hold under a drift.
-- The ≥3 cited effects **all fire at t=0** instead of sequencing into entrance / development / emphasis.
-- No mid-shot development on a non-still frame.
+The agent's two reflexive ways to fake "aliveness" both read cheap:
 
-**Screensaver (over-motion):**
+- **No lazy breathing.** Scaling cards/text up and down in a circular loop to look "alive" is the cheap tell. Don't reach for it.
+- **No bad slow pan / push in the back half.** A slow pan or push on elements in the later ~50% of a scene **disrupts the viewer's sightline and causes eye discomfort** — it actively makes the frame worse, not better.
 
-- **Every element** floating independently; idle motion with no information.
-- More than 1-2 elements idling at once; scattered sine floats as the "aliveness."
-- A 3px micro-float standing in for real motion.
+The fix for both is the same: **stagger element reveals in time with the script** (rule 2). And the governing principle: **"I'd rather have NO motion than BAD motion."** A held, still frame is better than a frame kept "alive" by breathing or a drifting camera. The **only sanctioned aliveness** during a hold is **subtle jitter** — a small low-amplitude jitter that keeps a frame from feeling dead without looking weak (it's in Claude videos now). Everything else holds.
 
-**Always:**
+## 4. Internal seams are velocity-matched cuts
 
-- `bounce.out` / `elastic.out`; a bespoke ease+duration per element; `repeat` / `yoyo`; all elements entering simultaneously (must stagger or sequence).
+When a frame has an internal seam — a within-scene swap, a Scene-to-Scene cut, a text-to-text line change — make it a **velocity-matched cut**, not a hard slideshow cut: cut at peak velocity, match direction and speed on both sides. The catalog (the four techniques, the blur logic, and which to use when) is `cut-catalog.md`; the moves are listed under **Seam cuts** in Part 1.
 
-## Motion note example
+## One-line summary
 
-> "Macro: slow dolly-in on the frame root across the whole beat. **Entrance** — hero enters `EASE.entry` (heavy); icons snappy-stagger (5 items, ~400ms). **Development** — icons rearrange into a row, then the result panel reveals beneath them. **Stillness-before-climax 0.6s** (allocated frame; only the dolly continues). **Settle** — result emphasis: text gentle entry + double-layer glow; idle hold with hero breathing ±3% as the one live element."
+Smooth long-tail (`power3`) over bouncy; reveal sequentially in the back ~50% timed to the VO (not dumped in the first 25%); no lazy breathing and no bad slow pan/push — prefer stillness, with subtle jitter as the only aliveness; cut at peak velocity with matched direction/speed (→ `cut-catalog.md`).
 
-One line for a single-shot frame; **shot-by-shot when the beat is multi-phase** (always, when you named a `blueprint`). Never concrete ease curves / ms / stagger formulas / JS — the worker writes those.
+---
+
+# Part 3 — the seek-safe core (hard rules)
+
+The frame is a **paused GSAP timeline seeked frame-by-frame**, so some "continuous" intents from a real-time engine can't render — don't name them. These are non-negotiable regardless of doctrine.
+
+- **No infinite / forever motion** — "particles loop endlessly," "logo rotates forever," "marquee on repeat." Any aliveness (the subtle jitter, a live SVG internal, a needed bounded ambient) is a **finite tween over the hold**, never `repeat` / `yoyo`.
+- **No randomness or wall-clock** — no `Math.random` particle fields, no `Date.now` drift. Every render must be identical; name deterministic motion only (stagger and any variation derive from the element index).
+- **Entrances use `fromTo`** — state the from-state explicitly so a seek to `t=0` lands the element correctly; never rely on a CSS-hidden start (it renders visible before the tween claims it, and flickers under seek).
+- **No CSS `transition` / `@keyframes` for motion** — CSS animation runs on the browser clock, independent of the HF seek clock; it desyncs and flickers. Drive all motion inside the paused GSAP timeline.
+- **Entrance + sequential reveal only — no mid-video exit.** The frame unmounts via the harness transition; that injected `transition_in` **is** the exit. Exit motion belongs only to the final frame. (Worker-built seam cuts in `cut-catalog.md` are within-frame, not the frame's exit.)
+
+## Forbidden — the failure modes
+
+**Slideshow (the primary failure):** everything dumped on screen in the first ~25%; content enters then freezes; nothing revealed on its VO cue. Fix with rule 2 (sequential reveal timed to the VO).
+
+**Cheap aliveness:** circular breathing as "life"; a slow pan/push in the back half disrupting the eye; many elements floating independently as "motion." Fix with rule 3 (stillness + subtle jitter only).
+
+**Bouncy:** `back.out` / `bounce.out` / `elastic.out` as the default entrance; hand-keyed overshoot. Fix with rule 1 (`power3` long-tail; overshoot only when explicitly playful).
+
+**Always:** no `repeat` / `yoyo`; no `Math.random` / `Date.now`; no all-elements-entering-simultaneously (sequence or stagger).
+
+## Naming motion in a shot — example
+
+> Scene 1 (0.0–1.0s): solid field; hero headline enters via **per-word staggered reveal** (`dynamic-content-sequencing`) on a smooth long-tail settle (`power3`); slow **push** on the root (`multi-phase-camera`) holds steady — no back-half re-push.
+> Scene 2 (1.0–3.0s): as the VO names each capability, five feature icons reveal **sequentially** via **cluster→outward expansion** (`center-outward-expansion`), then a **value-scaled counter** (`counting-dynamic-scale`) ticks up beneath them — the back-half reveal, timed to the script, not dumped at t=0.
+> Scene 3 (3.0–4.2s): hold on the result; **keyword glow** (`asr-keyword-glow`) lands on the payoff word as the VO says it; settles and holds still — at most **subtle jitter** (`sine-wave-loop`, low amplitude) keeps it alive; no breathing, no drift.
+
+Name the move + its rule id (or `cut-catalog.md` for a seam cut) per scene; let the worker pick curves, ms, and stagger — defaulting to `power3`.
diff --git a/skills/product-launch-video/references/story-design.md b/skills/product-launch-video/references/story-design.md
index a66c78a0af..8180025ef7 100644
--- a/skills/product-launch-video/references/story-design.md
+++ b/skills/product-launch-video/references/story-design.md
@@ -1,267 +1,373 @@
 # Story design — product launch video
 
-Use this reference in Step 3 to write `STORYBOARD.md` and `SCRIPT.md` for a product launch, promo, feature reveal, or marketing video.
+Step 3 of the product-launch flow. Output: `STORYBOARD.md` (the narrative plan, one frame per beat) and `SCRIPT.md` (the locked spoken narration).
 
-This file defines the story: what the video says, in what order, and why each frame exists. It does not define layout, visual effects, animation, or final markdown schemas. For exact file syntax, follow `../hyperframes-core/references/storyboard-format.md` and `../hyperframes-core/references/script-format.md`.
+This step decides **what the video says, in what order, and how each beat is said** — and it says each beat in the SHAPE of a proven script. It does not design layout, composition, or motion (that is Step 4). For exact file syntax follow `../hyperframes-core/references/storyboard-format.md` and `../hyperframes-core/references/script-format.md`.
 
-## Read first
+## What story design produces
+
+For every beat, four things:
+
+1. **Position in the SEQUENCE** — the shot order. Story truth decides which beats exist and in what order (the arc).
+2. **Voiceover written in a blueprint's script shape** — the spoken line, drafted to sound like the proven script for the shape this beat is reaching toward (see the script bank below).
+3. **A candidate `blueprint:` id** — the proven shot SHAPE this beat leans toward (a tag, not a commitment; Step 4 confirms or overrides).
+4. **`transition_in`** — how this beat enters from the one before it.
+
+The big idea: **the blueprint is applied from the very first step.** The blueprints were reverse-engineered from 50 golden clips; each one implies a proven script. So we write the VO in that script's shape from the start — the voiceover is blueprint-shaped before Step 4 ever runs, which makes the blueprint's hit-rate downstream high.
 
-Read these inputs before writing:
+This is still a SOFT discipline. Story truth comes first: **never invent, bend, drop, or reorder a beat to fit a blueprint.** The script patterns only shape HOW a beat is said and which proven shape it leans toward — they never decide which beats exist.
+
+## Read first
 
 1. `hyperframes.json` — locked brief: angle, length, aspect ratio, language.
-2. `frame.md` — tone, mood, design system, and brand register.
+2. `frame.md` — tone, mood, design system, brand register.
 3. `capture/extracted/visible-text.txt` — product facts, page copy, positioning, proof, CTA.
-4. `capture/extracted/asset-descriptions.md` — the only source for captured asset inventory.
+4. `capture/extracted/asset-descriptions.md` — the ONLY source for the captured asset inventory.
 5. `user_script.txt` and `VO_MODE`, when present.
 
-Do not inspect `capture/assets/`, contact sheets, screenshots, or raw captured files during Step 3. Treat `asset-descriptions.md` as the canonical asset list. Do not invent asset filenames.
+Do not inspect `capture/assets/`, contact sheets, screenshots, or raw files in Step 3. Treat `asset-descriptions.md` as the canonical asset list. Never invent asset filenames.
 
-## Output
+## Method
 
-Create two files:
+### 1. Extract the product truth
 
-- `STORYBOARD.md` — the narrative plan, one frame per beat.
-- `SCRIPT.md` — the locked narration, only for spoken frames.
+From the brief and captured text, name:
 
-Every storyboard frame must include the required fields from the storyboard format reference, plus the narrative metadata below.
+- **Audience** — who the video speaks to.
+- **Pain / desire** — what they already want fixed or achieved.
+- **Promise** — the one-line thesis of the whole video.
+- **Product role** — what the product does in the story.
+- **Proof** — features, UI moments, metrics, logos, demos.
+- **CTA** — what the viewer should do next.
 
-## Core rule
+Build the sequence around the **promise**, not a feature list. A website is an information layout; a video is an emotional sequence. Reorder, merge, and omit captured content freely — do not follow page order.
 
-A website is an information layout. A video is an emotional sequence.
+### 2. Choose the arc (the sequence backbone)
 
-Do not follow page order. Reorder, merge, omit, and reshape captured content into a clear launch story.
+Pick ONE arc — it fixes the beat order. Compound only when useful (e.g. `PAS with feature-benefit progression`).
 
-## Step 3 method
+| Arc                       | Use when                                         | Beat order                                                                  |
+| ------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------- |
+| `PAS`                     | Pain is known and urgent (broken B2B workflows). | hook → pain → agitation → solution tease → product intro → proof/demo → CTA |
+| `Future Pacing`           | Sells a new future / category / paradigm.        | imagine → name product → remove pain → mechanism → outcome → CTA            |
+| `Demo Loop`               | UI is self-explanatory; best shown working.      | question → product intro → demo cycle 1 → demo cycle 2 → trust → CTA        |
+| `BAB`                     | Bridges an old workflow to a better one.         | before → after tease → bridge/product → step 1 → step 2 → wow → CTA         |
+| `Feature-Benefit Cascade` | Feature-rich or desire/status-driven.            | category hook → feature → benefit → feature → benefit → climax → CTA        |
 
-### 1. Extract the product truth
+Use feature→benefit rhythm inside any arc when there are many capabilities — always translate a feature into viewer value, never stack raw features.
 
-From the brief and captured text, identify:
+`frame.md` tunes the VOICE, not the arc: restrained/B2B → plain, low-hype; bold/launch → short, punchy; warm/human → friendly direct address; premium/cinematic → aspirational, fewer words.
 
-- Audience — who the video is speaking to.
-- Pain or desire — what the viewer already wants fixed or achieved.
-- Promise — the one-line thesis of the video.
-- Product role — what the product does in the story.
-- Proof — features, UI moments, metrics, logos, examples, or demos.
-- CTA — what the viewer should do next.
+### 3. Lay out the beats, each with a role
 
-Write the storyboard around the promise, not around a list of features.
+One clear job per beat — never "more benefits" or "another feature." Beat `type` (= blueprint **role**):
 
-### 2. Match the register to `frame.md`
+`hook | pain_point | product_intro | feature_showcase | benefit_highlight | social_proof | branding | cta`
 
-Use `frame.md` as a soft guide:
+The opening 3–5s needs ONE hook that creates tension, curiosity, or desire — a shocking stat, pain validation, a rhetorical question, direct address, an imagine/future-pace, a category announcement, or visual spectacle. Never open with generic company description.
 
-| `frame.md` signal             | Story effect                              |
-| ----------------------------- | ----------------------------------------- |
-| restrained, editorial, B2B    | plain, confident, low-hype script         |
-| bold, kinetic, launch-like    | short hooks, punchier beats               |
-| warm, human, playful          | friendly direct address, lighter phrasing |
-| premium, cinematic, spectacle | aspirational framing, fewer words         |
+A UI demo is usually a SEQUENCE of 3+ consecutive `feature_showcase` / `benefit_highlight` beats on the same surface (input → response → result → benefit), not one isolated frame.
 
-The product truth decides the arc. The visual system tunes the voice.
+### 4. Write each beat's VO in its blueprint's script shape
 
-### 3. Choose one outer arc
+For each beat, look up its **role** in the script bank below, find the blueprint whose SHAPE fits the beat you already chose, and **draft the voiceover to sound like that blueprint's pattern.** Tag the candidate `blueprint:` id on the frame.
 
-Pick one primary arc. Use a compound only when useful, e.g. `PAS with feature-benefit progression`.
+- The bank is the heart of this step: proven product-launch clips reversed into the one VO line each implies, grouped by role → blueprint, each with a **pattern** to imitate.
+- If two blueprints fit the beat, prefer the one whose script shape matches the line you'd naturally write.
+- If NO shape fits the beat, omit `blueprint:` and write the VO plainly — Step 4 composes that frame freely. Do not force a wrong shape.
+- **Vary the shapes across the video.** Reaching for the same blueprint every beat re-creates the sameness this exists to avoid. `kinetic-type-beats` is the workhorse (6 roles) — lean on it, but not everywhere.
+- **Write each VO as discrete cues, not one run-on breath.** Step 5 reveals each on-screen piece _when the voiceover names it_ (the anti-PowerPoint mechanism — `motion-language.md` Part 2). A line with clear phrase boundaries — "Content, sentiment, engagement — in one place" — hands the shot its reveal cadence for free; a single long clause leaves the frame nothing to pace to. The bank patterns are already cue-segmented — keep that rhythm.
 
-| Arc                       | Use when                                                          | Beat order                                                                   | Reveal timing |
-| ------------------------- | ----------------------------------------------------------------- | ---------------------------------------------------------------------------- | ------------- |
-| `PAS`                     | The pain is known and urgent. Best for broken B2B workflows.      | hook → pain → agitation → solution tease → product intro → proof/demo → CTA  | late          |
-| `Future Pacing`           | The product sells a new future, category, or paradigm.            | imagine → name product → remove pain → show mechanism → show outcome → CTA   | early         |
-| `Demo Loop`               | The UI is self-explanatory and the product is best shown working. | question → product intro → demo cycle 1 → demo cycle 2 → trust/benefit → CTA | early         |
-| `BAB`                     | The product bridges an old workflow to a better one.              | before → after tease → bridge/product → step 1 → step 2 → step 3/wow → CTA   | early-mid     |
-| `Feature-Benefit Cascade` | The product is feature-rich or desire/status-driven.              | product/category hook → feature → benefit → feature → benefit → climax → CTA | frame 1       |
+Step 3 only TAGS the candidate id and writes the shaped VO. Step 4 (visual design) picks and instantiates the blueprint into a time-coded shot; it may override or drop a Step 3 candidate. The full menu with picking guidance lives in `../hyperframes-animation/blueprints-index.md`.
 
-Use feature-benefit rhythm inside any arc when the video has many capabilities. Do not stack several features without translating them into viewer value.
+---
 
-### 4. Build the frame sequence
+## The script bank — what each beat's VO sounds like
 
-Each frame needs one clear job. Avoid frames that only say “more benefits” or “another feature.”
+> Proven product-launch clips, each reversed into the one spoken line it implies. Grouped by **role → blueprint**. Real product names kept (swap in your own). Draft your beat's VO in the SHAPE of the matching pattern.
 
-Use these frame types:
+### HOOK
 
-`hook | pain_point | product_intro | feature_showcase | benefit_highlight | social_proof | branding | cta`
+**kinetic-type-beats** — the words ARE the motion
 
-For every frame, define:
+- Mailoji — "Still using a @gmail address? Or @outlook, or @hotmail, or @yahoo?"
+- Outrank — "Getting traffic is hard. Insanely hard."
+- AiAgent — "An AI agent that's easy to use — and optimised for you."
+- Uizard — "Transform your sketches into prototypes — automatically."
+- _Pattern:_ a punchy claim or rhetorical jab whose KEY WORD swaps in place (or escalates beat by beat) — the swap/escalation is the joke.
 
-- `type` — one of the allowed frame types.
-- `persuasion` — the specific persuasion move.
-- `beat` — the viewer emotion.
-- `scene` — a one-line visual idea, not detailed composition.
-- `voiceover` — spoken guide text, or empty for silent frames.
-- `asset_candidates` — real captured assets that could support the frame.
+**typewriter-reveal** — someone is typing this
 
-The prose under each frame should state:
+- "Need answers about your audience — right now?"
+- Contra — "You are more than your job title. You are more than your resume."
+- _Pattern:_ a relatable line typed live and edited mid-stream (a word backspaces and retypes) — the everyday thought, in your own words.
 
-- `narrativeRole` — why this frame exists in the story.
-- `keyMessage` — the one idea the viewer should remember.
+**spatial-pan-stations** — a panned timeline
 
-## Hook strategy
+- Rows — "From VisiCalc to Excel to Google Sheets — the spreadsheet has barely changed since 1979."
+- _Pattern:_ a march of named milestones across time, landing on "...until now / ...up to us."
 
-Pick one opening strategy for the first 3-5 seconds:
+**constellation-hub** — nodes ring a center, camera pushes in
 
-| Strategy                | Use when                                        |
-| ----------------------- | ----------------------------------------------- |
-| Shocking statistic      | A credible number proves the pain.              |
-| Pain validation         | The audience already knows the problem.         |
-| Rhetorical question     | You need curiosity and speed.                   |
-| Direct address          | The audience is clear and specific.             |
-| Imagine / future pacing | The product introduces a new future.            |
-| Category announcement   | The product is the category or launch headline. |
-| Visual spectacle        | The aesthetic is part of the pitch.             |
-| Trend positioning       | The product rides a timely market shift.        |
+- "Content, sentiment, engagement, analysis — every platform you're on, in one place."
+- _Pattern:_ a spread of tools/channels collapsing onto one center — "it connects everything."
 
-The hook must create tension, curiosity, or desire. Do not open with generic company description.
+**ticker-takeover** — options cycle, then a hero crashes in
 
-## Persuasion labels
+- Notion — "A doc? A database? A wiki? — no, it's all of them, in one place."
+- _Pattern:_ a "could be X, or Y, or Z?" cycle on one swapping word, then a hero claim crashes in and replaces it — "actually, this is what it is."
 
-Use concrete labels. Do not write generic labels like “show benefit.”
+### PROBLEM
 
-Good labels include:
+**kinetic-type-beats** — pain lands alone on a bare canvas
 
-- Pain agitation
-- Cognitive overload
-- Negative contrast
-- Friction reduction
-- Simplification
-- Show-don’t-tell proof
-- Demonstration of capability
-- Feature-to-benefit translation
-- Statistical proof
-- Authority by association
-- Social proof
-- Risk reversal
-- Future pacing
-- Value stacking
-- Empowerment and control
-- Rule of three
-- Scarcity / urgency
-- Status seeking
+- Butter — "What if your sessions didn't have to be boring and unstructured — or buried under a dozen tabs?"
+- SmartCue — "You asked for better leads. We were the cure — MQLs that actually convert, a sales team that becomes your ally."
+- _Pattern:_ 3–5 short pain statements (or a "what if?" framing), each landing solo before the next — no product yet.
 
-When no label fits, create one and explain the mechanism in the frame prose.
+**spatial-pan-stations** — a panned web of pain
 
-## Emotional beats
+- Vauban — "Coordinating legal documents, signatures, and cross-border transactions — it's a tangled mess."
+- _Pattern:_ pain "stations" traversed one by one, ending on a knot — "too many disconnected steps."
 
-Use specific emotions:
+**dataviz-countup** — the data IS the argument
 
-- Negative: `anxiety`, `frustration`, `overwhelm`, `tension`, `urgency`, `skepticism`, `FOMO`
-- Pivot: `relief`, `curiosity`, `clarity`, `intrigue`, `aspiration`
-- Build: `trust`, `confidence`, `control`, `ease`, `power`, `awe`, `excitement`, `belonging`, `reassurance`
-- Close: `triumph`, `motivation`, `urgency-to-act`, `peace of mind`, `inevitability`
+- "67% of professionals say leadership is disconnected — and it's costing them a 65% boost in profitability."
+- _Pattern:_ a count-up / chart / stat the camera pushes through to dramatize a worsening or large-scale problem.
 
-Compound beats are allowed, e.g. `relief + control`.
+**overwhelm-surround** — buried by your own tools
 
-## Asset candidates
+- "Slack, email, docs, tickets, three more tabs — and somehow it all lands on you."
+- _Pattern:_ recognizable tools pile in until they surround and bury the viewer — the pain is being swamped, not one bad number.
 
-`asset_candidates` is the handoff from Step 3 to visual design and frame building.
+### PRODUCT_INTRO
 
-Rules:
+**kinetic-type-beats** — "Introducing…" name-drop
 
-1. Read only `capture/extracted/asset-descriptions.md` to know what assets exist.
-2. Use only filenames listed there.
-3. Write candidates as `assets/<basename>`, where `<basename>` is the captured file basename.
-4. Put all candidates on one line.
-5. Separate candidates with semicolons.
-6. Add a short description after `—`.
-7. Prefer `[video]` assets when motion proves the product better than a still.
-8. Use content assets: UI, screenshots, product photos, charts, diagrams, demos.
-9. Skip tiny icons, favicons, badges, decorative chrome, and repeated logo variants unless the frame needs them.
-10. Pure typography frames may use an empty asset list.
+- "Elevating experiences, removing manual touchpoints, automating processes — so you can focus on the customer."
+- Uizard — "Introducing Uizard — the design tool for everyone."
+- _Pattern:_ hard-cut through "Introducing…" / tagline / value beats and resolve on the brand name or logo.
 
-Example:
+**logo-assemble-lockup** — wordless premium sting
 
-```md
-- asset_candidates: assets/dashboard-hero.png — main analytics UI, dark dashboard, wide screenshot; assets/demo-loop.mp4 — product interaction clip, query to result flow
-```
+- Manifold — "Manifold." _(wordless mark assembles; VO optional — just the name)_
+- _Pattern:_ an abstract system assembles around a fixed mark — no copy, or just the product name landing.
+
+**cursor-ui-demo** — first cursor-led look
+
+- ClickUp — "This is ClickUp — click through and watch your whole workspace change."
+- "Pull up any contact, find the right advisor, and you're matched in seconds."
+- PaLM 2 — "Meet PaLM 2 — what is it, what can it do, and how was it built?"
+- _Pattern:_ a cursor sweeps in to introduce the surface — a light first look landing on a hovered hero element or fresh result.
+
+**dataviz-countup** — open on the result
+
+- SuperX — "X growth — discover what really works: 19.6 million impressions."
+- _Pattern:_ a confident "look at the data / the result" open — scroll a tilted card grid to one glowing hero metric, tagline assembling word by word.
+
+**video-text-pivot** — show it work, then the number
+
+- "Watch it run — then look at what it saved: 14 hours, every week."
+- _Pattern:_ the product video plays, then slides aside to hand the frame to one impact stat — "see it work, now see what it's worth."
+
+### KEY_FEATURE
+
+**grid-card-assemble** — enumerate breadth at once
+
+- Postcards — "Want more? Unlimited exports, 1,400 fonts, an AI assistant, version history — and it's free to try."
+- ClearVPN — "ClearVPN is built to help you: streaming access, secure browsing, location changing — only the essentials."
+- Copilot — "Command bar, Zapier, white-labeling, API, SOC2 — and a whole lot more."
+- _Pattern:_ a tile/pill/card grid self-assembles to show many capabilities at once — "look how much it does."
+
+**cursor-ui-demo** — one workflow, end to end
+
+- "Scroll your feed, then jump straight to your notifications — it's all one click away."
+- Flowrite — "Pick your recipient, set your intention, choose a tone — and Flowrite writes it for you."
+- Descript — "Tune your edits, add a crossfade, automate the volume, normalize loudness — then export."
+- _Pattern:_ one specific multi-step workflow shown end-to-end across 2–4 real edits, landing on the action button or result.
+
+**device-surface-showcase** — experienced inside its real interface
+
+- HRS — "Your flight's cancelled — so book a hotel, a taxi, and get reimbursed, all in one digital journey."
+- HelpKit — "A dynamic table of contents that follows your readers as they scroll."
+- Graphite — "Use unique themes, recolor one element or several, and configure it all in a handy window."
+- Contra — "Pick a template, make it yours, and launch a portfolio that's unmistakably you."
+- _Pattern:_ a feature shown being USED inside its real surface — the device/window is the hero and its screens advance through a flow.
+
+**comparison-split** — two paired capabilities, side by side
+
+- "Design on the left, code on the right — always one source of truth."
+- _Pattern:_ two complementary capabilities of equal weight shown together — "X and Y, in lockstep."
+
+**video-text-pivot** — the feature, then its result
 
-Do not use nested lists for assets. The parser expects a single metadata line.
+- "Here's the editor in action — and the result: a publish-ready cut in minutes."
+- _Pattern:_ a feature clip runs, then yields the frame to a metric / impact line — the clip proves it, the number lands it.
 
-## UI demos
+### BENEFITS
 
-A UI demo should usually be a sequence, not one isolated frame.
+**kinetic-type-beats** — rapid-fire value montage
 
-Use 3 or more consecutive `feature_showcase` / `benefit_highlight` frames on the same product surface when the product value depends on workflow or interaction.
+- AiAgent — "No API keys, GPT-4 access, simple UX, clean UI — moving fast."
+- Uizard — "Export to Sketch, create style guides, share, collaborate — and code less."
+- _Pattern:_ a staccato montage of 8–12 short value phrases, each flashing and clearing at high tempo.
 
-Good demo rhythm:
+**grid-card-assemble** — an accumulating value list
 
-1. Input or user action.
-2. Product response.
-3. Result, insight, automation, or saved effort.
-4. Benefit or trust proof.
+- Lineicons — "Consistent and clean, tons of free icons, a Figma plugin, a powerful editor, every format you need."
+- Plutio — "Manage projects, track time, send invoices, write proposals — all deeply customisable."
+- _Pattern:_ short value phrases populate a vertical list ~1/sec, co-resident and accumulating, each popping into its slot.
 
-Use consistent transitions across the sequence so it feels like one flow.
+**titlecard-reveal** — the calm value beat
 
-## Script rules
+- CSS Scan Pro — "A smart color picker — with instant tints and shades."
+- _Pattern:_ one clean two-line value title, one slide-up crossfade, then held still. Low motion is the point.
 
-### If there is no pasted script
+### SOCIAL_PROOF
 
-Write tight per-frame narration:
+**constellation-hub** — the hub at the center of your stack
 
-- 1-2 sentences per spoken frame.
-- Usually 6-20 words per frame.
-- Concrete and human.
-- Say what the product does for a person.
-- Prefer active verbs.
+- kyvos — "On any BI tool — Tableau, Looker, Power BI — Kyvos sits at the center of your stack."
+- _Pattern:_ the product mark is the hub and partner logos orbit it — "sits at the center of everything you use."
 
-Avoid:
+**grid-card-assemble** — a logo wall pulling back to a vast ecosystem
 
-- “Seamless experience.”
-- “Unlock the power of...”
-- “Streamline your workflow.”
-- Long noun-phrase lists.
-- A whole frame with only “Or...” or another filler bridge.
+- Lineicons — "Used by more than 100,000 designers, developers, and companies — including these."
+- ClickUp — "Connect Google Drive, Slack, GitHub, Stripe — your whole ecosystem in one place."
+- Copilot — "With thousands of partner apps — Airtable, Calendly, Jira, Asana — you can embed anything."
+- _Pattern:_ a wall of partner/app logos builds, then a camera zoom-out reveals a vast ecosystem.
 
-Silent frames are allowed when the visual proves the point. Leave them out of `SCRIPT.md`.
+**titlecard-reveal** — busy → clean proof card
 
-### If `VO_MODE = restructure`
+- Trumpet — "We supply the trumpet, you bring the band — loved by 1,000+ sales, success, and marketing teams."
+- _Pattern:_ wipe a busy open away to a clean lockup plus a "loved by N+ teams" line that settles and holds.
 
-Treat `user_script.txt` as source material. Rewrite, reorder, merge, or omit to fit the chosen arc and target length.
+### CTA
 
-### If `VO_MODE = verbatim`
+**kinetic-type-beats** — punchy closing line beat-by-beat
 
-Do not rewrite the user’s words. Segment the script into frame-sized chunks at sentence or paragraph boundaries. You may split a long sentence at a natural clause boundary, but do not change words. The final duration follows the provided script.
+- Stylebit — "Go pro, connect up to five Figma accounts — more features coming. Join now."
+- revid.ai — "Boost your engagement and turbocharge your social media."
+- _Pattern:_ a closing line (or short value stack) that snaps in beat by beat and lands on the logo or URL.
 
-## Transitions
+**logo-assemble-lockup** — logo build → push-through into the URL
 
-Use only registry transition names:
+- Strapi Cloud — "Deploy on Strapi Cloud — no server hassle, same flexibility. Try it now at strapi.io/cloud."
+- Highlander — "Highlander is ready for the future you're building. Let's raise — at highlander.ai."
+- STUDIO AI — "Get early access to STUDIO."
+- Glorify — "Get started for free now — no credit card required."
+- _Pattern:_ the logo builds, a fast camera push-through streaks giant CTA letters past the lens, resolving on the URL or action verb.
 
-`cut | crossfade | blur-crossfade | push-slide LEFT | push-slide RIGHT | push-slide UP | push-slide DOWN | zoom-through | squeeze`
+**cta-morph-press** — identity condenses into one click
 
-Pick 2-3 transition types for the whole video and repeat them. Frame 1 can use `cut` as a placeholder.
+- Linear — "This is Linear. Start building — it's free."
+- _Pattern:_ the brand mark condenses straight into the single thing you click — "here's us → click here," no spatial set.
+
+### BRAND_OUTRO
+
+**kinetic-type-beats** — a verb barrage resolving on one word
+
+- Phantom — "Buy, store, stake, swap, send, connect, explore — multichain."
+- _Pattern:_ a rapid center-channel barrage of single-word verbs asserting breadth, resolving on the brand's one defining word. No logo lockup needed.
+
+**typewriter-reveal** — persistent mark + typed CTA rail
+
+- Collato — "Next time, just Collato it — sign up for free today."
+- _Pattern:_ the mark holds dead-center the whole time while a sub-line types or swaps into the final CTA.
+
+**logo-assemble-lockup** — elements clear, the lockup draws itself in
+
+- Copilot — "Copilot." _(pills disperse off-frame, the mark draws on; VO optional — just the name)_
+- Dora AI — "Dora AI — join the waitlist."
+- _Pattern:_ feature/UI elements clear the stage off all four edges, then the logo mark draws itself on and the wordmark completes the lockup.
+
+**ticker-takeover** — use-cases cycle, the brand takes the frame
+
+- "For notes, for tasks, for plans, for teams — [brand] holds it all."
+- _Pattern:_ closing use-cases/verbs cycle through one slot, then the brand mark crashes in and owns the final frame.
+
+---
+
+## VO_MODE handling
+
+**No pasted script** — write the VO yourself, in the matching blueprint's script shape:
+
+- 1–2 sentences per spoken beat, usually 6–20 words.
+- Concrete and human; active verbs; say what the product does for a person.
+- Avoid: "seamless experience," "unlock the power of," "streamline your workflow," long noun-phrase lists, a whole beat that is just "Or…".
+- Silent beats are allowed when the visual proves the point — leave them out of `SCRIPT.md`.
+
+**`VO_MODE = restructure`** — treat `user_script.txt` as source material. Rewrite, reorder, merge, or omit to fit the arc and target length. You may still shape each segment toward its beat's blueprint pattern.
+
+**`VO_MODE = verbatim`** — do NOT change the user's words. Segment the script into beat-sized chunks at sentence/paragraph boundaries (split a long sentence only at a natural clause boundary). Final duration follows the provided script. Blueprint shaping does not apply to wording — only to which shape each verbatim chunk is paired with.
+
+## Asset candidates
+
+`asset_candidates` is the Step-3 → Step-4 handoff. Rules:
+
+1. Read only `capture/extracted/asset-descriptions.md` to know what exists.
+2. Use only filenames listed there; write as `assets/<basename>`.
+3. One line, candidates separated by semicolons, a short description after `—`.
+4. Prefer `[video]` assets when motion proves the product better than a still.
+5. Use content assets (UI, screenshots, product photos, charts, demos). Skip tiny icons, favicons, badges, decorative chrome, repeated logo variants — unless the beat needs them.
+6. Pure-typography beats may use an empty asset list. Do not use nested lists.
+
+Example:
+
+```md
+- asset_candidates: assets/dashboard-hero.png — dark analytics dashboard, wide screenshot; assets/demo-loop.mp4 — query-to-result interaction clip
+```
+
+## transition_in
+
+Between-frame transition — how each frame ENTERS from the one before it. The harness's injector stamps it onto the two whole-frame clips (opacity / transform / filter on the frame wrappers). Name a **registry type** directly; optionally add a direction and/or a duration (`push-slide LEFT`, `crossfade 0.4s`). `cut` / `none` / empty = a hard cut.
+
+The five registry types:
+
+- **`crossfade`** — a plain opacity dissolve; the neutral choice when two frames sit in the same visual world.
+- **`blur-crossfade`** — dissolve through a soft blur + slight scale; use when the two frames' backgrounds differ a lot, so the blur masks the color clash a plain crossfade would expose.
+- **`push-slide`** `[LEFT|RIGHT|UP|DOWN]` — outgoing slides off, incoming pushes in from the opposite edge; a lateral "next beat" feel for a run of consecutive cards / feature beats.
+- **`zoom-through`** — outgoing scales up + blurs out, incoming scales up from small into focus; for a STATE CHANGE / turning to a new section (hook → context).
+- **`squeeze`** — outgoing compresses to a line on one edge as incoming expands from the other; a snappy, mechanical beat change.
+
+Pick a small set and repeat them: default to `crossfade` (or `blur-crossfade` when the backgrounds clash), and reach for `zoom-through` at section boundaries. Frame 1's `transition_in` is a placeholder.
 
 ## Frame template
 
-Use the exact fields required by the core storyboard format. This is the narrative shape each frame should satisfy:
+Use the exact fields required by the core storyboard format. The narrative shape each frame satisfies:
 
 ```md
 ## Frame N — Short name
 
 - scene: one clear visual idea
-- voiceover: "spoken guide text, or empty"
+- voiceover: "spoken line, written in the candidate blueprint's script shape, or empty"
 - duration: rough estimate in seconds
-- transition_in: cut
+- transition_in: crossfade
 - status: outline
 - src: compositions/frames/NN-short-name.html
 - type: hook
 - persuasion: Pain validation
 - beat: urgency
+- blueprint: kinetic-type-beats — candidate shape from the role→blueprint menu; omit when none fits
 - asset_candidates: assets/example.png — short asset description
 
-narrativeRole: What this frame does in the viewer journey.
-keyMessage: The one idea the viewer should remember.
+narrativeRole: what this beat does in the viewer journey.
+keyMessage: the one idea the viewer should remember.
 ```
 
+- `persuasion` — a concrete move (Pain agitation, Negative contrast, Friction reduction, Show-don't-tell proof, Feature-to-benefit translation, Statistical proof, Authority by association, Social proof, Risk reversal, Future pacing, Value stacking, Rule of three, Scarcity/urgency, Status seeking…). Never "show benefit." Invent one if none fits and explain it in the prose.
+- `beat` — a specific emotion (anxiety, frustration, overwhelm, tension, urgency, skepticism, FOMO → relief, curiosity, clarity, intrigue, aspiration → trust, confidence, control, ease, power, awe, excitement, belonging → triumph, motivation, urgency-to-act, peace of mind, inevitability). Compound allowed (e.g. `relief + control`).
+
 ## Final checklist
 
-Before asking for user approval, verify:
-
-- The arc is named and consistent.
-- The sequence is narrative-driven, not page-order-driven.
-- The opening uses a clear hook strategy.
-- Each frame has one job.
-- Every frame has `type`, `persuasion`, and `beat`.
-- Every visual frame has suitable `asset_candidates`, unless intentionally typography-only.
-- Asset filenames come only from `capture/extracted/asset-descriptions.md`.
-- UI/product demos use a multi-frame sequence when needed.
-- Transitions use only registry names and repeat 2-3 types.
-- `SCRIPT.md` contains only locked spoken narration.
-- Silent frames are intentional and omitted from `SCRIPT.md`.
+- The arc is named; the sequence is narrative-driven, not page-order-driven.
+- The opening uses one clear hook strategy that creates tension/curiosity/desire.
+- Each beat has one job; every beat has `type`, `persuasion`, `beat`.
+- Each beat's `voiceover` is written in its candidate blueprint's script shape (from the bank), with the candidate `blueprint:` tagged wherever a shape fits — and omitted where none does.
+- Each `voiceover` is phrase-segmented into cues (each cue a piece Step 5 can reveal on) — not one long run-on clause.
+- Shapes vary across the video; no single blueprint on every beat.
+- Story truth was never bent to fit a blueprint — no beat invented/dropped/reordered for a shape.
+- Every visual beat has suitable `asset_candidates` (filenames only from `asset-descriptions.md`), unless intentionally typography-only.
+- UI/product demos use a multi-beat sequence when the value depends on workflow.
+- `transition_in` is a registry type (`crossfade` / `blur-crossfade` / `push-slide` / `zoom-through` / `squeeze`) — default `crossfade` (`blur-crossfade` on a background clash), `zoom-through` at section boundaries, repeated across the video.
+- `SCRIPT.md` contains only locked spoken narration; silent beats are intentional and omitted.
diff --git a/skills/product-launch-video/references/visual-design.md b/skills/product-launch-video/references/visual-design.md
index 31804f1ff2..0406813589 100644
--- a/skills/product-launch-video/references/visual-design.md
+++ b/skills/product-launch-video/references/visual-design.md
@@ -1,55 +1,94 @@
-# Visual design — product-launch per-frame enrichment method
+# Visual design — product-launch per-frame shot method
 
-> The method behind **Step 4 (Frame visual design)**. You (the orchestrator) read it to **enrich `STORYBOARD.md` frames in place** — story-design wrote the skeleton (each frame's `scene`, `voiceover`, `transition_in`, the five narrative fields, and its `asset_candidates`); you add how each frame **looks and moves**. Each frame is a **directed shot, not a static slide** — you choreograph it across its whole duration, not just its entrance. You write **no HTML** (that's the frame workers), you **never read `capture/`** (story already chose the assets), and you do **not** select assets or name transitions (story owns both). `frame.md` is your palette/type truth. Composition / motion detail lives in `composition.md` + `motion-language.md`; effect & blueprint **bodies** live in `hyperframes-animation`. Adding palette theory or a generic font rule here? Wrong home — `frame.md` + `hyperframes-creative`.
+> The method behind **Step 4 (Frame visual design)**. You (the orchestrator) read it to **enrich `STORYBOARD.md` frames in place** — story-design wrote the skeleton (each frame's `scene`, `voiceover`, `transition_in`, the narrative fields, its `asset_candidates`, and optionally a candidate blueprint id); you add how each frame **looks and moves**. The unit you write per frame is a **time-coded shot sequence** — a shot directed across its whole duration, not a static slide. You write **no HTML** (that's the frame workers), you **never read `capture/`** (story already chose the assets), and you do **not** select assets or name transitions (story owns both). `frame.md` is your palette/type truth by role. Layout is a compact vocabulary in this file (the **Layout** section below), stated inline per Scene; motion vocabulary + the motion doctrine + the seek-safe core → `motion-language.md`; the proven shapes → `../hyperframes-animation/blueprints-index.md` + `blueprints/<id>.md`; concrete rules resolve in Step 5 from this skill's local `../hyperframes-animation/rules/`. Adding palette theory or a generic font rule here? Wrong home — `frame.md` + `hyperframes-creative`.
 
-## Every frame is a directed shot
+## The unit is a time-coded shot sequence
 
-A frame's visual layer is choreographed across its **full duration**, not front-loaded into an entrance. The failure that reads as PowerPoint: content animates in over the first ~0.8s, then **freezes** while a slow drift plays under it. So every frame's metadata + note describe a **shot with phases** — `entrance → development → settle` — where _development_ (a reveal, a rearrange, a morph, an emphasis hit, a count-up) is the mid-shot motion that separates video from slides. The shot model and the choreography-vs-idle budget live in `motion-language.md`; here you **encode it into the frame**: the `effects` / `blueprint` ids are the motion vocabulary, and the **composition note sequences them into phases**.
+A frame's visual layer is **a sequence of time windows paced to the voiceover**, not a bag of effect tags. The failure that reads as PowerPoint is **front-loading**: the agent rushes the whole canvas on screen in the first ~25%, and then it just sits (the old representation — a flat set of effect names + a prose note — fired everything at entrance and left the rest empty). A time-coded shot sequence written **against the VO** makes that impossible: each window states what is on screen and what is moving, and **nothing appears before the voiceover reaches it.**
 
-Deliberate **stillness** is the marked exception — the 2-3 climax/breather frames you allocate in `## Video direction`. Every other frame develops; a held frame outside that allocation is just a slide.
+Write each frame as a handful of windows cued by the spoken line:
+
+```
+Scene 1 (0.0–Xs):  only what the VO is saying at t=0 enters — never the whole canvas
+Scene 2 (Xs–Ys):   the next piece reveals as the VO names it (a line / card / stat / icon)
+  …                one window per spoken cue — as many or as few as the line calls for
+Scene N (…–end):   content has resolved; hold the read (stillness; subtle jitter at most)
+```
+
+- Each `Scene` line names **what's on screen**, **what moves in this window**, and **where it sits** (layout, inline). Times are real seconds across the frame's `duration`.
+- **Pace reveals to the voiceover; never front-load.** This is the core anti-PowerPoint mechanism (→ `motion-language.md` Part 2 Rule 2). At t=0 show only what the VO is saying then; reveal each further piece — a line, a card, even an h1 — **when the VO names it**, spreading reveals across the shot and especially the **back ~50%**. **The window count = the number of spoken cues the line calls for** — a two-beat line is two windows, a five-feature list is five or six. There is **no fixed count and no mandatory "middle" act**; the only sin is dumping everything up front.
+- **End on a held read.** Once the content has resolved it holds and reads — **prefer stillness to bad motion**: no forced camera drift, no lazy breathing, no back-half pan/push; at most a subtle jitter keeps it alive (→ `motion-language.md`). On a short shot the final reveal and the hold are the **same window** — the hold is not a separate mandatory act. Only the final frame has a real exit; every other frame's exit is the harness transition (story's `transition_in`).
+- A **deliberately held** frame — content already revealed, now reading still — is legitimate and often right (a climax, a breather). The failure is never "too still"; it is **front-loaded-then-frozen** (everything dumped by ~25%, nothing cued to the VO). Place held beats deliberately for rhythm so the video isn't uniformly busy (allocate them in `## Video direction`). Reveal pacing + holds + the idle budget → `motion-language.md`.
+
+## Pick the shape — instantiate a blueprint
+
+Don't invent each shot from scratch. The frame's **role** (its `type` / `beat`) points to a proven shape:
+
+1. **Match the role to a blueprint.** Open `../hyperframes-animation/blueprints-index.md`, find the frame's role in the **role→blueprint menu**, and pick the blueprint whose intent fits this beat (story may already have named a candidate id — confirm or override it). Read that `blueprints/<id>.md`: it is a short, product-agnostic, **time-coded shot template with `[slots]`** and a named **signature move** (the thing that makes the shape itself — the SVG ring, the push-THROUGH, the in-place token swap).
+
+2. **Instantiate its `[slots]` with THIS product's content** — three postures:
+   - **Reproduce** — the blueprint fits the beat and your content maps onto its slots cleanly. Fill every `[slot]` with this product's word / asset / stat and follow its Scene timing. Write the resulting Scene lines.
+   - **Adapt** — the _structure_ fits but the content / asset-count / surface doesn't (or you want a fresher surface to avoid templating). State **what you keep / what you change** in one line, then write the adapted Scene lines. You may extend or vary; you may **never** drop the **signature move** (drop it and you picked the wrong blueprint), and you keep the reveals **paced to the VO** — never collapse the shape to a single front-loaded dump.
+   - **Compose** — no blueprint fits the beat. Build the shot from the **motion vocabulary** in `motion-language.md`: still pace the reveals to the VO across the shot, never fire everything at t=0. Mark it `blueprint: compose`.
+
+3. **Keep the signature move.** Whichever posture, the blueprint's signature move (named in its file) is the spine of the shot — it usually lands on the shot's key reveal. Carry it through.
+
+The blueprint's own Scene lines, motion vocabulary, and `rule mapping` are your raw material; you are choosing a shape and casting this product into it, not copying an engineering spec.
 
 ## What you add to each frame
 
-Story-design's `## Frame N` block already carries the narrative. You append the visual layer as frame metadata + one composition note (story's role/message prose stays):
+Story-design's `## Frame N` block already carries the narrative + `asset_candidates`. You append the shot. Story's `scene` / `voiceover` / `transition_in` / role fields stay untouched.
 
 ```
 ## Frame 3 — The problem
-- scene: a 20-minute timer spins on a stack of rejected takes   ← refine only if it could read sharper
+- scene: a 20-minute timer over a stack of rejected takes   ← refine only if it could read sharper
 - voiceover: "…"            ← story's; leave it
 - transition_in: crossfade  ← story's; leave it
 - type: pain_point          ← story's
 - persuasion: Pain agitation
 - beat: frustration
-- effects: slow-push, count-up, vignette-pulse   ← you add: cite effect ids (≥3, sequenced into the phases below)
-- blueprint: messaging-multi-phase         ← you add (optional): one multi-phase blueprint id
-- focal: assets/timer-stack.png             ← you add: which existing candidate is the hero
-- roles: timer-stack = background (dim ~40%) ← you add: cutout / background / supporting per candidate
-- sfx: impact-soft, riser                    ← you add: the sound the beat wants (fetched + mounted at root; never yours to embed)
-
-Entrance: timer drops in upper-left (heavy), rejected-takes stack seated low. Development: the stack grows beat-by-beat toward the band as the reject count ticks up (count-up). Settle: vignette pulses in and holds; only the slow-push continues. A dense, edge-anchored frame.
+- blueprint: dataviz-countup (Adapt)   ← you add: the id you instantiated (or "compose")
+- focal: assets/reject-stat.png         ← you add: the hero asset for this beat
+- roles: reject-stat = cutout · timer = supporting · backdrop = background (dim ~40%)  ← you add: role per candidate
+- sfx: impact-soft, riser               ← you add: the sound the beat wants (fetched + mounted at root; never yours to embed)
+
+Adapt: keep the count-up-ring signature; one stat not three, and the trend chart becomes the rejected-takes count climbing.
+Scene 1 (0.0–1.2s): solid backdrop (dim ~40%); a circular progress ring + bold center number seat dead-center, ring sweeps and number counts 0→20 on one heavy ease — Centered template, ~50% of frame. Slow push-in runs underneath.
+Scene 2 (1.2–3.4s): as the VO names the count, the camera pushes THROUGH the ring into the rejected-takes stack lower-left; the stack grows beat-by-beat as a reject counter ticks up beside it (the count-up reveals on its spoken cue, not at t=0). Asymmetric 60/40, 3 depth layers.
+Scene 3 (3.4–5.0s): land the hero stat card dead-center, accent glow blooms behind it and holds; the stat reads clean and STILL — no continuing push, no breathing (a held beat beats bad motion). The stillness reads against the prior motion.
 ```
 
-- **`effects`** — name atomic effect **ids** from `hyperframes-animation`'s rules index. **Cite ≥3 when you name no `blueprint`** (the worker composes them into the beat; fewer than 3 reads as generic motion); 1+ as accents when a blueprint already carries the choreography. With no blueprint, those **≥3 effects are the shot's phases** — your note must **sequence them** (one enters, one develops, one emphasizes), not list them as a flat set that all fires at entry (that collapses three phases into one slide). The names are a shared vocabulary; the recipe lives there — you cite, the worker **reads the body and reproduces it** (not a name-guess).
-- **`blueprint`** — name **one** multi-phase blueprint id from `hyperframes-animation/blueprints-index.md` when a frame's beat wants a proven multi-phase shape (multi-phase reveal, orbit-collapse, …). Two postures — **both require the worker to read the recipe body (and run its `examples/<id>.html` to see the signature move) first**; deviating from a name-guess instead of from understanding is the one banned failure:
-  - **Reproduce** — the blueprint fits the beat cleanly and the frame's content maps onto its slots; the worker reproduces its phases faithfully. Write the composition note shot-by-shot to match.
-  - **Adapt** — the blueprint is the right _structure_ but the content / beat / asset-count doesn't fit its exact form, or you want the proven skeleton with a fresher surface (anti-templating), or you're grafting a second blueprint's phase. Lead the note with a **`Base / Keep / Depart`** line — `Base:` the blueprint id · `Keep:` its **signature** (the move that makes it itself — the SVG ring, the orbit→collapse; never drop this, or you named the wrong blueprint) · `Depart:` what you change and why. Adapt may **extend or vary, never reduce below the shot model** — never flatten a multi-phase blueprint into a single entrance. E.g. `Base: avatar-cloud-network · Keep: the SVG-connected elliptical ring · Depart: 7 logos not 12, + a hub count-up as the development beat`.
+The lightweight tags:
+
+- **`blueprint:`** — the id you instantiated (with `(Reproduce)` / `(Adapt)`), or `compose`. One id per frame.
+- **`focal:`** — which existing candidate is the hero of this beat.
+- **`roles:`** — each candidate's role: `cutout` (foreground subject, lay text around it) · `background` (full-bleed, dim 30–50%) · `supporting` (secondary). You **consume** the candidates story chose — never add, swap, or drop one (coverage is story's call; if a frame truly has the wrong candidates, flag it back, don't reach into `capture/`).
+- **`sfx:`** — name the sound the beat wants (an impact for a slam, a whoosh for a push, a riser into a reveal). The audio script's `fetch-sfx` pass retrieves it and the assembler mounts it at the root — you only **name** it, never embed an `<audio>` element.
+
+**Layout is stated INLINE in each Scene line** — name the template, density, depth, and hierarchy as part of "where it sits" (`Centered, ~50% of frame`, `asymmetric 60/40, 3 depth layers`), drawing on the **Layout** vocabulary below; never write px / scale / shadow recipes (the worker writes those).
+
+**Motion is named INLINE in each Scene line** — name the move from `motion-language.md`'s vocabulary (`ring sweeps`, `pushes THROUGH`, `count-up`, `glow blooms`) and let it settle on a long-tail curve (`power3` default — smooth beats bouncy; see `motion-language.md`). Never write ease curves / ms / stagger (those resolve in Step 5 from this skill's local `../hyperframes-animation/rules/`).
+
+## Layout — named inline per Scene
 
-  Choose **Reproduce** when the shape fits as-is, **Adapt** when the structure fits but the form doesn't (or to avoid templating); **omit** `blueprint` entirely when no blueprint's structure fits — then the cited `effects` (≥3) carry the phases (**Compose**).
+State each Scene's layout as part of "where it sits." **If the blueprint already implies a composition** (a ring around a center, stations on a wide canvas, two cards from opposite wings), that wins — describe it directly; the vocabulary below is for **composing freely** or a generic beat, not a menu you must pick from. Never write px / scale / shadow (the worker does). One frame's layout can EVOLVE across its Scenes (Scene 1 centered hero → Scene 2 rearranges to a grid).
 
-- **`focal` / `roles`** — story listed `asset_candidates`; you pick the **focal** hero and each candidate's role (`cutout` = foreground subject, lay text around it; `background` = full-bleed, dim 30-50%; supporting = secondary). You **consume** the candidates — never add, swap, or drop one (coverage is story's call; if a frame truly has the wrong candidates, flag it back, don't reach into `capture/`).
-- **`sfx`** — name the sound the beat wants (an impact for a slam, a whoosh for a push). The audio script's `fetch-sfx` pass retrieves it from HeyGen and the assembler mounts it at the root — you only **name** it, never embed an `<audio>` element.
-- **composition note** — the frame's visual brief: layout, hero, depth layers, the macro move, **and the shot's phases**. **Default to a phased note** — `entrance: … → development: … → settle: …` (shot-by-shot; mandatory when you named a `blueprint`) — naming what's on screen and what moves in each phase, so the worker builds the development instead of freezing after entry. A **single still line** is correct only for a deliberately held climax or an allocated stillness frame. Full method → `composition.md` (layout) + `motion-language.md` (phases).
+- **Framing vocabulary** — centered (hero / climax) · rule-of-thirds · split-screen (comparison) · layered-depth (immersive) · asymmetric 60/40 or 70/30 (editorial) · triptych (three panels) · full-width strip. Vary the framing across the video so it doesn't read as one repeated template — let the beat decide, not a quota.
+- **Density** — primary visual ≥ 40% of canvas; ≥ 3 depth layers (background + midground + foreground); never a lone small cluster floating in empty space. Squint test: after blur you can still pick out the #1 element.
+- **Hierarchy** — combine ≥ 2 of size (3:1) / weight (800 vs 400) / contrast / position (upper-third is golden) / motion, so one element clearly dominates.
+- **Depth** — layer 2–3 of: size, blur, opacity gradient, overlap, shadow-stack.
+- **Don't show**: nav bars, footers, scrollbars, real cursors / browser chrome, generic decorative shapes standing in for a real asset, floating bokeh / purple-blue "AI" gradients — unless it's an intentional UI-demo reconstruction.
 
-## Video direction — write the invariants ONCE
+## `## Video direction` — write the invariants ONCE
 
-The whole video shares one look and one motion grammar. State it **once**, at the top of `STORYBOARD.md` (a `## Video direction` block), so every frame inherits it and per-frame metadata carries only the **delta**:
+The whole video shares one look and one motion grammar. Write a **`## Video direction`** block ONCE at the top of `STORYBOARD.md` so every frame inherits it and per-frame Scene lines carry only the **delta**. This block is load-bearing — it is what binds many independent shots into one film. **Keep it.**
 
 - **palette system** — from `frame.md`: which roles map to which hues. Never invent.
-- **motion defaults + shot model** — default eases + the **choreography baseline** (every frame a directed shot: entrance → development → settle) + the **idle-life budget** (what may keep moving during the hold) (→ `motion-language.md`).
-- **negative list** — what never appears: off-brand textures and effects the pack forbids, **plus both motion failure modes** — slideshow (enter-then-freeze) and screensaver (everything floating independently) (→ `motion-language.md`).
-- **stillness allocation** — name the 2-3 frames that hold still before a climax; every other frame develops (the anti-repetition discipline; → `motion-language.md`).
+- **motion grammar + reveal model** — long-tail eases (`power3` default, smooth over bouncy) + the **VO-paced reveal** model every frame follows (reveal each piece on its spoken cue; never front-load) + what may stay alive during a hold (subtle jitter at most; no lazy breathing) (→ `motion-language.md`).
+- **rhythm / held-frame allocation** — name the **held / breather frames** (often before a climax) so the video varies its energy: most frames reveal to the VO, a few hold still (a held read beats bad motion; the anti-monotony discipline; → `motion-language.md`).
+- **negative list** — what never appears: off-brand textures / effects the pack forbids, **plus both motion failure modes** — slideshow (front-load then freeze) and screensaver (everything floating independently) (→ `motion-language.md`).
 
-Do **not** repeat these in every frame — restating video-level rules per frame is exactly the bloat this layer prevents. Each frame's metadata is the delta on top of Video direction.
+Do **not** repeat these per frame — restating video-level rules in every frame is exactly the bloat this layer prevents.
 
 ## Palette & type — from `frame.md`, never invented
 
@@ -58,26 +97,30 @@ Do **not** repeat these in every frame — restating video-level rules per frame
 
 ## Caption-band keep-out (plan side)
 
-The bottom ~17% of the canvas is reserved for the caption pill. Plan every frame's content into the **top ~83%** so nothing important lands in the band (the worker enforces the pixel cutoff; you plan the layout). Holds even when captions are disabled — bottom-edge consistency. Geometry detail → `composition.md`.
+The bottom ~17% of the canvas is reserved for the caption pill. Plan every frame's content into the **top ~83%** so nothing important lands in the band (the worker enforces the pixel cutoff; you plan the layout). Holds even when captions are disabled — bottom-edge consistency.
 
 ## Where the detail lives
 
-| For…                                                                        | Read                                                                                         |
-| --------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
-| composition — zones, density, templates, asset prominence, caption geometry | `composition.md` (local)                                                                     |
-| motion — the shot model, phases, idle budget, beat structure, stillness     | `motion-language.md` (local)                                                                 |
-| effect ids + blueprint ids (vocabulary + recipes)                           | `../hyperframes-animation/blueprints-index.md` + `../hyperframes-animation/rules-index.md`   |
-| palette + type tokens                                                       | the project's `frame.md`; basics → `hyperframes-creative` `house-style.md` / `typography.md` |
-| "produced, not generated" foreground density                                | `hyperframes-creative/references/video-composition.md`                                       |
-| transitions                                                                 | story-design owns `transition_in`; you don't touch it                                        |
+| For…                                                                      | Read                                                                                         |
+| ------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
+| the proven shapes + role→blueprint menu + how to pick                     | `../hyperframes-animation/blueprints-index.md` → `blueprints/<id>.md` (local)                |
+| motion — shot model, vocabulary, holds, idle budget, stillness, seek-safe | `motion-language.md` (local)                                                                 |
+| layout — templates, density, depth, hierarchy, caption band               | the **Layout** vocabulary in this file                                                       |
+| concrete eases / ms / stagger + rule recipe bodies (Step 5)               | local `../hyperframes-animation/rules/` (the frame worker reads it; you don't)               |
+| palette + type tokens                                                     | the project's `frame.md`; basics → `hyperframes-creative` `house-style.md` / `typography.md` |
+| "produced, not generated" foreground density                              | `hyperframes-creative/references/video-composition.md`                                       |
+| within-frame cuts / seams (zoom-through · cut-the-curve · waterfall)      | `cut-catalog.md` (the worker builds them inside the composition)                             |
+| transitions                                                               | story-design owns `transition_in`; you don't touch it                                        |
 
 ## Before you finish — checklist
 
-- Every frame has `effects` (≥1 cited id; **≥3 when no `blueprint`** is named); a `blueprint` where the frame matches one, with a shot-by-shot composition note.
-- **Every frame's composition note is phased** (entrance → development → settle / shot-by-shot) — not a single entry that then freezes; the ≥3 effects are **sequenced across phases**, not all fired at t=0.
-- **Stillness is only the 2-3 frames allocated in Video direction**; every other frame develops mid-shot.
-- Each visual frame's `asset_candidates` have a `focal` + per-candidate `roles`; none added or dropped.
-- **Video direction** stated once at the top (palette · shot model + idle budget · negative list incl. both failure modes · stillness allocation); per-frame entries are deltas, not restatements.
+- **`## Video direction`** written once at the top (palette · motion grammar + shot model + idle budget · stillness allocation · negative list incl. both failure modes); per-frame entries are deltas, not restatements.
+- Every frame is a **time-coded shot sequence** with real second windows across its `duration` — not a tag bag.
+- **No frame front-loads** — at t=0 only what the VO is saying enters; each further piece reveals on its spoken cue, across the back ~50%. Window count follows the VO, not a fixed number.
+- Every frame names an **`blueprint:`** id (Reproduce / Adapt) or `compose`; an Adapt states keep/change and **keeps the signature move**; nothing collapses to a single front-loaded dump — reveals stay paced to the VO.
+- **Held frames are deliberate** — allocated in Video direction for rhythm; a held read is fine (prefer stillness to bad motion), but no frame may be front-loaded-then-frozen.
+- Each frame's `asset_candidates` have a `focal` + per-candidate `roles`; none added, swapped, or dropped.
+- Layout named **inline** per Scene (template / density / depth / hierarchy — the **Layout** vocabulary here); motion named **inline** per Scene from the vocabulary (`motion-language.md`). No px / ease curves / ms / JS.
 - Content planned into the top ~83% (caption band clear).
 - Palette / type pulled from `frame.md` by role — nothing invented.
 - You wrote no HTML and never read `capture/`.
diff --git a/skills/product-launch-video/scripts/assemble-index.mjs b/skills/product-launch-video/scripts/assemble-index.mjs
index df49b75498..5514816e10 100644
--- a/skills/product-launch-video/scripts/assemble-index.mjs
+++ b/skills/product-launch-video/scripts/assemble-index.mjs
@@ -31,13 +31,25 @@
 // Reads:  --storyboard STORYBOARD.md, --hyperframes <project root>,
 //         [--audio-meta audio_meta.json]. On disk: each built frame's src html,
 //         capture/{assets,assets/videos,screenshots}/<basename> for staging, compositions/captions.html.
-// Writes: <project>/index.html  +  stages assets/<basename>.
+// Writes: <project>/index.html  +  stages assets/<basename>  +  (guard ① below)
+//         repairs a frame file in place when its root is missing data-width/height.
+//
+// Pre-assembly frame guards (run in the same pass that reads each frame, so common
+// `lint` failures surface HERE instead of after assembly + a wasted render):
+//   ① AUTO-REPAIR — a sub-comp root missing data-width/data-height: inject the canvas
+//      dims (the renderer needs them on the cloned root; else lint root_missing_dimensions).
+//   ② HARD FAIL  — <video>/<audio> inside a sub-comp: the runtime only drives media that
+//      is a DIRECT child of the host root, so sub-comp media renders blank/black.
+//   ③ HARD FAIL  — a timed element (data-start+duration+track-index) that is not the root
+//      and lacks class="clip" (shows the whole frame), or two same-track clips that overlap.
 //
 // Exit 0 = index.html written + summary. Exit 1 = fatal contract break (no
 // frames, a built/animated frame missing its src/file, a frame with no
-// duration, an inner data-composition-id mismatch). No backstop: fix upstream.
+// duration, an inner data-composition-id mismatch, or a guard ②/③ violation).
+// No backstop: fix upstream.
 
 import { existsSync, readFileSync, writeFileSync } from "node:fs";
+import { spawnSync } from "node:child_process";
 import { basename, join, resolve } from "node:path";
 import { parseStoryboard } from "./lib/storyboard.mjs";
 import { parseFormat } from "./lib/dimensions.mjs";
@@ -55,6 +67,52 @@ function die(msg) {
   process.exit(1);
 }
 
+// Ensure the BGM track is at least `total` seconds long. HeyGen (and most music
+// libraries) return a short loopable clip (~15–30s); mounting it at data-duration=total
+// would leave the video's TAIL SILENT. If the file is short, loop-extend it to `total`
+// (with a 0.4s fade-in + 1.5s fade-out) into a sibling *.loop.mp3 and return that path.
+// Needs ffprobe+ffmpeg (present in the render env); degrades to the original + a warning
+// when they're absent, so assembly never hard-fails on audio tooling.
+function ensureBgmCovers(relPath, hyperframesDir, total) {
+  const abs = join(hyperframesDir, relPath);
+  const probe = spawnSync(
+    "ffprobe",
+    ["-v", "error", "-show_entries", "format=duration", "-of", "csv=p=0", abs],
+    { encoding: "utf8" },
+  );
+  if (probe.status !== 0) return { looped: false, short: false, reason: "ffprobe unavailable" };
+  const dur = parseFloat(String(probe.stdout || "").trim());
+  if (!Number.isFinite(dur) || dur <= 0)
+    return { looped: false, short: false, reason: "unreadable duration" };
+  if (dur >= total - 0.1) return { looped: false, short: false, dur }; // already covers
+  const relOut = relPath.replace(/\.([^./]+)$/, ".loop.$1");
+  const absOut = join(hyperframesDir, relOut);
+  const fadeOut = Math.max(0, total - 1.5);
+  const ff = spawnSync(
+    "ffmpeg",
+    [
+      "-y",
+      "-stream_loop",
+      "-1",
+      "-i",
+      abs,
+      "-t",
+      String(total),
+      "-af",
+      `afade=t=in:st=0:d=0.4,afade=t=out:st=${fadeOut}:d=1.5`,
+      "-c:a",
+      "libmp3lame",
+      "-q:a",
+      "2",
+      absOut,
+    ],
+    { encoding: "utf8" },
+  );
+  if (ff.status !== 0 || !existsSync(absOut))
+    return { looped: false, short: true, dur, reason: "ffmpeg unavailable" };
+  return { looped: true, rel: relOut, from: dur };
+}
+
 const hyperframesDir = resolve(flag("hyperframes", "."));
 const storyboardPath = resolve(flag("storyboard", join(hyperframesDir, "STORYBOARD.md")));
 const audioMetaPath = resolve(flag("audio-meta", join(hyperframesDir, "audio_meta.json")));
@@ -62,12 +120,127 @@ const outPath = resolve(flag("out", join(hyperframesDir, "index.html")));
 
 const r3 = (x) => Math.round(x * 1000) / 1000;
 const anomalies = [];
+const frameErrors = []; // fatal per-frame composition violations (guards ②/③) — reported together
+const repairs = []; // auto-repairs applied to frame files in place (guard ①)
 
 // ---------- parse storyboard ----------
 if (!existsSync(storyboardPath)) die(`STORYBOARD.md not found at ${storyboardPath}`);
 const manifest = parseStoryboard(readFileSync(storyboardPath, "utf8"));
 const { width: WIDTH, height: HEIGHT } = parseFormat(manifest.globals.format);
 
+// ---------- per-frame composition guards (see header ①②③) ----------
+// String-level checks on each frame's HTML — no DOM parse, deterministic, run in
+// the same pass that already reads the file. OPEN_TAG matches one opening tag while
+// tolerating quoted attribute values that contain ">" (e.g. inline styles).
+const OPEN_TAG = "<([a-zA-Z][a-zA-Z0-9-]*)((?:[^>\"']|\"[^\"]*\"|'[^']*')*)>";
+const attrPresent = (attrs, name) => new RegExp(`(?:^|\\s)${name}(?:[\\s=]|$)`).test(attrs);
+const attrValue = (attrs, name) => {
+  const m = attrs.match(new RegExp(`(?:^|\\s)${name}\\s*=\\s*(?:"([^"]*)"|'([^']*)')`));
+  return m ? (m[1] ?? m[2]) : null;
+};
+// The root (or a nested-comp mount) legitimately carries timing without class="clip".
+const isRootish = (attrs) =>
+  /(?:^|\s)id\s*=\s*["']root["']/.test(attrs) ||
+  attrPresent(attrs, "data-composition-id") ||
+  attrPresent(attrs, "data-composition-src");
+
+// Locate the composition root opening tag: prefer id="root", else the first element
+// carrying data-composition-id. Returns { start, end, full, attrs } or null.
+function findRootTag(html) {
+  const re = new RegExp(OPEN_TAG, "g");
+  let m;
+  let firstCompId = null;
+  while ((m = re.exec(html))) {
+    const attrs = m[2];
+    if (/(?:^|\s)id\s*=\s*["']root["']/.test(attrs))
+      return { start: m.index, end: m.index + m[0].length, full: m[0], attrs };
+    if (attrPresent(attrs, "data-composition-id") && !firstCompId)
+      firstCompId = { start: m.index, end: m.index + m[0].length, full: m[0], attrs };
+  }
+  return firstCompId;
+}
+
+// Returns { errors: string[], repairedHtml: string|null, repairNote: string|null }.
+function guardFrame(html, label) {
+  const errors = [];
+  // Scan a copy with comments + <script>/<style> bodies blanked, so a tag-like string
+  // in a comment (e.g. "<!-- match the host <video> coords -->") or in GSAP code can't
+  // trip ②/③. ① still splices into the ORIGINAL html, so its offsets stay correct.
+  const scan = html
+    .replace(/<!--[\s\S]*?-->/g, " ")
+    .replace(/<script\b[\s\S]*?<\/script>/gi, " ")
+    .replace(/<style\b[\s\S]*?<\/style>/gi, " ");
+
+  // ② media inside a sub-comp — never driven by the runtime (renders blank/black).
+  const media = scan.match(/<(video|audio)(?=[\s/>])/i);
+  if (media) {
+    errors.push(
+      `${label}: has a <${media[1].toLowerCase()}> inside the sub-composition. The runtime only drives media that is a DIRECT child of the host root (index.html) — sub-comp media renders blank/black. Move the clip to index.html as a root-level <video>/<audio> and drive any per-scene motion on the main timeline (composition-patterns.md archetype B).`,
+    );
+  }
+
+  // ③ timed-element checks: missing class="clip", and same-track window overlap.
+  const re = new RegExp(OPEN_TAG, "g");
+  const clips = [];
+  let m;
+  while ((m = re.exec(scan))) {
+    const attrs = m[2];
+    if (
+      !attrPresent(attrs, "data-start") ||
+      !attrPresent(attrs, "data-duration") ||
+      !attrPresent(attrs, "data-track-index")
+    )
+      continue;
+    if (isRootish(attrs)) continue;
+    if (!/(?:^|\s)class\s*=\s*["'][^"']*\bclip\b[^"']*["']/.test(attrs)) {
+      errors.push(
+        `${label}: a timed <${m[1]}> (data-start/duration/track-index) has no class="clip" — it renders for the whole frame instead of only its window. Add class="clip", or remove the timing attrs if it is a GSAP-animated element meant to be present throughout.`,
+      );
+    }
+    const track = attrValue(attrs, "data-track-index");
+    const start = parseFloat(attrValue(attrs, "data-start"));
+    const dur = parseFloat(attrValue(attrs, "data-duration"));
+    if (track != null && Number.isFinite(start) && Number.isFinite(dur))
+      clips.push({ track, start, end: start + dur });
+  }
+  const EPS = 1e-3; // adjacent clips that merely touch are legal
+  const byTrack = new Map();
+  for (const c of clips) {
+    const arr = byTrack.get(c.track);
+    if (arr) arr.push(c);
+    else byTrack.set(c.track, [c]);
+  }
+  for (const [track, list] of byTrack) {
+    list.sort((a, b) => a.start - b.start);
+    for (let i = 1; i < list.length; i++) {
+      if (list[i].start < list[i - 1].end - EPS) {
+        errors.push(
+          `${label}: clips on track ${track} overlap (one ends at ${r3(list[i - 1].end)}s, the next starts at ${r3(list[i].start)}s) — same-track time-overlap causes a render conflict. Put them on distinct data-track-index lanes or fix their windows.`,
+        );
+        break; // one report per track is enough
+      }
+    }
+  }
+
+  // ① auto-repair: ensure the root carries data-width / data-height.
+  let repairedHtml = null;
+  let repairNote = null;
+  const root = findRootTag(html);
+  if (root) {
+    const needW = !attrPresent(root.attrs, "data-width");
+    const needH = !attrPresent(root.attrs, "data-height");
+    if (needW || needH) {
+      const inject =
+        (needW ? ` data-width="${WIDTH}"` : "") + (needH ? ` data-height="${HEIGHT}"` : "");
+      const newTag = root.full.replace(/(\/?>)$/, `${inject}$1`);
+      repairedHtml = html.slice(0, root.start) + newTag + html.slice(root.end);
+      repairNote = `${label}: injected${needW ? " data-width" : ""}${needH ? " data-height" : ""} (${WIDTH}×${HEIGHT}) on the root — was missing (would lint root_missing_dimensions)`;
+    }
+  }
+
+  return { errors, repairedHtml, repairNote };
+}
+
 // ---------- resolve mountable frames in document order ----------
 // A frame mounts when its src html exists on disk. A built/animated frame
 // missing its src/file is a contract break (die). An outline frame with no
@@ -97,7 +270,7 @@ for (const f of manifest.frames) {
   // finds the timeline. frame_id = src basename (frame-worker contract); verify
   // the inner html actually declares it.
   const compId = basename(f.src).replace(/\.html?$/i, "");
-  const html = readFileSync(compAbs, "utf8");
+  let html = readFileSync(compAbs, "utf8");
   // Guard against blank/partial scene files: a worker that errors or is
   // interrupted mid-write leaves an empty (or markup-less) file that exists but
   // fails at render with "Composition HTML is empty or could not be parsed".
@@ -107,6 +280,14 @@ for (const f of manifest.frames) {
       `${label}: ${f.src} is empty or has no HTML — the worker wrote a blank/partial file. Re-dispatch that worker before assembling.`,
     );
   }
+  // pre-assembly guards: ① repair missing root dims in place, ②/③ collect fatal violations.
+  const guard = guardFrame(html, label);
+  if (guard.repairedHtml) {
+    writeFileSync(compAbs, guard.repairedHtml);
+    html = guard.repairedHtml;
+    repairs.push(guard.repairNote);
+  }
+  for (const e of guard.errors) frameErrors.push(e);
   if (
     !html.includes(`data-composition-id="${compId}"`) &&
     !html.includes(`data-composition-id='${compId}'`)
@@ -115,6 +296,12 @@ for (const f of manifest.frames) {
   }
   mounted.push({ frame: f, compId, durationSeconds: r3(f.durationSeconds) });
 }
+if (frameErrors.length) {
+  die(
+    `${frameErrors.length} frame composition violation(s) — fix the worker output and re-assemble:\n` +
+      frameErrors.map((e) => `  • ${e}`).join("\n"),
+  );
+}
 if (mounted.length === 0) die("no mountable frames (none built with an on-disk src)");
 
 // cumulative starts — emitted data-start[i] + data-duration[i] == start[i+1] by
@@ -181,16 +368,28 @@ for (const m of mounted) {
   body.push("");
 }
 
-// (track 11) BGM — duck under narration when any voice is present.
+// (track 11) BGM — duck under narration when any voice is present. Loop-extend a short
+// track to the full video length so the tail isn't silent (libraries return ~15–30s clips).
 let bgmEmitted = false;
+let bgmNote = "";
 if (audio.bgm?.path) {
   if (existsSync(join(hyperframesDir, audio.bgm.path))) {
+    let bgmSrc = audio.bgm.path;
+    const cov = ensureBgmCovers(audio.bgm.path, hyperframesDir, TOTAL);
+    if (cov.looped) {
+      bgmSrc = cov.rel;
+      bgmNote = ` (looped ${cov.from.toFixed(1)}s→${TOTAL}s)`;
+    } else if (cov.short) {
+      anomalies.push(
+        `bgm is ${cov.dur?.toFixed?.(1) ?? "?"}s (< ${TOTAL}s) and could not be extended (${cov.reason}) — the tail will be silent; install ffmpeg`,
+      );
+    }
     const vol = audio.bgm.volume != null ? audio.bgm.volume : voiceCount > 0 ? 0.8 : 0.9;
     body.push(
       `      <!-- BGM -->`,
       `      <audio`,
       `        id="el-bgm"`,
-      `        src="${audio.bgm.path}"`,
+      `        src="${bgmSrc}"`,
       `        data-start="0"`,
       `        data-duration="${TOTAL}"`,
       `        data-track-index="11"`,
@@ -352,11 +551,15 @@ console.log(`✓ wrote ${outPath}`);
 console.log(`  canvas:            ${WIDTH}×${HEIGHT}`);
 console.log(`  frames (track 1):  ${mounted.length}`);
 console.log(`  voice  (track 10): ${voiceCount}`);
-console.log(`  bgm    (track 11): ${bgmEmitted ? "yes" : "no"}`);
+console.log(`  bgm    (track 11): ${bgmEmitted ? "yes" + bgmNote : "no"}`);
 console.log(`  captions (track 2): ${captionsEmitted ? "yes" : "no"}`);
 console.log(`  sfx    (track 20+): ${sfxEmitted}`);
 console.log(`  assets staged:     ${staged}/${wanted.size}`);
 console.log(`  total duration:    ${TOTAL}s`);
+if (repairs.length) {
+  console.log(`\nrepaired (frame files updated in place):`);
+  for (const rp of repairs) console.log(`  - ${rp}`);
+}
 if (anomalies.length) {
   console.log(`\nanomalies (non-fatal):`);
   for (const a of anomalies) console.log(`  - ${a}`);
diff --git a/skills/product-launch-video/scripts/build-frame.mjs b/skills/product-launch-video/scripts/build-frame.mjs
index de00509ae3..74171acaad 100644
--- a/skills/product-launch-video/scripts/build-frame.mjs
+++ b/skills/product-launch-video/scripts/build-frame.mjs
@@ -121,11 +121,51 @@ const hueDist = (a, b) => {
   const d = Math.abs(a - b) % 360;
   return d > 180 ? 360 - d : d;
 };
+function hexToRgb(hex) {
+  const m = /^#?([0-9a-fA-F]{6})$/.exec(String(hex).trim());
+  if (!m) return null;
+  const n = parseInt(m[1], 16);
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+const rgbToHsl = (r, g, b) =>
+  hexToHsl("#" + [r, g, b].map((x) => Math.round(x).toString(16).padStart(2, "0")).join(""));
+// Repaint a chromatic rgba()/rgb() tint with the brand accent's RGB, keeping its alpha.
+// A near-neutral rgb (shadow / scrim overlay) is left untouched; a non-rgba string → null.
+function remapRgbaToAccent(val, brAccent, brAccent2, prAccentHsl, prAccent2Hsl) {
+  const m = /^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)\s*(?:[,/]\s*([\d.]+%?))?\s*\)$/i.exec(
+    String(val).trim(),
+  );
+  if (!m) return null;
+  const r = +m[1],
+    g = +m[2],
+    b = +m[3],
+    a = m[4];
+  if (Math.max(r, g, b) - Math.min(r, g, b) < 16) return null; // neutral overlay — keep as-is
+  const src = rgbToHsl(r, g, b);
+  const useSecond =
+    brAccent2 &&
+    prAccentHsl &&
+    prAccent2Hsl &&
+    src &&
+    hueDist(src.h, prAccent2Hsl.h) < hueDist(src.h, prAccentHsl.h);
+  const t = hexToRgb(useSecond ? brAccent2 : brAccent);
+  if (!t) return null;
+  return a !== undefined
+    ? `rgba(${t[0]}, ${t[1]}, ${t[2]}, ${a})`
+    : `rgb(${t[0]}, ${t[1]}, ${t[2]})`;
+}
 
 // ── brand tokens ──────────────────────────────────────────────────────────────
 let brandColors = [];
 let brandFonts = [];
+let brandFontWeights = []; // weights the brand text font actually ships (tokens fonts[].weights)
 let brandColorStats = []; // rich per-color usage stats (areaBg / interactiveBg / textCount …)
+// Icon/glyph fonts capture surfaces as "fonts" — they are never the brand text face
+// (webflow-icons, Font Awesome, icomoon …) and must not become display/body or contribute weights.
+const isIconFont = (name) =>
+  /(?:^|[\s_-])icons?(?:[\s_-]|$)|icomoon|font\s*-?awesome|glyphicons?|material\s*icons|feather\s*icons/i.test(
+    String(name),
+  );
 if (existsSync(tokensPath)) {
   try {
     const t = JSON.parse(readFileSync(tokensPath, "utf8"));
@@ -137,7 +177,19 @@ if (existsSync(tokensPath)) {
     brandFonts = (t.fonts ?? [])
       .map((f) => (typeof f === "string" ? f : (f?.family ?? f?.name ?? "")))
       .map((f) => String(f).split(",")[0].replace(/['"]/g, "").trim())
-      .filter(Boolean);
+      .filter(Boolean)
+      .filter((f) => !isIconFont(f));
+    // Union of the (non-icon) brand fonts' available weights — used to clamp the preset's
+    // type ramp so a font shipping only 400/500 never faux-bolds a 600/700 heading.
+    brandFontWeights = [
+      ...new Set(
+        (t.fonts ?? [])
+          .filter((f) => f && typeof f === "object" && !isIconFont(f.family ?? f.name ?? ""))
+          .flatMap((f) => (Array.isArray(f.weights) ? f.weights : []))
+          .map((w) => parseInt(w, 10))
+          .filter((w) => Number.isFinite(w)),
+      ),
+    ].sort((a, b) => a - b);
     brandColorStats = Array.isArray(t.colorStats) ? t.colorStats : [];
   } catch (e) {
     die(`tokens.json parse: ${e.message}`);
@@ -156,7 +208,7 @@ if (brandColors.length && presetColors.length) {
   // Fall back to the legacy luminance/chroma heuristic only when stats are absent —
   // but pick the accent via pickAccent either way so a UA-default link color never wins.
   const br =
-    brandRolesFromStats(brandColorStats) ??
+    brandRolesFromStats(brandColorStats, brandColors) ??
     (() => {
       // strip UA-default link colors so a stray <a> color can't become ink/canvas/accent
       const clean = brandColors.filter((h) => !UA_DEFAULT_COLORS.has(h.toUpperCase()));
@@ -174,39 +226,66 @@ if (brandColors.length && presetColors.length) {
       `  ⚠ accent ${br.accent} 彩度很低 (${chroma(br.accent)}) — 确认这是品牌色而非中性/默认色`,
     );
   }
-  // Map by LUMINANCE POLARITY, not by role name: the preset's darker neutral takes the
-  // brand's darker neutral, the lighter takes the lighter. So a dark-ground preset stays
-  // dark and a light-ground preset stays light — both land on the brand's real values,
-  // even when the brand's canvas is dark (dark-mode brand) and ink is light.
+  // Map by LUMINANCE POLARITY. The preset's darker value takes the brand's darker value and
+  // the lighter takes the lighter — UNLESS the brand's GROUND polarity differs from the
+  // preset's. Every shipped preset is light-ground; a dark-mode brand (Linear, Vercel,
+  // Raycast…) has its canvas darker than its ink (colorStats already resolved the real
+  // ground as the largest-area background). On a polarity MISMATCH we INVERT the mapping so a
+  // light preset becomes the dark brand (canvas↔ink swap) instead of forcing the brand onto
+  // an off-brand light video; neutral/tint lightness is then mirrored (L→1−L) so the whole
+  // palette flips to the brand's ground. Same-polarity (the common case) is unchanged.
   const darker = (a, b) => ((lum(a) ?? 0) <= (lum(b) ?? 0) ? a : b);
   const prDark = darker(pr.ink, pr.canvas);
   const prLight = prDark === pr.ink ? pr.canvas : pr.ink;
   const brDark = darker(br.ink, br.canvas);
   const brLight = brDark === br.ink ? br.canvas : br.ink;
+  const presetGroundDark = (lum(pr.canvas) ?? 255) < (lum(pr.ink) ?? 0);
+  const brandGroundDark = (lum(br.canvas) ?? 255) < (lum(br.ink) ?? 0);
+  const invert = presetGroundDark !== brandGroundDark;
+  const mapDark = invert ? brLight : brDark; // preset's dark value → this brand value
+  const mapLight = invert ? brDark : brLight; // preset's light value → this brand value
+  const flipL = (l) => (invert ? 1 - l : l); // mirror tint/neutral lightness when flipping
   const prAccentHsl = hexToHsl(pr.accent);
   const prAccent2Hsl = hexToHsl(pr.accent2);
   const newByKey = new Map();
   for (const [key, val] of presetColors) {
     const ph = hexToHsl(val);
     let next;
-    if (val === prDark) next = brDark;
-    else if (val === prLight) next = brLight;
+    if (val === prDark) next = mapDark;
+    else if (val === prLight) next = mapLight;
+    else if (
+      /(?:^|[-_])(?:positive|negative|success|error|warning|danger|good|bad|up|down)(?:[-_]|$)/i.test(
+        key,
+      )
+    )
+      // semantic status colors (green/red …) — the HUE carries the meaning; never repaint.
+      // MUST precede the accent checks: a preset's red "negative" is often its 2nd-most-chromatic
+      // color and would otherwise be claimed as accent2 and recolored to the brand hue.
+      next = val;
     else if (val === pr.accent)
       next = br.accent; // primary accent → the EXACT brand color
     else if (pr.accent2 !== pr.accent && val === pr.accent2)
       next = br.accent2; // exact 2nd accent
-    else if (!ph)
-      next = val; // non-hex (rgba) → leave as-is
-    else {
-      // repaint the remaining tints: pick the brand accent whose preset counterpart is
-      // nearest in hue, then keep THIS color's own lightness so tint families stay families.
+    else if (!ph) {
+      // rgba()/rgb() tint → repaint its rgb with the brand accent, keep alpha (a neutral
+      // overlay is kept). A non-color non-hex value (var(), named) falls through unchanged.
+      next = remapRgbaToAccent(val, br.accent, br.accent2, prAccentHsl, prAccent2Hsl) ?? val;
+    } else if (chroma(val) < 16) {
+      // NEUTRAL source (grey text-ladder, hairline borders) → keep it NEUTRAL. Apply at most a
+      // whisper of the brand hue (sat ≤ 0.06); never the accent's full saturation — that is what
+      // turned the grey ladder into saturated blue.
+      const bh = hexToHsl(br.accent);
+      next = bh ? hslToHex(bh.h, Math.min(ph.s, 0.06), flipL(ph.l)) : val;
+    } else {
+      // chromatic tint → repaint with the nearest brand accent's hue+sat, keep THIS color's
+      // lightness so tint families stay families.
       const useSecond =
         pr.accent !== pr.accent2 &&
         prAccentHsl &&
         prAccent2Hsl &&
         hueDist(ph.h, prAccent2Hsl.h) < hueDist(ph.h, prAccentHsl.h);
       const bh = hexToHsl(useSecond ? br.accent2 : br.accent);
-      next = bh ? hslToHex(bh.h, bh.s, ph.l) : val;
+      next = bh ? hslToHex(bh.h, bh.s, flipL(ph.l)) : val;
     }
     if (next !== val) newByKey.set(key, next);
   }
@@ -229,7 +308,7 @@ if (brandColors.length && presetColors.length) {
     })
     .join("\n");
   summary.push(
-    `colors: dark ${prDark}→${brDark}, light ${prLight}→${brLight}, accent ${pr.accent}→${br.accent}` +
+    `colors: ${invert ? "INVERTED (dark-mode brand on light preset) · " : ""}dark ${prDark}→${mapDark}, light ${prLight}→${mapLight}, accent ${pr.accent}→${br.accent}` +
       ` (${newByKey.size}/${presetColors.length} keys repainted${brandColorStats.length ? ", via colorStats" : ""})`,
   );
 } else {
@@ -246,15 +325,178 @@ if (brandFonts.length) {
   const strip = (q) => (q ? q.replace(/^"|"$/g, "") : null);
   const pDisplay = strip(pf.display);
   const pBody = strip(pf.body);
-  const bDisplay = brandFonts[0];
-  const bBody = brandFonts[1] ?? brandFonts[0];
-  if (pDisplay && bDisplay) md = md.split(`"${pDisplay}"`).join(`"${bDisplay}"`);
-  if (pBody && pBody !== pDisplay && bBody) md = md.split(`"${pBody}"`).join(`"${bBody}"`);
-  summary.push(`fonts: display ${pDisplay}→${bDisplay}, body ${pBody}→${bBody}`);
+  const pMono = strip(pf.mono);
+  // A monospace brand face is for code / labels / chrome — never the reading display or body.
+  // Split the brand fonts: the primary NON-mono family carries display AND body (the common
+  // single-sans case, e.g. Inter for everything), and a captured mono (Berkeley Mono,
+  // JetBrains Mono…) is routed onto the preset's mono role instead of turning the body
+  // monospace. (Distinct display/body brands still resolve to a clean sans; hand-tune the
+  // display in frame.md if a separate display face is wanted.)
+  const isMonoFont = (n) =>
+    /(?:^|[\s_-])mono(?:[\s_-]|$)|monospace|consol|courier|menlo|monaco|jetbrains|berkeley|space\s*mono|ibm\s*plex\s*mono|sf\s*mono|roboto\s*mono|source\s*code|fira\s*code|geist\s*mono|dm\s*mono/i.test(
+      String(n),
+    );
+  const nonMono = brandFonts.filter((f) => !isMonoFont(f));
+  const monoFonts = brandFonts.filter(isMonoFont);
+  const bDisplay = nonMono[0] ?? brandFonts[0];
+  const bBody = nonMono[0] ?? brandFonts[0];
+  const bMono = monoFonts[0] ?? null;
+  const escRe = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  // Replace the preset family as a WHOLE WORD/PHRASE everywhere — frontmatter values,
+  // component strings like "Space Grotesk 600", AND prose — case-sensitive with word
+  // boundaries so a single-word family ("Inter") can never corrupt a substring
+  // ("interactive"). Quote-exact replace alone missed names baked into longer strings + prose.
+  const swapFamily = (from, to) => {
+    if (from && to && from !== to) md = md.replace(new RegExp(`\\b${escRe(from)}\\b`, "g"), to);
+  };
+  swapFamily(pDisplay, bDisplay);
+  if (pBody !== pDisplay) swapFamily(pBody, bBody);
+  // route the brand mono onto the preset's mono role (only if the preset has a DISTINCT mono
+  // family — never collapse body/display into mono)
+  if (bMono && pMono && pMono !== pBody && pMono !== pDisplay) swapFamily(pMono, bMono);
+  summary.push(
+    `fonts: display ${pDisplay}→${bDisplay}, body ${pBody}→${bBody}` +
+      (bMono && pMono && pMono !== pBody && pMono !== pDisplay ? `, mono ${pMono}→${bMono}` : ""),
+  );
 } else {
   summary.push("fonts: no brand fonts — preset fonts kept");
 }
 
+// ── cap type weights to the brand font's available faces ──────────────────────
+// The remix swaps the font FAMILY but keeps the preset's weights; a brand font that ships
+// only e.g. 400/500 would faux-bold every 600/700 heading. Clamp each `typography:` weight
+// to the NEAREST weight the brand font actually provides (tokens.json fonts[].weights).
+if (brandFonts.length && brandFontWeights.length) {
+  const avail = brandFontWeights;
+  const nearest = (n) =>
+    avail.reduce((best, w) => {
+      const dw = Math.abs(w - n),
+        db = Math.abs(best - n);
+      return dw < db || (dw === db && w > best) ? w : best;
+    }, avail[0]);
+  let capped = 0;
+  const cap = (num) => {
+    const n = parseInt(num, 10);
+    if (avail.includes(n)) return String(n);
+    const c = nearest(n);
+    if (c !== n) capped++;
+    return String(c);
+  };
+  let inType = false;
+  md = md
+    .split(/\r?\n/)
+    .map((line) => {
+      if (/^typography:\s*$/.test(line)) {
+        inType = true;
+        return line;
+      }
+      if (inType && /^\S/.test(line)) inType = false;
+      let out = line;
+      // (a) structured `weight: NNN` in the typography ramp
+      if (inType) out = out.replace(/(\bweight:\s*)(\d{3})\b/g, (m, pfx, num) => pfx + cap(num));
+      // (b) a weight baked into a quoted `typography:` component value, e.g.
+      //     cta-button → typography: "Basier Square 600"  (NNN not followed by a unit like px)
+      out = out.replace(
+        /(typography:\s*"[^"]*?\b)(\d{3})\b(?![a-z%])/gi,
+        (m, pfx, num) => pfx + cap(num),
+      );
+      return out;
+    })
+    .join("\n");
+  if (capped)
+    summary.push(`fonts: capped ${capped} type weight(s) to brand faces {${avail.join(", ")}}`);
+}
+
+// ── brand-adaptation note ─────────────────────────────────────────────────────
+// The remix fixes the NORMATIVE frontmatter, but the preset's PROSE still carries its
+// original weight ranges / color-names. Prepend a short "frontmatter is truth" header so a
+// reader (or frame worker) interprets any lingering preset prose THROUGH the brand values —
+// instead of fragile per-sentence prose surgery.
+if (brandFonts.length || (brandColors.length && presetColors.length)) {
+  const bD = brandFonts[0];
+  const bB = brandFonts[1] ?? brandFonts[0];
+  const note =
+    `## Brand adaptation (READ FIRST — the frontmatter is the source of truth)\n\n` +
+    `This is the **${presetName}** preset remixed onto the captured brand. The YAML frontmatter above ` +
+    `(colors · typography · components) is **normative and already correct — use it verbatim.** The prose ` +
+    `below is the ORIGINAL preset's intent; read it THROUGH the frontmatter:\n\n` +
+    (brandFonts.length
+      ? `- **Fonts** — already set to **${bD}** (display) / **${bB}** (body); ignore any preset font name lingering in prose.\n`
+      : "") +
+    (brandFontWeights.length
+      ? `- **Weights** — the brand font ships \`{${brandFontWeights.join(", ")}}\` only; every weight is clamped to these — ignore higher preset weights (e.g. 600/700) in prose.\n`
+      : "") +
+    `- **Colors** — use the frontmatter hex; preset color NAMES in prose (e.g. "cobalt", "cream") mean the remapped brand values.\n`;
+  if (/^# .*$/m.test(md)) md = md.replace(/^# .*$/m, (m) => `${m}\n\n${note}`);
+  else md = `${note}\n${md}`;
+  summary.push("brand-adaptation note prepended");
+}
+
+// ── stage brand font files + emit @font-face ──────────────────────────────────
+// A brand font is rarely a Google font, so renaming the family in frame.md is not enough:
+// nothing loads the actual face. If the capture downloaded font files, copy them to
+// assets/fonts/ under CLEAN, weight-named names (so captions.mjs' family-prefix matcher
+// finds them too) and append a ready-to-paste, ROOT-RELATIVE @font-face block to frame.md.
+if (brandFonts.length) {
+  const norm = (s) =>
+    String(s)
+      .toLowerCase()
+      .replace(/[^a-z0-9]/g, "");
+  const extOf = (f) => (f.match(/\.(woff2|woff|ttf|otf)$/i)?.[1] ?? "").toLowerCase();
+  const FMT = { woff2: "woff2", woff: "woff", ttf: "truetype", otf: "opentype" };
+  const weightInfo = (name) => {
+    const s = name.toLowerCase();
+    if (/black|heavy|ultra|extrabold/.test(s)) return { n: 800, w: "ExtraBold" };
+    if (/semibold|demibold/.test(s)) return { n: 600, w: "SemiBold" };
+    if (/bold/.test(s)) return { n: 700, w: "Bold" };
+    if (/medium/.test(s)) return { n: 500, w: "Medium" };
+    if (/light|thin/.test(s)) return { n: 300, w: "Light" };
+    return { n: 400, w: "Regular" };
+  };
+  const fams = [...new Set(brandFonts)];
+  const srcDirs = [
+    join(hyperframesDir, "capture/assets/fonts"),
+    join(hyperframesDir, "assets/fonts"),
+  ].filter((d) => existsSync(d));
+  const files = [];
+  for (const d of srcDirs)
+    for (const f of readdirSync(d).sort()) if (extOf(f)) files.push({ d, f });
+  // Single family → all font files belong to it (the common captured case, hash-named files
+  // included). Multiple families → assign each file to the longest family key its name contains.
+  const ranked = [...fams].sort((a, b) => norm(b).length - norm(a).length);
+  const famOf = (f) =>
+    fams.length === 1 ? fams[0] : ranked.find((x) => norm(f).includes(norm(x)));
+  const outDir = join(hyperframesDir, "assets/fonts");
+  const faces = [];
+  const stagedNames = new Set();
+  for (const { d, f } of files) {
+    const fam = famOf(f);
+    if (!fam) continue;
+    const { n, w } = weightInfo(f);
+    const clean = `${fam.replace(/[^A-Za-z0-9]/g, "")}-${w}.${extOf(f)}`;
+    if (stagedNames.has(clean)) continue;
+    mkdirSync(outDir, { recursive: true });
+    if (!existsSync(join(outDir, clean))) copyFileSync(join(d, f), join(outDir, clean));
+    stagedNames.add(clean);
+    faces.push(
+      `@font-face{font-family:"${fam}";font-weight:${n};font-style:normal;font-display:block;src:url("assets/fonts/${clean}") format("${FMT[extOf(f)]}");}`,
+    );
+  }
+  if (faces.length) {
+    md +=
+      `\n\n## Font loading (auto-generated)\n\n` +
+      `The brand font ships as local files in \`assets/fonts/\` — do NOT link Google Fonts for it. ` +
+      `Paste this \`<style>\` into every frame's \`<head>\`/\`<template>\` (captions use the same files) ` +
+      `so \`font-family\` resolves in preview, snapshot, and render alike:\n\n` +
+      "```html\n<style>\n" +
+      faces.join("\n") +
+      "\n</style>\n```\n";
+    summary.push(
+      `fonts: staged ${stagedNames.size} face(s) → assets/fonts/ + @font-face in frame.md`,
+    );
+  }
+}
+
 // ── write frame.md ────────────────────────────────────────────────────────────
 const framePath = join(hyperframesDir, "frame.md");
 writeFileSync(framePath, md);
@@ -277,9 +519,12 @@ if (outColors.length !== presetColors.length) {
 const outRoles = semanticColors(outColors);
 const li = lum(outRoles.ink),
   lc = lum(outRoles.canvas);
-if (li != null && lc != null && li >= lc) {
+// ink (type) and canvas (ground) must differ enough to READ — in EITHER direction. A
+// light-mode spec has ink darker than canvas; a dark-mode spec (the polarity flip above)
+// the reverse. Assert luminance SEPARATION, not a fixed polarity.
+if (li != null && lc != null && Math.abs(li - lc) < 40) {
   die(
-    `ink (${outRoles.ink}, lum ${li.toFixed(0)}) is not darker than canvas (${outRoles.canvas}, lum ${lc.toFixed(0)}) — bad brand mapping`,
+    `ink (${outRoles.ink}, lum ${li.toFixed(0)}) and canvas (${outRoles.canvas}, lum ${lc.toFixed(0)}) lack contrast — bad brand mapping`,
   );
 }
 
@@ -288,4 +533,4 @@ for (const s of summary) console.log(`  ${s}`);
 console.log(
   `  .hyperframes/caption-skin.html: ${skinCopied ? "copied" : "preset ships none — captions will use the default pill"}`,
 );
-console.log(`  self-check: keys preserved, ink darker than canvas ✓`);
+console.log(`  self-check: keys preserved, ink/canvas contrast ok ✓`);
diff --git a/skills/product-launch-video/scripts/captions.mjs b/skills/product-launch-video/scripts/captions.mjs
index dfa25c9fcf..f238218d02 100644
--- a/skills/product-launch-video/scripts/captions.mjs
+++ b/skills/product-launch-video/scripts/captions.mjs
@@ -36,7 +36,7 @@ import { existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync } from
 import { dirname, join, resolve } from "node:path";
 import { parseStoryboard } from "./lib/storyboard.mjs";
 import { captionBand, parseFormat } from "./lib/dimensions.mjs";
-import { parseColors, parseFonts, semanticColors } from "./lib/tokens.mjs";
+import { parseColors, parseFonts, semanticColors, lum } from "./lib/tokens.mjs";
 
 const flag = (argv, name, def) => {
   const i = argv.indexOf(`--${name}`);
@@ -276,6 +276,20 @@ function buildFromSkin(skin, groups, total, W, H, tokens, die, faces = "", fonts
   // overflow:hidden — nothing is clipped); zeroing it would need an airy line-height that
   // balloons the pill, which is worse. Override only if a brand font genuinely clips.
   out += "\n<style>\n  .caption-line { line-height: 1.1 !important; }\n</style>";
+  // dark-ground caption contrast (auto). The preset caption skins are tuned for a LIGHT
+  // pill (cream); on a dark brand ground the pill goes near-black, so the skin's faint
+  // upcoming-word mix and light highlight block turn unreadable. When the resolved caption
+  // canvas is dark, override the three word states: a brighter muted upcoming color + an
+  // on-brand ACCENT highlight block with light text. Light grounds are left untouched.
+  const capCanvas = (tokens.match(/--cap-canvas:\s*(#[0-9a-fA-F]{6})/) || [])[1];
+  if (capCanvas && (lum(capCanvas) ?? 255) < 90) {
+    out +=
+      "\n<style>\n" +
+      "  .caption-word { color: color-mix(in srgb, var(--cap-ink) 64%, var(--cap-canvas)); }\n" +
+      "  .caption-word.is-active { color: var(--cap-ink); background: var(--cap-accent); box-shadow: 0 0 0 0.06em var(--cap-accent); }\n" +
+      "  .caption-word.is-spoken { color: var(--cap-ink); background: transparent; box-shadow: none; }\n" +
+      "</style>";
+  }
   return `<template id="captions-template" data-composition-id="captions" data-width="${W}" data-height="${H}">\n${out.trim()}\n</template>\n`;
 }
 
@@ -291,8 +305,11 @@ function brandFontFaces(framePath, hyperframesDir) {
   ];
   if (!families.length) return "";
   const dirs = [
-    { abs: join(hyperframesDir, "assets/fonts"), rel: "../assets/fonts" },
-    { abs: join(hyperframesDir, "capture/assets/fonts"), rel: "../capture/assets/fonts" },
+    // ROOT-RELATIVE — compositions are served with the project root as their base URL, so a
+    // "../" prefix escapes the root (lint: invalid_parent_traversal_in_asset_path) and 404s in
+    // Studio/preview. Mirror what the frame workers use for images.
+    { abs: join(hyperframesDir, "assets/fonts"), rel: "assets/fonts" },
+    { abs: join(hyperframesDir, "capture/assets/fonts"), rel: "capture/assets/fonts" },
   ].filter((d) => existsSync(d.abs));
   const weightOf = (n) => {
     const s = n.toLowerCase();
diff --git a/skills/product-launch-video/scripts/lib/tokens.mjs b/skills/product-launch-video/scripts/lib/tokens.mjs
index 3f51778ec5..02b1ceda7b 100644
--- a/skills/product-launch-video/scripts/lib/tokens.mjs
+++ b/skills/product-launch-video/scripts/lib/tokens.mjs
@@ -50,18 +50,38 @@ export const UA_DEFAULT_COLORS = new Set(
 
 // Pick the brand ACCENT — never by raw chroma alone, never a UA-default link color.
 // Priority:
-//   1) with capture colorStats → the colorful color used MOST as an interactive
-//      background (buttons / pills). That is, by definition, the brand action color.
+//   1) with capture colorStats → the colorful color that RECURS across the UI. The brand
+//      accent shows up in MANY roles (link text + icon + button + badge), whereas a one-off
+//      CTA fill appears in just one. So rank chromatic (chroma>40) candidates by role
+//      diversity first, then total prevalence, then interactive use, then chroma. This keeps
+//      a pervasive brand color (e.g. an indigo used everywhere) ahead of a single bright
+//      button fill (e.g. a lime used once) — the old "top interactiveBg" rule picked the
+//      latter. Requiring interactiveBg>0 is dropped so a text/icon-only accent can still win.
 //   2) no stats → most chromatic color AFTER removing UA defaults + `exclude`.
 // A stray default link color (e.g. #0000EE) can win under neither path.
 export function pickAccent(stats, colors, exclude = []) {
   const ban = new Set([...exclude, ...UA_DEFAULT_COLORS].map((c) => String(c).toUpperCase()));
   const ok = (h) => /^#[0-9a-fA-F]{6}$/.test(String(h)) && !ban.has(String(h).toUpperCase());
+  // Prominence rank from the (frequency-ordered) `colors` palette: index 0 = most used.
+  // A saturated color sitting at the TAIL is almost always a one-off (a single CTA fill),
+  // not the brand accent — capture colorStats counts are too sparse to tell these apart
+  // (e.g. Linear's indigo and a lime CTA both register count≈1), but palette ORDER does.
+  const rank = new Map((colors ?? []).map((h, i) => [String(h).toUpperCase(), i]));
+  const prom = (h) => (rank.has(String(h).toUpperCase()) ? rank.get(String(h).toUpperCase()) : 1e9);
   if (Array.isArray(stats) && stats.length) {
+    const roles = (s) =>
+      ((s.interactiveBg || 0) > 0 ? 1 : 0) +
+      ((s.textCount || 0) > 0 ? 1 : 0) +
+      ((s.bgCount || 0) > 0 ? 1 : 0);
     const a = stats
-      .filter((s) => ok(s?.hex) && (s.interactiveBg || 0) > 0 && chroma(s.hex) > 40)
+      .filter((s) => ok(s?.hex) && chroma(s.hex) > 40)
       .sort(
-        (x, y) => (y.interactiveBg || 0) - (x.interactiveBg || 0) || chroma(y.hex) - chroma(x.hex),
+        (x, y) =>
+          roles(y) - roles(x) || // used in MORE roles (link+icon+button) = the brand accent
+          prom(x.hex) - prom(y.hex) || // earlier in the palette = more prominent
+          (y.count || 0) - (x.count || 0) ||
+          (y.interactiveBg || 0) - (x.interactiveBg || 0) ||
+          chroma(y.hex) - chroma(x.hex),
       );
     if (a.length) return a[0].hex;
   }
@@ -77,7 +97,7 @@ export function pickAccent(stats, colors, exclude = []) {
 // are unusable, so the caller can fall back. canvas = the color painting the most real
 // background area (the page ground, dark or light); ink = the dominant text color that
 // actually contrasts with the canvas; accent via pickAccent.
-export function brandRolesFromStats(stats) {
+export function brandRolesFromStats(stats, colorsInOrder) {
   if (!Array.isArray(stats) || !stats.length) return null;
   const v = stats.filter((s) => /^#[0-9a-fA-F]{6}$/.test(s?.hex || ""));
   if (!v.length) return null;
@@ -87,11 +107,9 @@ export function brandRolesFromStats(stats) {
       (b.maxArea || 0) - (a.maxArea || 0) ||
       (b.bgCount || 0) - (a.bgCount || 0),
   )[0]?.hex;
-  const accent = pickAccent(
-    v,
-    v.map((s) => s.hex),
-    [canvas],
-  );
+  // pass the frequency-ordered palette (tokens.colors) so pickAccent can use palette
+  // PROMINENCE — colorStats counts alone are too sparse to rank rare accents.
+  const accent = pickAccent(v, colorsInOrder ?? v.map((s) => s.hex), [canvas]);
   if (!canvas || !accent) return null;
   const cl = lum(canvas) ?? 0;
   const ink =
@@ -170,5 +188,17 @@ export function parseFonts(md) {
     roles.title ??
     roles.hero ??
     body;
-  return { display: q(display), body: q(body) };
+  // the monospace / chrome family (code, tags, ticks, page numbers) — so the remix can
+  // route a captured brand mono (Berkeley Mono, JetBrains Mono…) onto this role instead
+  // of the reading body. null when the preset has no distinct mono role.
+  const mono =
+    roles.mono ??
+    roles["mono-tag"] ??
+    roles["mono-chrome"] ??
+    roles["mono-tick"] ??
+    roles.code ??
+    roles.data ??
+    roles.pagenum ??
+    null;
+  return { display: q(display), body: q(body), mono: q(mono) };
 }
diff --git a/skills/product-launch-video/sub-agents/frame-worker.md b/skills/product-launch-video/sub-agents/frame-worker.md
index 965e7834b8..88c59bd30e 100644
--- a/skills/product-launch-video/sub-agents/frame-worker.md
+++ b/skills/product-launch-video/sub-agents/frame-worker.md
@@ -11,10 +11,14 @@
   - `voiceover` — the narration line. **Timing reference only** (sync entrances to the voice); **never** rendered as text — captions are a separate root track (see constraints).
   - `duration` — your render length in seconds. **Fixed upstream; never change it or tween to fill a different length.**
   - `transition_in` — informational. The injector stamps it at the root; **you do not author transitions.**
-  - the free-form **narrative** prose — your visual brief for this frame.
-  - `extra:` — `effects` (named atomic motions to apply), `blueprint` (a named multi-phase scene pattern to build), `asset_candidates` (the real media available to this frame, each `public/<basename> — description`; a **`[video]`** tag marks a `.mp4` motion clip), `focal` (which candidate is the hero), `roles` (each candidate's role: `cutout` foreground / `background` full-bleed / supporting). (`sfx` also rides in `extra` but is the orchestrator's — you mount no audio.)
+  - the **time-coded shot sequence** — your build spec. A sequence of Scene lines (`Scene 1 (0.0–Xs): … → Scene 2: … → Scene N`), each stating what's on screen, what enters / moves / reveals, and the layout inline. Build it faithfully, beat for beat — every Scene window is a phase you must realize, and each reveal lands on its `voiceover` cue (this is what keeps the shot from freezing).
+  - `blueprint:` — an id (or the literal `compose`). The id points to `../hyperframes-animation/blueprints/<id>.md`: the **product-agnostic shot template** this frame instantiates — the overall shape + its signature move. Read it for the shape; `compose` means there's no template, sequence the shot from the Scene lines directly.
+  - `focal:` — which candidate is the hero.
+  - `roles:` — each candidate's role: `cutout` foreground / `background` full-bleed / supporting — plus the real media available (each `public/<basename> — description`; a **`[video]`** tag marks a `.mp4` motion clip).
+  - `sfx:` — the orchestrator's; you mount no audio.
 - `frame.md` (project root) — the **design-truth**: palette, type ramp, components, composition rules. The LOOK. Pull every visual token from here.
-- `ANIM_DIR` — absolute path to the shared `hyperframes-animation/` skill. Resolve every cited id under it: `ANIM_DIR/rules/<id>.md` (effect recipe), `ANIM_DIR/blueprints/<id>.md` (blueprint recipe), `ANIM_DIR/examples/<id>.html` (a worked, runnable source for each blueprint).
+- `RULES_DIR` — absolute path to this skill's local `../hyperframes-animation/rules/`. The **named motion verbs in the Scene lines** (and the moves the blueprint cites) resolve to rule recipes here: `RULES_DIR/<id>.md` is the mechanics for a motion. (A few rules link an optional runnable demo in the shared `../hyperframes-animation/examples/<id>.html` — open it only when a recipe is unclear.)
+- `../references/cut-catalog.md` — the **cut catalog** (zoom-through / inverse / cut-the-curve / waterfall). When a Scene seam is a within-scene swap, a scene-to-scene cut, or a text-to-text line change, build it INSIDE your composition per this catalog (Z-scale + blur + opacity, or per-word x-staggers). You never author the between-frame transition — story's `transition_in` + the injector own that.
 - Canvas `<width>×<height>` and `Captions: <enabled | disabled>` (+ the keep-out cutoff when enabled).
 
 **Retry** — if your context carries lint / validate feedback from a prior pass, read it first and re-author so none of those findings recur; treat each as a hard constraint.
@@ -27,10 +31,10 @@ These belong to other steps — touching them collides with a sibling or breaks
 
 - **What is SAID** — narration is locked in `SCRIPT.md` / the `voiceover` line. You only show; you never write or restate narration text.
 - **Duration** — fixed from real voice timing. Build your entrance to land within it; don't stretch or trim it.
-- **Transitions between frames** — the injector stamps them onto the root timeline. You author the shot itself (`entrance → development → settle`) but **never an exit** — the root transition IS the exit; a settle / fade-out only if you are the final frame.
+- **Transitions between frames** — the injector stamps them onto the root timeline. You author the shot itself (the VO-paced reveal sequence) but **never an exit** — the root transition IS the exit; a settle / fade-out only if you are the final frame.
 - **Audio** (narration / BGM / SFX) — assembled at the root by the orchestrator. **No `<audio>` element in your composition.**
 - **Design tokens** — palette / fonts / components come from `frame.md`. Don't invent them, and **never lift a word, label, or wordmark out of `frame.md` as your copy** — it is a style spec, not the product's content. Brand text comes from your frame's `scene` / narrative.
-- **Which effects / assets exist** — named upstream in your block (story's `asset_candidates`, visual design's `effects` / `focal` / `roles`). Implement them; don't fetch or invent new ones (you have no asset-fetch tool — never fabricate an image URL).
+- **Which motions / assets exist** — named upstream in your block (the shot sequence's motion verbs + `blueprint:`, the candidate media in `roles:` / `focal:`). Implement them; don't fetch or invent new ones (you have no asset-fetch tool — never fabricate an image URL).
 - **The shared `STORYBOARD.md`** — read your block, never write it. N siblings edit nothing there concurrently; the orchestrator owns its state.
 
 ## Frame constraints
@@ -40,14 +44,14 @@ Generic seek-safety + structure live in `hyperframes-core` (read it; not restate
 - **Caption keep-out — all content in the top ~83%.** A karaoke caption pill owns the bottom ~17% of the canvas. Keep every element (headline, cards, CTA, stats, brand mark) above `y ≈ 0.83 × height` — compute the pixel cutoff from your canvas (e.g. `≤ 900` on a 1080-tall frame, `≤ 1600` on a 1920-tall portrait). Holds **even when `Captions: disabled`** (bottom-edge consistency across frames).
 - **Fill the content area — especially portrait.** Compose the whole top-83% region; don't float one small cluster mid-frame. Anchor the hero high (~0.2–0.35 × height), flow supporting elements down with rhythm, scale hero type toward full-bleed. (Landscape's region is short, so vertical centering near 0.42 × height is fine.)
 - **Visible text is short motion-graphics copy** — headline / stat / one-word emphasis (`"$83K"`, `"INSTANT"`), never a sentence from the narration. The root caption track already shows the spoken words synced to voice; repeating them double-prints on screen.
-- **Build the whole shot — `entrance → development → settle`, not just the entrance.** The entrance is the shot's first beat; a frame that animates in over ~0.8s then freezes for the rest of its `duration` reads as a PowerPoint slide. Across the full `duration` build the **development** beat your note specifies (a reveal, rearrange, morph, emphasis hit, count-up) before the **settle**, with the macro camera move running underneath the whole shot. **Only EXITS are banned** — a non-final frame unmounts mid-frame, so an exit tween truncates and reads as a glitch (the root transition IS the exit); mid-shot development is free and seek-safe. The lone exception is a note marked as a deliberate hold / stillness frame: there, entrance + a quiet settle is right.
-- **Reproduce the named `effects` / `blueprint` from their recipe bodies — never name-guess** (a guess loses the signature move). Every id has a real recipe under `ANIM_DIR` (`rules/<id>.md` per effect, `blueprints/<id>.md` per blueprint, `examples/<id>.html` to watch it run). The note names the mode (`Reproduce` / `Adapt` / `Compose`, defined in visual-design); execute it: **Reproduce** → build the blueprint's phases faithfully, swapping in this frame's content / assets / timing. **Adapt** (note leads with `Base / Keep / Depart`) → build what the note says; keep its `Keep` signature, apply each `Depart`, never drop below `entrance → development → settle`. **Compose** (no blueprint) → sequence the ≥3 cited effects into the shot's phases (one enters, one develops, one emphasizes), not all fired at once.
+- **Build the whole shot — reveal across the full `duration`, never front-load.** Dumping the whole canvas in the first ~25% then holding it is exactly what reads as a PowerPoint slide. Instead reveal each piece — a line, a card, a stat, an icon — **as the `voiceover` reaches it**, sequencing reveals across the shot and especially the back ~50%, with the macro camera move running underneath. **Only EXITS are banned** — a non-final frame unmounts mid-frame, so an exit tween truncates and reads as a glitch (the root transition IS the exit); mid-shot reveals are free and seek-safe. The lone exception is a note marked as a deliberate hold / stillness frame: there, an entrance + a quiet settle is right (a held read beats bad motion).
+- **Implement the shot sequence faithfully — every Scene is a timeline phase.** The Scene lines ARE the build: map each Scene onto a phase of the one timeline, each piece revealing as the `voiceover` reaches it. For each **named motion** in a Scene, open its rule recipe under `RULES_DIR/<id>.md` and reproduce its mechanics — **never name-guess** (a guess loses the signature move). The **`blueprint:` template** (`../hyperframes-animation/blueprints/<id>.md`) gives the overall shape; read it and keep its **signature move** recognizable, then instantiate it with this frame's content / assets / timing. `compose` → no template; sequence the shot straight from the Scene lines. Whichever, never front-load the whole sequence at `t=0` — pace the reveals to the voiceover.
 - **Place each candidate by its `roles`** (the `focal` is the hero): a `cutout` is a foreground subject — respect the 83% keep-out, lay text around it, not over its face; a `background` is full-bleed and dimmed ~30–50% so foreground content stays legible. **A `[video]` candidate (`.mp4`) is a real motion clip — usually the strongest hero for a motion/demo product.** Render it as a **muted** `<video class="clip">` (`data-start` / `data-duration` / `data-track-index` per the core clip contract), a **direct child of the frame root** — never nested in another timed element, or the renderer freezes it. Keep it muted (the root owns all audio); a `[video-still]` or untagged image → `<img>`.
 
 ## Workflow
 
-1. **Read** — `hyperframes-core`'s composition contract (the structural law), then `frame.md` (the look) and your `## Frame N` block (content + effects / blueprint / assets). **Then open the recipe body of every id the block cites** — `ANIM_DIR/rules/<id>.md` per effect and `ANIM_DIR/blueprints/<id>.md` for the blueprint (plus its linked `examples/<id>.html` when the recipe is unclear): you reproduce these, not improvise them. Internalize the self-check codes below before you write — most lethal is **template transport**: every `<style>` + `<script>` (including the gsap load) must live INSIDE `<template>`, because the runtime only clones template contents and `lint` / `validate` / `inspect` can miss the resulting blank sub-composition.
-2. **Design** — translate `scene` + the (sometimes shot-by-shot) narrative + the recipes you just read into a visual plan using `frame.md`'s components and type ramp. Honor the note's phases shot-by-shot per the whole-shot rule above, and find a visual idea that reinforces the beat, not a literal restyle of the words. Place the named assets.
+1. **Read** — `hyperframes-core`'s composition contract (the structural law), then `frame.md` (the look) and your `## Frame N` block (the shot sequence + `blueprint:` / `focal:` / `roles:` / assets). **Then read the blueprint template** `../hyperframes-animation/blueprints/<id>.md` (skip if `compose`) for the shot's shape and signature move, and **open the rule recipe `RULES_DIR/<id>.md` for every named motion** in the Scene lines (plus the shared `../hyperframes-animation/examples/<id>.html` when the recipe is unclear): you reproduce these mechanics, not improvise them. Internalize the self-check codes below before you write — most lethal is **template transport**: every `<style>` + `<script>` (including the gsap load) must live INSIDE `<template>`, because the runtime only clones template contents and `lint` / `validate` / `inspect` can miss the resulting blank sub-composition.
+2. **Design** — turn the time-coded shot sequence into a timeline using `frame.md`'s components and type ramp: each Scene window becomes a phase revealed on its `voiceover` cue, each named motion built from the recipe you just read, the blueprint's signature move kept recognizable. Place the named assets, and find a visual idea that reinforces the beat, not a literal restyle of the words.
 3. **Author** — write the full sub-composition to `compositions/frames/<frame_id>.html` (rewrite to iterate; last write wins). `<template>`-wrapped root carrying `data-composition-id="<frame_id>"` and styled via `#root` (not a class on that element — see the self-check below), exactly one `gsap.timeline({ paused: true })` registered at `window.__timelines["<frame_id>"]`, built synchronously — per the core contract.
 4. **Self-check, then finish** — re-read your file against the checklist below and fix in place. Writing the file is your terminal action; you do **not** run the CLI.
 
@@ -61,9 +65,10 @@ You **can't** meaningfully run `hyperframes lint` / `validate` / `inspect` here:
 - `clip_missing_data_attrs` — every `class="clip"` element has `data-start` / `data-duration` / `data-track-index`.
 - `timeline_not_paused` / `timeline_not_registered` — one paused timeline, registered at `window.__timelines["<frame_id>"]`.
 - `css_transition_used` + repeat / yoyo / non-deterministic logic — none present (the renderer seeks frame-by-frame).
+- `gsap_css_transform_conflict` — never put a CSS `transform` (e.g. `translateY(-50%)` centering) on an element you then GSAP-animate a transform prop on (`x` / `y` / `scale` / `rotation`): GSAP overwrites the whole `transform` and silently drops the CSS centering (the element jumps). Center with `margin` / `inset` (or `top`/`left` + offset), fold the offset into the tween via `xPercent` / `yPercent`, or use `fromTo` (the rule exempts it).
 - **Hero visibility** — the main subject is visible by `t <= 0.5s`; entrance tweens use `fromTo` instead of CSS-hidden starting states.
 - `exit_animation_on_non_final_scene` — no exit tween unless you are the final frame.
-- **Shot develops (not a slide)** — a non-still frame carries a development beat between entrance and settle; cited effects are sequenced into phases, not all fired at `t=0`.
-- **Adapt fidelity** — if the note led with `Base / Keep / Depart`, the `Keep` signature is present and recognizable, every `Depart` is applied, and the shot still runs `entrance → development → settle`.
+- **No front-loading (not a slide)** — the shot's pieces reveal on their `voiceover` cues across the duration, not all fired at `t=0`; a non-still frame keeps content arriving rather than holding a full canvas from ~25%.
+- **Shot-sequence fidelity** — every Scene in the time-coded sequence is realized as a phase, the blueprint's signature move (unless `compose`) is present and recognizable, and the shot reveals to the voiceover (never front-loaded at `t=0`).
 - `font_family_without_font_face` — every font you name has a matching `@font-face` (or `@import`) **inside this file**. **Only use fonts that ship as files** with the project: the families declared in `frame.md` (their `.woff2` live in `assets/fonts/` or `capture/assets/fonts/` — point the `@font-face` `src` at the real file you find there). **Never name a font that has no file**, including system CJK / Japanese / Devanagari families (`Hiragino Sans`, `Yu Gothic`, `Noto Sans CJK`, `Noto Sans Devanagari`, …): the render machine is a clean headless Chrome with none of them installed, so the text silently falls back to a generic font and the typography is wrong in the MP4. For non-Latin or multilingual visible text, either use a shipped font that covers the script, or romanize / transliterate it (e.g. `日本語` → `Japanese`); if neither is possible it is out of scope for this frame — do not invent a font name.
 - **Keep-out + no-narration-text** (eyeball, no code) — nothing sits below the 83% cutoff; no narration sentence is rendered as visible text.

From 6b94b6602c457b2b2543fcef45af76421ebfec94 Mon Sep 17 00:00:00 2001
From: Miao Yang <miao.yang@heygen.com>
Date: Sat, 27 Jun 2026 02:12:50 +0800
Subject: [PATCH 2/2] fix(skills): clear CodeQL alerts in assemble-index.mjs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- script/style blanking regex now matches closing tags with trailing
  whitespace (</script >, </style >) — js/bad-tag-filter (high).
- drop the existsSync precheck before reading/repairing a frame file; read
  directly and handle ENOENT, removing the check->write TOCTOU window —
  js/file-system-race (high).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 skills-manifest.json                                 |  2 +-
 .../product-launch-video/scripts/assemble-index.mjs  | 12 ++++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/skills-manifest.json b/skills-manifest.json
index 4edefa4dc8..394cf9c845 100644
--- a/skills-manifest.json
+++ b/skills-manifest.json
@@ -58,7 +58,7 @@
       "files": 21
     },
     "product-launch-video": {
-      "hash": "d47b790f109c8077",
+      "hash": "dedfc10e340df06c",
       "files": 18
     },
     "remotion-to-hyperframes": {
diff --git a/skills/product-launch-video/scripts/assemble-index.mjs b/skills/product-launch-video/scripts/assemble-index.mjs
index 5514816e10..6c5a28d857 100644
--- a/skills/product-launch-video/scripts/assemble-index.mjs
+++ b/skills/product-launch-video/scripts/assemble-index.mjs
@@ -168,8 +168,8 @@ function guardFrame(html, label) {
   // trip ②/③. ① still splices into the ORIGINAL html, so its offsets stay correct.
   const scan = html
     .replace(/<!--[\s\S]*?-->/g, " ")
-    .replace(/<script\b[\s\S]*?<\/script>/gi, " ")
-    .replace(/<style\b[\s\S]*?<\/style>/gi, " ");
+    .replace(/<script\b[\s\S]*?<\/script[^>]*>/gi, " ")
+    .replace(/<style\b[\s\S]*?<\/style[^>]*>/gi, " ");
 
   // ② media inside a sub-comp — never driven by the runtime (renders blank/black).
   const media = scan.match(/<(video|audio)(?=[\s/>])/i);
@@ -255,7 +255,12 @@ for (const f of manifest.frames) {
     continue;
   }
   const compAbs = join(hyperframesDir, f.src);
-  if (!existsSync(compAbs)) {
+  // Read directly and handle ENOENT here rather than an existsSync precheck — the
+  // check→read/write pair is a TOCTOU race CodeQL flags (js/file-system-race).
+  let html;
+  try {
+    html = readFileSync(compAbs, "utf8");
+  } catch {
     if (built)
       die(`${label} is ${f.status} but its src ${f.src} is not on disk — re-dispatch the worker`);
     anomalies.push(`${label}: src ${f.src} not on disk (status ${f.status}) — skipped`);
@@ -270,7 +275,6 @@ for (const f of manifest.frames) {
   // finds the timeline. frame_id = src basename (frame-worker contract); verify
   // the inner html actually declares it.
   const compId = basename(f.src).replace(/\.html?$/i, "");
-  let html = readFileSync(compAbs, "utf8");
   // Guard against blank/partial scene files: a worker that errors or is
   // interrupted mid-write leaves an empty (or markup-less) file that exists but
   // fails at render with "Composition HTML is empty or could not be parsed".