npm - takomi - Versions diffs - 2.1.45 → 2.5.4 - Mend

takomi 2.1.45 → 2.5.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (679) hide show

package/assets/.agent/skills/embedded-captions/modes/cinematic/engine.html CHANGED Viewed

@@ -1,355 +1,355 @@
-<!doctype html>
-<!--
-  ENGINE — the one Cinematic-mode shell, parameterized by a DNA (dna/<name>.json).
-  Replaces per-template HTML files: the DNA supplies type / palette / blend / motion
-  grammar / hero orchestration; safe-zones v2 supplies scene tokens (accent sampling,
-  contact-shadow direction, depth-match blur); the plan supplies layout + per-group
-  typography. Compiled by make-composition.cjs.
-  Contract (unchanged from cinematic-cream — gates depend on it):
-    #root[data-composition-id="main"] · #a-roll · #stage · #a-roll-audio
-    .plane > .cap > .w spans · paused seek-safe GSAP on window.__timelines["main"]
-    container fade via tl.set at g.in−0.01 · exit fade + display:none at g.out
-    no Math.random / Date.now / CSS keyframes / repeat:-1
-  New in the engine:
-    - MOTION grammar from the DNA: soft / present / impact tones (+ "burn" reveal)
-    - HERO three-act orchestration:
-        act 1 SETUP   — co-visible groups dim 0.35s before the hero lands
-        act 2 IMPACT  — entrance (emergence | settle | slam | rise) with per-letter
-                        stagger; amplitude coupled to the spoken word's RMS loudness
-        act 3 AFTERGLOW — slow breathe scale + glow layer (DNA-gated) until exit
-    - depth-match blur on embed (bg) captions only; fg stays sharp
-    - scene-sampled --accent custom property available to per-group CSS
--->
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width={{WIDTH}}, height={{HEIGHT}}" />
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-    <style>
-      :root {
-        --font-scale: {{FONT_SCALE}};
-        --h: {{HEIGHT}}px; --w: {{WIDTH}}px;
-        --accent: {{ACCENT}};
-      }
-      * { margin: 0; padding: 0; box-sizing: border-box; }
-      html, body {
-        margin: 0;
-        width: {{WIDTH}}px; height: {{HEIGHT}}px;
-        overflow: hidden;
-        background: #000;
-        font-family: '{{FONT_FAMILY}}', "Helvetica Neue", system-ui, sans-serif;
-      }
-      #a-roll { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
-      #stage {
-        position: absolute;
-        top: 0; left: 0;
-        width: {{WIDTH}}px; height: {{HEIGHT}}px;
-        pointer-events: none;
-        z-index: 2;
-      }
-      /* BASE — DNA tokens. bg (embed) captions get the depth-match filter; fg stays sharp. */
-      .cap {
-        display: block;
-        position: absolute;
-        opacity: 0;
-        mix-blend-mode: {{BLEND_MODE}};
-        color: {{CAP_COLOR}};
-        text-shadow: {{TEXT_SHADOW}};
-        filter: {{TEXT_FILTER_BG}};
-        line-height: 1.12; /* contains ink + internal leading — wrapped rows breathe (was 1.0: rows touched) */
-        will-change: transform, opacity;
-        top: 50%; left: 0; right: 0; text-align: center;
-      }
-      .cap[data-layer="fg"] { filter: {{TEXT_FILTER_FG}}; }
-      .cap .w { display: inline-block; opacity: 0; will-change: opacity, transform; }
-      .cap .w .l { display: inline-block; will-change: opacity, transform; }
-      /* hero glow — same glyphs duplicated UNDER the hero, blurred; opacity driven by GSAP.
-         em-based blur scales with the hero's font size. Not part of plan.groups → gates skip it.
-         MUST be out of flow (absolute) — as a flow sibling inside a plane it displaces the hero. */
-      .hero-glow, .plane > .cap.hero-glow { position: absolute; left: 0; right: 0; top: 0; filter: blur(0.06em); }
-      /* hero echoes — colored duplicates (RGB fringe / speed trails); position mirrors the
-         hero via its #id rule, color comes from each echo's own rule */
-      .hero-echo, .plane > .cap.hero-echo { position: absolute; left: 0; right: 0; top: 0; }
-      .plane { position: absolute; pointer-events: none; }
-      .plane > .cap {
-        position: relative;
-        top: auto; left: auto; right: auto; bottom: auto;
-      }
-      {{DNA_CSS}}
-      {{PLANES_CSS}}
-      /* Per-group typography (agent-authored). */
-      {{CUSTOM_CSS}}
-    </style>
-  </head>
-  <body>
-    <div
-      id="root"
-      data-composition-id="main"
-      data-start="0"
-      data-duration="{{DURATION}}"
-      data-width="{{WIDTH}}"
-      data-height="{{HEIGHT}}"
-    >
-      <video
-        id="a-roll"
-        src="source.mp4"
-        muted
-        playsinline
-        data-duration="{{DURATION}}"
-        data-track-index="0"
-        style="z-index: 1"
-      ></video>
-      <div id="stage">{{GROUPS_HTML}}</div>
-      <audio
-        id="a-roll-audio"
-        src="source.mp4"
-        data-start="0"
-        data-duration="{{DURATION}}"
-        data-track-index="3"
-        data-volume="1"
-      ></audio>
-    </div>
-    <script>
-      window.__timelines = window.__timelines || {};
-      const tl = gsap.timeline({ paused: true });
-      const DUR = {{DURATION}};
-      const GROUPS = {{GROUPS_JSON}};
-      const MOTION = {{MOTION_JSON}};
-      const HEROES = {{HEROES_JSON}};
-      const HERO_IDS = {};
-      HEROES.forEach(function (h) { HERO_IDS[h.id] = true; });
-      /* ── word entrance: the DNA's motion grammar ─────────────────────────
-         Each tone = {y, x, blur, scale, rot, dur, ease} or {reveal:"burn"}.
-         rot alternates sign by word index (deterministic percussion); blur is a
-         filter tween on the word span only (the container's depth-match filter
-         is a separate element — no conflict, no reflow). */
-      function wordReveal(wsel, m, at, idx) {
-        if (m.reveal === "burn") { tl.set(wsel, { opacity: 1 }, at); return; }
-        if (m.reveal === "flicker") {
-          /* neon tube igniting — deterministic on/off pattern, phase-shifted by word
-             index so a line of words doesn't strobe in unison */
-          var o = (idx % 3) * 0.018;
-          tl.set(wsel, { opacity: 1 }, at);
-          tl.set(wsel, { opacity: 0.25 }, at + 0.042 + o);
-          tl.set(wsel, { opacity: 1 }, at + 0.078 + o);
-          tl.set(wsel, { opacity: 0.5 }, at + 0.112 + o);
-          tl.set(wsel, { opacity: 1 }, at + 0.152 + o);
-          return;
-        }
-        var from = { opacity: 0 }, to = { opacity: 1, duration: m.dur || 0.4,
-          ease: m.ease || "power2.out", overwrite: "auto", transformOrigin: "50% 70%" };
-        if (m.y) { from.y = m.y; to.y = 0; }
-        if (m.x) { from.x = m.x; to.x = 0; }
-        if (m.scale && m.scale !== 1) { from.scale = m.scale; to.scale = 1; }
-        if (m.stretchX && m.stretchX !== 1) { from.scaleX = m.stretchX; to.scaleX = 1; }
-        if (m.skewX) { from.skewX = m.skewX; to.skewX = 0; }
-        if (m.rot) { from.rotation = ((idx % 2) ? 1 : -1) * m.rot; to.rotation = 0; }
-        if (m.blur) { from.filter = "blur(" + m.blur + "px)"; to.filter = "blur(0px)"; }
-        tl.fromTo(wsel, from, to, at);
-      }
-      var EXIT = MOTION.exit || { dur: 0.5, ease: "power2.in", stagger: 0 };
-      var LINE_REVEAL = MOTION.lineReveal || null;
-      /* exit cascade: lines of the same plane sharing one page-flip `out` can leave
-         top-to-bottom (editorial). Slot layout = absolute positions, so staggered
-         exits cause no reflow. Every exit still hard-kills at g.out. */
-      var pageMates = {};
-      GROUPS.forEach(function (g) {
-        if (HERO_IDS[g.id]) return;
-        var key = (g.plane || "free") + "@" + g.out;
-        (pageMates[key] = pageMates[key] || []).push(g.id);
-      });
-      GROUPS.forEach(function (g) {
-        if (HERO_IDS[g.id]) return; // heroes are orchestrated below
-        var sel = "#" + g.id;
-        var m = MOTION[g.tone] || MOTION.soft || {};
-        tl.set(sel, { opacity: 1 }, Math.max(0, g.in - 0.01));
-        /* line container reveal (keynote's surgical wipe) — clip-path, not transform.
-           PHRASE mode: the whole line is set visible up front and the WIPE is the
-           reveal (slide-title idiom) — wiping an empty container reads as nothing. */
-        if (LINE_REVEAL && LINE_REVEAL.type === "wipe-x") {
-          tl.set(sel + " .w", { opacity: 1 }, Math.max(0, g.in - 0.01));
-          tl.fromTo(sel, { clipPath: "inset(0% 100% 0% 0%)" },
-            { clipPath: "inset(0% 0% 0% 0%)", duration: LINE_REVEAL.dur || 0.4,
-              ease: LINE_REVEAL.ease || "expo.out", overwrite: "auto" },
-            Math.max(0, g.in - 0.01));
-        } else {
-          g.words.forEach(function (w, i) {
-            wordReveal(sel + " .w[data-i='" + i + "']", m, w.start, i);
-          });
-        }
-        /* exit: DNA grammar — direction + speed + optional per-line cascade */
-        var mates = pageMates[(g.plane || "free") + "@" + g.out];
-        var rank = mates.indexOf(g.id);
-        var lead = (EXIT.stagger || 0) * (mates.length - 1 - rank);
-        var exitAt = Math.max(g.in + 0.1, g.out - (EXIT.dur || 0.5) - lead);
-        var to = { opacity: 0, duration: EXIT.dur || 0.5, ease: EXIT.ease || "power2.in", overwrite: "auto" };
-        if (EXIT.y) to.y = EXIT.y;
-        if (EXIT.x) to.x = EXIT.x;
-        if (EXIT.scale && EXIT.scale !== 1) to.scale = EXIT.scale;
-        if (g.out < DUR) tl.to(sel, to, exitAt);
-        tl.set(sel, { opacity: 0, display: "none" }, g.out);
-      });
-      /* ── HEROES: three-act orchestration, one per promoted beat ──────────── */
-      HEROES.forEach(function (HERO) {
-        var hsel = "#" + HERO.id;
-        var gsel = "#" + HERO.id + "-glow";
-        var hg = GROUPS.filter(function (g) { return g.id === HERO.id; })[0];
-        var amp = HERO.amp || 1;
-        /* act 1 — SETUP: co-visible groups yield (dim) just before the hero lands.
-           Minor heroes are emphasis-plus: no dim, no ripple, no breathe — the apex
-           keeps those privileges (that's what makes it the apex). */
-        if (!HERO.minor && HERO.dimOthers < 1) {
-          GROUPS.forEach(function (g) {
-            if (g.id === HERO.id) return;
-            if (g.in < HERO.in && g.out > HERO.in) {
-              tl.to("#" + g.id, { opacity: HERO.dimOthers, duration: 0.3, ease: "power2.out", overwrite: "auto" },
-                    Math.max(0, HERO.in - 0.35));
-            }
-          });
-        }
-        tl.set(hsel, { opacity: 1 }, Math.max(0, HERO.in - 0.01));
-        /* act 2 — IMPACT: container entrance (amplitude ∝ spoken loudness) */
-        if (HERO.entrance === "settle") {
-          tl.fromTo(hsel, { scale: 1 + 0.10 * amp },
-            { scale: 1, duration: 0.50, ease: "expo.out", transformOrigin: "50% 60%", overwrite: "auto" }, HERO.in);
-        } else if (HERO.entrance === "slam") {
-          /* percussion: ONE unit, violent snap — geometry locks in 0.16s; heat comes after */
-          tl.fromTo(hsel, { scale: 1 + 0.22 * amp },
-            { scale: 1, duration: 0.16, ease: "back.out(2.2)", transformOrigin: "50% 55%", overwrite: "auto" }, HERO.in);
-        } else if (HERO.entrance === "rise") {
-          tl.fromTo(hsel, { y: 22 * amp },
-            { y: 0, duration: 0.60, ease: "power2.out", overwrite: "auto" }, HERO.in);
-        } else if (HERO.entrance === "wipe-up") {
-          /* surgical slide-title reveal — clip-path only (not a transform: can't
-             collide with the afterglow scale channel), bottom-up behind the subject */
-          tl.fromTo(hsel, { clipPath: "inset(100% 0% 0% 0%)" },
-            { clipPath: "inset(0% 0% 0% 0%)", duration: 0.45, ease: "expo.out", overwrite: "auto" }, HERO.in);
-        } else if (HERO.entrance === "flicker-on") {
-          /* neon sign powering up — deterministic strobe, then steady */
-          tl.set(hsel, { opacity: 1 }, HERO.in);
-          tl.set(hsel, { opacity: 0.15 }, HERO.in + 0.05);
-          tl.set(hsel, { opacity: 1 }, HERO.in + 0.095);
-          tl.set(hsel, { opacity: 0.4 }, HERO.in + 0.14);
-          tl.set(hsel, { opacity: 1 }, HERO.in + 0.19);
-          tl.fromTo(hsel, { scale: 1.03 }, { scale: 1, duration: 0.4, ease: "power2.out", overwrite: "auto", transformOrigin: "50% 55%" }, HERO.in + 0.19);
-        } else if (HERO.entrance === "streak") {
-          /* speed pass — slides in along its own motion blur (skew rides the velocity) */
-          tl.fromTo(hsel, { x: -90 * amp, skewX: -12, opacity: 0 },
-            { x: 0, skewX: 0, opacity: 1, duration: 0.28, ease: "expo.out", overwrite: "auto", transformOrigin: "50% 80%" }, HERO.in);
-        } else { /* emergence — grows out from behind the subject */
-          tl.fromTo(hsel, { scale: Math.max(0.74, 1 - 0.18 * amp) },
-            { scale: 1, duration: 0.55, ease: "expo.out", transformOrigin: "50% 62%", overwrite: "auto" }, HERO.in);
-        }
-        /* impact ripple (loud): the hero's landing bumps every co-visible caption —
-           captions only, the footage itself NEVER moves */
-        if (!HERO.minor && HERO.ripple > 0) {
-          GROUPS.forEach(function (g) {
-            if (g.id === HERO.id) return;
-            if (g.in < HERO.in && g.out > HERO.in + 0.3) {
-              tl.to("#" + g.id, { y: HERO.ripple, duration: 0.07, ease: "power2.out", overwrite: "auto" }, HERO.in + 0.04);
-              tl.to("#" + g.id, { y: 0, duration: 0.20, ease: "power2.out", overwrite: "auto" }, HERO.in + 0.11);
-            }
-          });
-        }
-        /* words / letters */
-        (hg ? hg.words : []).forEach(function (w, i) {
-          var wsel = hsel + " .w[data-i='" + i + "']";
-          if (HERO.perLetter) {
-            tl.set(wsel, { opacity: 1 }, w.start);
-            var letters = document.querySelectorAll(wsel + " .l");
-            for (var li = 0; li < letters.length; li++) {
-              var lf = { opacity: 0, y: "0.16em", scale: 1.05 };
-              var lt = { opacity: 1, y: 0, scale: 1, duration: 0.30, ease: "power4.out", overwrite: "auto" };
-              if (HERO.letterBlur) { lf.filter = "blur(" + HERO.letterBlur + "px)"; lt.filter = "blur(0px)"; }
-              tl.fromTo(letters[li], lf, lt, w.start + li * (HERO.letterStagger || 0.014));
-            }
-          } else {
-            var m = MOTION.impact || MOTION.present || {};
-            wordReveal(wsel, m, w.start, i);
-          }
-        });
-        /* glow layer (DNA-gated). Slam = impact THEN heat: glow waits for geometry lock. */
-        if (HERO.glow > 0) {
-          var glowAt = HERO.in + (HERO.entrance === "slam" ? 0.17 : 0.08);
-          var glowPeak = Math.min(0.5, HERO.glow * amp) * (HERO.minor ? 0.5 : 1);
-          tl.set(gsel + " .w", { opacity: 1 }, Math.max(0, HERO.in - 0.01));
-          tl.fromTo(gsel, { opacity: 0 },
-            { opacity: glowPeak, duration: HERO.entrance === "slam" ? 0.3 : 0.5, ease: "power2.out", overwrite: "auto" },
-            glowAt);
-          tl.to(gsel, { opacity: 0, duration: 0.5, ease: "power2.in", overwrite: "auto" }, HERO.out - 0.5);
-          tl.set(gsel, { opacity: 0, display: "none" }, HERO.out);
-        }
-        /* fx: ECHO layers (RGB-split fringe / speed trails) — colored duplicates that
-           CONVERGE as the word lands, then rest at a small offset until exit */
-        if (HERO.echoes && HERO.echoes.length) {
-          HERO.echoes.forEach(function (ec, k) {
-            var esel = "#" + HERO.id + "-echo-" + k;
-            tl.set(esel + " .w", { opacity: 1 }, Math.max(0, HERO.in - 0.01));
-            tl.fromTo(esel,
-              { x: (ec.dx || 0) * 4, y: (ec.dy || 0) * 4, opacity: 0 },
-              { x: ec.dx || 0, y: ec.dy || 0, opacity: ec.opacity != null ? ec.opacity : 0.5,
-                duration: 0.22, ease: "power4.out", overwrite: "auto" }, HERO.in);
-            tl.to(esel, { opacity: 0, duration: 0.4, ease: "power2.in", overwrite: "auto" }, HERO.out - 0.45);
-            tl.set(esel, { opacity: 0, display: "none" }, HERO.out);
-          });
-        }
-        /* fx: SHEEN — one gradient sweep across the hero during the hold (chrome).
-           Targets the .w spans (the gradient lives there — see wordCss). Starts as the
-           entrance settles so the specular hit is visible early in the hold. */
-        if (HERO.sheen && HERO.out - HERO.in > 0.9) {
-          tl.fromTo(hsel + " .w", { backgroundPosition: "0% 50%" },
-            { backgroundPosition: "200% 50%", duration: Math.min(1.2, HERO.out - HERO.in - 0.5),
-              ease: "power1.inOut", overwrite: "auto" }, HERO.in + 0.22);
-        }
-        /* act 3 — AFTERGLOW: ONE slow scale tween (no loops — deterministic).
-           loom (slow growth, loud) subsumes breathe — never two transform tweens
-           on the same element in the same window. wipe-up entrances are clip-path,
-           so the afterglow scale channel is always free by now. */
-        var after = HERO.loom > 0 ? HERO.loom : HERO.breathe;
-        if (!HERO.minor && after > 0 && HERO.out - HERO.in > 1.4) {
-          tl.fromTo(hsel, { scale: 1 },
-            { scale: 1 + after, duration: HERO.out - HERO.in - 1.2, ease: HERO.loom > 0 ? "power1.inOut" : "sine.inOut", overwrite: "auto" },
-            HERO.in + 0.7);
-        }
-        /* exit */
-        if (HERO.out < DUR) {
-          tl.to(hsel, { opacity: 0, duration: 0.5, ease: "power2.in", overwrite: "auto" }, HERO.out - 0.5);
-        }
-        tl.set(hsel, { opacity: 0, display: "none" }, HERO.out);
-      });
-      tl.seek(0);
-      window.__timelines["main"] = tl;
-    </script>
-  </body>
-</html>
+<!doctype html>
+<!--
+  ENGINE — the one Cinematic-mode shell, parameterized by a DNA (dna/<name>.json).
+  Replaces per-template HTML files: the DNA supplies type / palette / blend / motion
+  grammar / hero orchestration; safe-zones v2 supplies scene tokens (accent sampling,
+  contact-shadow direction, depth-match blur); the plan supplies layout + per-group
+  typography. Compiled by make-composition.cjs.
+  Contract (unchanged from cinematic-cream — gates depend on it):
+    #root[data-composition-id="main"] · #a-roll · #stage · #a-roll-audio
+    .plane > .cap > .w spans · paused seek-safe GSAP on window.__timelines["main"]
+    container fade via tl.set at g.in−0.01 · exit fade + display:none at g.out
+    no Math.random / Date.now / CSS keyframes / repeat:-1
+  New in the engine:
+    - MOTION grammar from the DNA: soft / present / impact tones (+ "burn" reveal)
+    - HERO three-act orchestration:
+        act 1 SETUP   — co-visible groups dim 0.35s before the hero lands
+        act 2 IMPACT  — entrance (emergence | settle | slam | rise) with per-letter
+                        stagger; amplitude coupled to the spoken word's RMS loudness
+        act 3 AFTERGLOW — slow breathe scale + glow layer (DNA-gated) until exit
+    - depth-match blur on embed (bg) captions only; fg stays sharp
+    - scene-sampled --accent custom property available to per-group CSS
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width={{WIDTH}}, height={{HEIGHT}}" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      :root {
+        --font-scale: {{FONT_SCALE}};
+        --h: {{HEIGHT}}px; --w: {{WIDTH}}px;
+        --accent: {{ACCENT}};
+      }
+      * { margin: 0; padding: 0; box-sizing: border-box; }
+      html, body {
+        margin: 0;
+        width: {{WIDTH}}px; height: {{HEIGHT}}px;
+        overflow: hidden;
+        background: #000;
+        font-family: '{{FONT_FAMILY}}', "Helvetica Neue", system-ui, sans-serif;
+      }
+      #a-roll { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+      #stage {
+        position: absolute;
+        top: 0; left: 0;
+        width: {{WIDTH}}px; height: {{HEIGHT}}px;
+        pointer-events: none;
+        z-index: 2;
+      }
+      /* BASE — DNA tokens. bg (embed) captions get the depth-match filter; fg stays sharp. */
+      .cap {
+        display: block;
+        position: absolute;
+        opacity: 0;
+        mix-blend-mode: {{BLEND_MODE}};
+        color: {{CAP_COLOR}};
+        text-shadow: {{TEXT_SHADOW}};
+        filter: {{TEXT_FILTER_BG}};
+        line-height: 1.12; /* contains ink + internal leading — wrapped rows breathe (was 1.0: rows touched) */
+        will-change: transform, opacity;
+        top: 50%; left: 0; right: 0; text-align: center;
+      }
+      .cap[data-layer="fg"] { filter: {{TEXT_FILTER_FG}}; }
+      .cap .w { display: inline-block; opacity: 0; will-change: opacity, transform; }
+      .cap .w .l { display: inline-block; will-change: opacity, transform; }
+      /* hero glow — same glyphs duplicated UNDER the hero, blurred; opacity driven by GSAP.
+         em-based blur scales with the hero's font size. Not part of plan.groups → gates skip it.
+         MUST be out of flow (absolute) — as a flow sibling inside a plane it displaces the hero. */
+      .hero-glow, .plane > .cap.hero-glow { position: absolute; left: 0; right: 0; top: 0; filter: blur(0.06em); }
+      /* hero echoes — colored duplicates (RGB fringe / speed trails); position mirrors the
+         hero via its #id rule, color comes from each echo's own rule */
+      .hero-echo, .plane > .cap.hero-echo { position: absolute; left: 0; right: 0; top: 0; }
+      .plane { position: absolute; pointer-events: none; }
+      .plane > .cap {
+        position: relative;
+        top: auto; left: auto; right: auto; bottom: auto;
+      }
+      {{DNA_CSS}}
+      {{PLANES_CSS}}
+      /* Per-group typography (agent-authored). */
+      {{CUSTOM_CSS}}
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="{{DURATION}}"
+      data-width="{{WIDTH}}"
+      data-height="{{HEIGHT}}"
+    >
+      <video
+        id="a-roll"
+        src="source.mp4"
+        muted
+        playsinline
+        data-duration="{{DURATION}}"
+        data-track-index="0"
+        style="z-index: 1"
+      ></video>
+      <div id="stage">{{GROUPS_HTML}}</div>
+      <audio
+        id="a-roll-audio"
+        src="source.mp4"
+        data-start="0"
+        data-duration="{{DURATION}}"
+        data-track-index="3"
+        data-volume="1"
+      ></audio>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      const DUR = {{DURATION}};
+      const GROUPS = {{GROUPS_JSON}};
+      const MOTION = {{MOTION_JSON}};
+      const HEROES = {{HEROES_JSON}};
+      const HERO_IDS = {};
+      HEROES.forEach(function (h) { HERO_IDS[h.id] = true; });
+      /* ── word entrance: the DNA's motion grammar ─────────────────────────
+         Each tone = {y, x, blur, scale, rot, dur, ease} or {reveal:"burn"}.
+         rot alternates sign by word index (deterministic percussion); blur is a
+         filter tween on the word span only (the container's depth-match filter
+         is a separate element — no conflict, no reflow). */
+      function wordReveal(wsel, m, at, idx) {
+        if (m.reveal === "burn") { tl.set(wsel, { opacity: 1 }, at); return; }
+        if (m.reveal === "flicker") {
+          /* neon tube igniting — deterministic on/off pattern, phase-shifted by word
+             index so a line of words doesn't strobe in unison */
+          var o = (idx % 3) * 0.018;
+          tl.set(wsel, { opacity: 1 }, at);
+          tl.set(wsel, { opacity: 0.25 }, at + 0.042 + o);
+          tl.set(wsel, { opacity: 1 }, at + 0.078 + o);
+          tl.set(wsel, { opacity: 0.5 }, at + 0.112 + o);
+          tl.set(wsel, { opacity: 1 }, at + 0.152 + o);
+          return;
+        }
+        var from = { opacity: 0 }, to = { opacity: 1, duration: m.dur || 0.4,
+          ease: m.ease || "power2.out", overwrite: "auto", transformOrigin: "50% 70%" };
+        if (m.y) { from.y = m.y; to.y = 0; }
+        if (m.x) { from.x = m.x; to.x = 0; }
+        if (m.scale && m.scale !== 1) { from.scale = m.scale; to.scale = 1; }
+        if (m.stretchX && m.stretchX !== 1) { from.scaleX = m.stretchX; to.scaleX = 1; }
+        if (m.skewX) { from.skewX = m.skewX; to.skewX = 0; }
+        if (m.rot) { from.rotation = ((idx % 2) ? 1 : -1) * m.rot; to.rotation = 0; }
+        if (m.blur) { from.filter = "blur(" + m.blur + "px)"; to.filter = "blur(0px)"; }
+        tl.fromTo(wsel, from, to, at);
+      }
+      var EXIT = MOTION.exit || { dur: 0.5, ease: "power2.in", stagger: 0 };
+      var LINE_REVEAL = MOTION.lineReveal || null;
+      /* exit cascade: lines of the same plane sharing one page-flip `out` can leave
+         top-to-bottom (editorial). Slot layout = absolute positions, so staggered
+         exits cause no reflow. Every exit still hard-kills at g.out. */
+      var pageMates = {};
+      GROUPS.forEach(function (g) {
+        if (HERO_IDS[g.id]) return;
+        var key = (g.plane || "free") + "@" + g.out;
+        (pageMates[key] = pageMates[key] || []).push(g.id);
+      });
+      GROUPS.forEach(function (g) {
+        if (HERO_IDS[g.id]) return; // heroes are orchestrated below
+        var sel = "#" + g.id;
+        var m = MOTION[g.tone] || MOTION.soft || {};
+        tl.set(sel, { opacity: 1 }, Math.max(0, g.in - 0.01));
+        /* line container reveal (keynote's surgical wipe) — clip-path, not transform.
+           PHRASE mode: the whole line is set visible up front and the WIPE is the
+           reveal (slide-title idiom) — wiping an empty container reads as nothing. */
+        if (LINE_REVEAL && LINE_REVEAL.type === "wipe-x") {
+          tl.set(sel + " .w", { opacity: 1 }, Math.max(0, g.in - 0.01));
+          tl.fromTo(sel, { clipPath: "inset(0% 100% 0% 0%)" },
+            { clipPath: "inset(0% 0% 0% 0%)", duration: LINE_REVEAL.dur || 0.4,
+              ease: LINE_REVEAL.ease || "expo.out", overwrite: "auto" },
+            Math.max(0, g.in - 0.01));
+        } else {
+          g.words.forEach(function (w, i) {
+            wordReveal(sel + " .w[data-i='" + i + "']", m, w.start, i);
+          });
+        }
+        /* exit: DNA grammar — direction + speed + optional per-line cascade */
+        var mates = pageMates[(g.plane || "free") + "@" + g.out];
+        var rank = mates.indexOf(g.id);
+        var lead = (EXIT.stagger || 0) * (mates.length - 1 - rank);
+        var exitAt = Math.max(g.in + 0.1, g.out - (EXIT.dur || 0.5) - lead);
+        var to = { opacity: 0, duration: EXIT.dur || 0.5, ease: EXIT.ease || "power2.in", overwrite: "auto" };
+        if (EXIT.y) to.y = EXIT.y;
+        if (EXIT.x) to.x = EXIT.x;
+        if (EXIT.scale && EXIT.scale !== 1) to.scale = EXIT.scale;
+        if (g.out < DUR) tl.to(sel, to, exitAt);
+        tl.set(sel, { opacity: 0, display: "none" }, g.out);
+      });
+      /* ── HEROES: three-act orchestration, one per promoted beat ──────────── */
+      HEROES.forEach(function (HERO) {
+        var hsel = "#" + HERO.id;
+        var gsel = "#" + HERO.id + "-glow";
+        var hg = GROUPS.filter(function (g) { return g.id === HERO.id; })[0];
+        var amp = HERO.amp || 1;
+        /* act 1 — SETUP: co-visible groups yield (dim) just before the hero lands.
+           Minor heroes are emphasis-plus: no dim, no ripple, no breathe — the apex
+           keeps those privileges (that's what makes it the apex). */
+        if (!HERO.minor && HERO.dimOthers < 1) {
+          GROUPS.forEach(function (g) {
+            if (g.id === HERO.id) return;
+            if (g.in < HERO.in && g.out > HERO.in) {
+              tl.to("#" + g.id, { opacity: HERO.dimOthers, duration: 0.3, ease: "power2.out", overwrite: "auto" },
+                    Math.max(0, HERO.in - 0.35));
+            }
+          });
+        }
+        tl.set(hsel, { opacity: 1 }, Math.max(0, HERO.in - 0.01));
+        /* act 2 — IMPACT: container entrance (amplitude ∝ spoken loudness) */
+        if (HERO.entrance === "settle") {
+          tl.fromTo(hsel, { scale: 1 + 0.10 * amp },
+            { scale: 1, duration: 0.50, ease: "expo.out", transformOrigin: "50% 60%", overwrite: "auto" }, HERO.in);
+        } else if (HERO.entrance === "slam") {
+          /* percussion: ONE unit, violent snap — geometry locks in 0.16s; heat comes after */
+          tl.fromTo(hsel, { scale: 1 + 0.22 * amp },
+            { scale: 1, duration: 0.16, ease: "back.out(2.2)", transformOrigin: "50% 55%", overwrite: "auto" }, HERO.in);
+        } else if (HERO.entrance === "rise") {
+          tl.fromTo(hsel, { y: 22 * amp },
+            { y: 0, duration: 0.60, ease: "power2.out", overwrite: "auto" }, HERO.in);
+        } else if (HERO.entrance === "wipe-up") {
+          /* surgical slide-title reveal — clip-path only (not a transform: can't
+             collide with the afterglow scale channel), bottom-up behind the subject */
+          tl.fromTo(hsel, { clipPath: "inset(100% 0% 0% 0%)" },
+            { clipPath: "inset(0% 0% 0% 0%)", duration: 0.45, ease: "expo.out", overwrite: "auto" }, HERO.in);
+        } else if (HERO.entrance === "flicker-on") {
+          /* neon sign powering up — deterministic strobe, then steady */
+          tl.set(hsel, { opacity: 1 }, HERO.in);
+          tl.set(hsel, { opacity: 0.15 }, HERO.in + 0.05);
+          tl.set(hsel, { opacity: 1 }, HERO.in + 0.095);
+          tl.set(hsel, { opacity: 0.4 }, HERO.in + 0.14);
+          tl.set(hsel, { opacity: 1 }, HERO.in + 0.19);
+          tl.fromTo(hsel, { scale: 1.03 }, { scale: 1, duration: 0.4, ease: "power2.out", overwrite: "auto", transformOrigin: "50% 55%" }, HERO.in + 0.19);
+        } else if (HERO.entrance === "streak") {
+          /* speed pass — slides in along its own motion blur (skew rides the velocity) */
+          tl.fromTo(hsel, { x: -90 * amp, skewX: -12, opacity: 0 },
+            { x: 0, skewX: 0, opacity: 1, duration: 0.28, ease: "expo.out", overwrite: "auto", transformOrigin: "50% 80%" }, HERO.in);
+        } else { /* emergence — grows out from behind the subject */
+          tl.fromTo(hsel, { scale: Math.max(0.74, 1 - 0.18 * amp) },
+            { scale: 1, duration: 0.55, ease: "expo.out", transformOrigin: "50% 62%", overwrite: "auto" }, HERO.in);
+        }
+        /* impact ripple (loud): the hero's landing bumps every co-visible caption —
+           captions only, the footage itself NEVER moves */
+        if (!HERO.minor && HERO.ripple > 0) {
+          GROUPS.forEach(function (g) {
+            if (g.id === HERO.id) return;
+            if (g.in < HERO.in && g.out > HERO.in + 0.3) {
+              tl.to("#" + g.id, { y: HERO.ripple, duration: 0.07, ease: "power2.out", overwrite: "auto" }, HERO.in + 0.04);
+              tl.to("#" + g.id, { y: 0, duration: 0.20, ease: "power2.out", overwrite: "auto" }, HERO.in + 0.11);
+            }
+          });
+        }
+        /* words / letters */
+        (hg ? hg.words : []).forEach(function (w, i) {
+          var wsel = hsel + " .w[data-i='" + i + "']";
+          if (HERO.perLetter) {
+            tl.set(wsel, { opacity: 1 }, w.start);
+            var letters = document.querySelectorAll(wsel + " .l");
+            for (var li = 0; li < letters.length; li++) {
+              var lf = { opacity: 0, y: "0.16em", scale: 1.05 };
+              var lt = { opacity: 1, y: 0, scale: 1, duration: 0.30, ease: "power4.out", overwrite: "auto" };
+              if (HERO.letterBlur) { lf.filter = "blur(" + HERO.letterBlur + "px)"; lt.filter = "blur(0px)"; }
+              tl.fromTo(letters[li], lf, lt, w.start + li * (HERO.letterStagger || 0.014));
+            }
+          } else {
+            var m = MOTION.impact || MOTION.present || {};
+            wordReveal(wsel, m, w.start, i);
+          }
+        });
+        /* glow layer (DNA-gated). Slam = impact THEN heat: glow waits for geometry lock. */
+        if (HERO.glow > 0) {
+          var glowAt = HERO.in + (HERO.entrance === "slam" ? 0.17 : 0.08);
+          var glowPeak = Math.min(0.5, HERO.glow * amp) * (HERO.minor ? 0.5 : 1);
+          tl.set(gsel + " .w", { opacity: 1 }, Math.max(0, HERO.in - 0.01));
+          tl.fromTo(gsel, { opacity: 0 },
+            { opacity: glowPeak, duration: HERO.entrance === "slam" ? 0.3 : 0.5, ease: "power2.out", overwrite: "auto" },
+            glowAt);
+          tl.to(gsel, { opacity: 0, duration: 0.5, ease: "power2.in", overwrite: "auto" }, HERO.out - 0.5);
+          tl.set(gsel, { opacity: 0, display: "none" }, HERO.out);
+        }
+        /* fx: ECHO layers (RGB-split fringe / speed trails) — colored duplicates that
+           CONVERGE as the word lands, then rest at a small offset until exit */
+        if (HERO.echoes && HERO.echoes.length) {
+          HERO.echoes.forEach(function (ec, k) {
+            var esel = "#" + HERO.id + "-echo-" + k;
+            tl.set(esel + " .w", { opacity: 1 }, Math.max(0, HERO.in - 0.01));
+            tl.fromTo(esel,
+              { x: (ec.dx || 0) * 4, y: (ec.dy || 0) * 4, opacity: 0 },
+              { x: ec.dx || 0, y: ec.dy || 0, opacity: ec.opacity != null ? ec.opacity : 0.5,
+                duration: 0.22, ease: "power4.out", overwrite: "auto" }, HERO.in);
+            tl.to(esel, { opacity: 0, duration: 0.4, ease: "power2.in", overwrite: "auto" }, HERO.out - 0.45);
+            tl.set(esel, { opacity: 0, display: "none" }, HERO.out);
+          });
+        }
+        /* fx: SHEEN — one gradient sweep across the hero during the hold (chrome).
+           Targets the .w spans (the gradient lives there — see wordCss). Starts as the
+           entrance settles so the specular hit is visible early in the hold. */
+        if (HERO.sheen && HERO.out - HERO.in > 0.9) {
+          tl.fromTo(hsel + " .w", { backgroundPosition: "0% 50%" },
+            { backgroundPosition: "200% 50%", duration: Math.min(1.2, HERO.out - HERO.in - 0.5),
+              ease: "power1.inOut", overwrite: "auto" }, HERO.in + 0.22);
+        }
+        /* act 3 — AFTERGLOW: ONE slow scale tween (no loops — deterministic).
+           loom (slow growth, loud) subsumes breathe — never two transform tweens
+           on the same element in the same window. wipe-up entrances are clip-path,
+           so the afterglow scale channel is always free by now. */
+        var after = HERO.loom > 0 ? HERO.loom : HERO.breathe;
+        if (!HERO.minor && after > 0 && HERO.out - HERO.in > 1.4) {
+          tl.fromTo(hsel, { scale: 1 },
+            { scale: 1 + after, duration: HERO.out - HERO.in - 1.2, ease: HERO.loom > 0 ? "power1.inOut" : "sine.inOut", overwrite: "auto" },
+            HERO.in + 0.7);
+        }
+        /* exit */
+        if (HERO.out < DUR) {
+          tl.to(hsel, { opacity: 0, duration: 0.5, ease: "power2.in", overwrite: "auto" }, HERO.out - 0.5);
+        }
+        tl.set(hsel, { opacity: 0, display: "none" }, HERO.out);
+      });
+      tl.seek(0);
+      window.__timelines["main"] = tl;
+    </script>
+  </body>
+</html>