dsh-hyperframes 0.3.2 → 0.4.0

package/skills/music-to-video/references/motion-primitives/tile-mosaic/scene.html

@@ -0,0 +1,109 @@
+<template id="tile-mosaic-template">
+  <div data-composition-id="tile-mosaic" data-width="1920" data-height="1080" data-duration="2.4">
+    <style>
+      :root {
+        --hg-violet: #7c3aed;
+        --hg-violet-2: #a855f7;
+        --hg-bg: #0a0a0f;
+        --hg-fg: #f5f5fa;
+        --hg-dim: #6b6b78;
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      .stage {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .mosaic {
+        position: relative;
+        display: grid;
+        grid-template-columns: repeat(6, 1fr);
+        grid-template-rows: repeat(4, 1fr);
+        gap: 6px;
+        width: 1440px;
+        height: 960px;
+      }
+      .tile {
+        border-radius: 4px;
+        will-change: transform, opacity;
+      }
+      .title {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 900;
+        font-size: 220px;
+        letter-spacing: -0.03em;
+        color: var(--hg-fg);
+        text-shadow: 0 8px 40px rgba(0, 0, 0, 0.55);
+        will-change: transform, opacity;
+        pointer-events: none;
+      }
+    </style>
+    <div class="stage">
+      <div class="mosaic" id="mosaic"></div>
+      <div class="title" id="title">MOSAIC</div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      const COLS = 6;
+      const ROWS = 4;
+      const STEP = 0.06;
+      // Deterministic palette; tile colour chosen by index, no randomness.
+      const PALETTE = [
+        "#7c3aed",
+        "#a855f7",
+        "#6d28d9",
+        "#c084fc",
+        "#5b21b6",
+        "#8b5cf6",
+        "#9333ea",
+        "#4c1d95",
+      ];
+
+      const mosaic = document.getElementById("mosaic");
+      const tiles = [];
+      for (let i = 0; i < COLS * ROWS; i++) {
+        const row = Math.floor(i / COLS);
+        const col = i % COLS;
+        const cell = document.createElement("div");
+        cell.className = "tile";
+        const a = PALETTE[(row + col) % PALETTE.length];
+        const b = PALETTE[(row + col + 3) % PALETTE.length];
+        cell.style.background = "linear-gradient(135deg, " + a + " 0%, " + b + " 100%)";
+        mosaic.appendChild(cell);
+        tiles.push({ el: cell, diag: row + col });
+      }
+
+      // Diagonal sweep: reveal order governed by (row + col), explicit per-tile timing.
+      for (const t of tiles) {
+        tl.fromTo(
+          t.el,
+          { autoAlpha: 0, scale: 0.6 },
+          { autoAlpha: 1, scale: 1, duration: 0.4, ease: "back.out(1.7)" },
+          t.diag * STEP,
+        );
+      }
+
+      // Title settles over the finished, dense mosaic.
+      tl.fromTo(
+        "#title",
+        { autoAlpha: 0, scale: 1.12 },
+        { autoAlpha: 1, scale: 1, duration: 0.45, ease: "power2.out" },
+        1.7,
+      );
+
+      window.__timelines["tile-mosaic"] = tl;
+    </script>
+  </div>
+</template>

package/skills/music-to-video/references/motion-primitives/typewriter-reveal/index.html

@@ -13,11 +13,6 @@
         --hg-fg: #f5f5fa;
         --hg-dim: #6b6b78;
       }
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
       html,
       body {
         margin: 0;
@@ -29,45 +24,6 @@
         color: var(--hg-fg);
         -webkit-font-smoothing: antialiased;
       }
-      #scene {
-        position: absolute;
-        inset: 0;
-        width: 1920px;
-        height: 1080px;
-      }
-      .stage {
-        position: absolute;
-        inset: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-      .line {
-        display: flex;
-        align-items: baseline;
-        font-family: "JetBrains Mono", ui-monospace, monospace;
-        font-weight: 800;
-        font-size: 200px;
-        letter-spacing: 0.02em;
-        line-height: 0.95;
-        white-space: nowrap;
-      }
-      .char {
-        display: inline-block;
-        opacity: 0;
-        will-change: opacity;
-      }
-      .char.space {
-        width: 0.4em;
-      }
-      .caret {
-        display: inline-block;
-        width: 0.09em;
-        height: 0.86em;
-        margin-left: 0.06em;
-        background: var(--hg-violet-2);
-        will-change: opacity;
-      }
     </style>
   </head>
   <body>
@@ -79,44 +35,19 @@
       data-width="1920"
       data-height="1080"
     >
-      <div id="scene" class="clip" data-start="0" data-duration="2.4" data-track-index="1">
-        <div class="stage">
-          <div class="line" id="line">
-            <span class="char">S</span><span class="char">Y</span><span class="char">S</span
-            ><span class="char">T</span><span class="char">E</span><span class="char">M</span
-            ><span class="char space">&nbsp;</span><span class="char">O</span
-            ><span class="char">N</span><span class="char">L</span><span class="char">I</span
-            ><span class="char">N</span><span class="char">E</span
-            ><span class="caret" id="caret"></span>
-          </div>
-        </div>
-      </div>
+      <div
+        id="scene"
+        class="clip"
+        data-composition-id="typewriter-reveal"
+        data-composition-src="scene.html"
+        data-start="0"
+        data-duration="2.4"
+        data-track-index="1"
+      ></div>
     </div>
     <script>
       window.__timelines = window.__timelines || {};
-      const tl = gsap.timeline({ paused: true });
-
-      const chars = gsap.utils.toArray(".char");
-      const step = 0.07;
-
-      // Explicit per-character reveal: one set() per char at time i * step.
-      chars.forEach((char, i) => {
-        tl.set(char, { opacity: 1 }, i * step);
-      });
-
-      const lastT = (chars.length - 1) * step;
-
-      // Caret rides just past the last revealed char and blinks a finite number
-      // of times (no repeat:-1), then the phrase locks crisp.
-      tl.set("#caret", { opacity: 1 }, 0);
-      tl.to(
-        "#caret",
-        { opacity: 0, duration: 0.09, ease: "steps(1)", repeat: 8, yoyo: true },
-        lastT + step,
-      );
-      tl.set("#caret", { opacity: 0 }, 2.32);
-
-      window.__timelines["main"] = tl;
+      window.__timelines["main"] = gsap.timeline({ paused: true });
     </script>
   </body>
 </html>

package/skills/music-to-video/references/motion-primitives/typewriter-reveal/scene.html

@@ -0,0 +1,91 @@
+<template id="typewriter-reveal-template">
+  <div
+    data-composition-id="typewriter-reveal"
+    data-width="1920"
+    data-height="1080"
+    data-duration="2.4"
+  >
+    <style>
+      :root {
+        --hg-violet: #7c3aed;
+        --hg-violet-2: #a855f7;
+        --hg-bg: #0a0a0f;
+        --hg-fg: #f5f5fa;
+        --hg-dim: #6b6b78;
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      .stage {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .line {
+        display: flex;
+        align-items: baseline;
+        font-family: "JetBrains Mono", ui-monospace, monospace;
+        font-weight: 800;
+        font-size: 200px;
+        letter-spacing: 0.02em;
+        line-height: 0.95;
+        white-space: nowrap;
+      }
+      .char {
+        display: inline-block;
+        opacity: 0;
+        will-change: opacity;
+      }
+      .char.space {
+        width: 0.4em;
+      }
+      .caret {
+        display: inline-block;
+        width: 0.09em;
+        height: 0.86em;
+        margin-left: 0.06em;
+        background: var(--hg-violet-2);
+        will-change: opacity;
+      }
+    </style>
+    <div class="stage">
+      <div class="line" id="line">
+        <span class="char">S</span><span class="char">Y</span><span class="char">S</span
+        ><span class="char">T</span><span class="char">E</span><span class="char">M</span
+        ><span class="char space">&nbsp;</span><span class="char">O</span><span class="char">N</span
+        ><span class="char">L</span><span class="char">I</span><span class="char">N</span
+        ><span class="char">E</span><span class="caret" id="caret"></span>
+      </div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      const chars = gsap.utils.toArray(".char");
+      const step = 0.07;
+
+      // Explicit per-character reveal: one set() per char at time i * step.
+      chars.forEach((char, i) => {
+        tl.set(char, { opacity: 1 }, i * step);
+      });
+
+      const lastT = (chars.length - 1) * step;
+
+      // Caret rides just past the last revealed char and blinks a finite number
+      // of times (no repeat:-1), then the phrase locks crisp.
+      tl.set("#caret", { opacity: 1 }, 0);
+      tl.to(
+        "#caret",
+        { opacity: 0, duration: 0.09, ease: "steps(1)", repeat: 8, yoyo: true },
+        lastT + step,
+      );
+      tl.set("#caret", { opacity: 0 }, 2.32);
+
+      window.__timelines["typewriter-reveal"] = tl;
+    </script>
+  </div>
+</template>

package/skills/music-to-video/references/motion-primitives/word-grid-burst/index.html

@@ -13,11 +13,6 @@
         --hg-fg: #f5f5fa;
         --hg-dim: #6b6b78;
       }
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
       html,
       body {
         margin: 0;
@@ -29,32 +24,6 @@
         color: var(--hg-fg);
         -webkit-font-smoothing: antialiased;
       }
-      #scene {
-        position: absolute;
-        inset: 0;
-        width: 1920px;
-        height: 1080px;
-      }
-      .stage {
-        position: absolute;
-        inset: 0;
-        display: grid;
-        grid-template-columns: repeat(5, 1fr);
-        grid-template-rows: repeat(3, 1fr);
-        align-items: center;
-        justify-items: center;
-        padding: 140px 120px;
-        gap: 24px;
-      }
-      .cell {
-        font-weight: 900;
-        font-size: 92px;
-        letter-spacing: -0.03em;
-        line-height: 0.95;
-        color: var(--hg-fg);
-        white-space: nowrap;
-        will-change: transform, opacity;
-      }
     </style>
   </head>
   <body>
@@ -66,61 +35,19 @@
       data-width="1920"
       data-height="1080"
     >
-      <div id="scene" class="clip" data-start="0" data-duration="2.8" data-track-index="1">
-        <div class="stage">
-          <div class="cell">PULSE</div>
-          <div class="cell">FORGE</div>
-          <div class="cell">SURGE</div>
-          <div class="cell">VOLT</div>
-          <div class="cell">CORE</div>
-          <div class="cell">FLUX</div>
-          <div class="cell">SPARK</div>
-          <div class="cell">DRIVE</div>
-          <div class="cell">BLAZE</div>
-          <div class="cell">WAVE</div>
-          <div class="cell">SHIFT</div>
-          <div class="cell">BOLT</div>
-          <div class="cell">RUSH</div>
-          <div class="cell">PEAK</div>
-          <div class="cell">IGNITE</div>
-        </div>
-      </div>
+      <div
+        id="scene"
+        class="clip"
+        data-composition-id="word-grid-burst"
+        data-composition-src="scene.html"
+        data-start="0"
+        data-duration="2.8"
+        data-track-index="1"
+      ></div>
     </div>
     <script>
       window.__timelines = window.__timelines || {};
-      const tl = gsap.timeline({ paused: true });
-
-      // Deterministic reveal order: scatter sequence across the 15-cell grid.
-      const order = [7, 0, 12, 4, 9, 2, 14, 6, 11, 1, 8, 3, 13, 5, 10];
-      const cells = gsap.utils.toArray(".cell");
-      const step = 0.13;
-      const FOCUS = 7; // chosen focal cell ("DRIVE")
-
-      // Each cell pops in on its own "onset" — explicit per-cell timing.
-      order.forEach((idx, i) => {
-        tl.fromTo(
-          cells[idx],
-          { autoAlpha: 0, scale: 0.8 },
-          { autoAlpha: 1, scale: 1, duration: 0.22, ease: "back.out(1.8)" },
-          i * step,
-        );
-      });
-
-      // Downbeat refocus (~2.3s): dim the whole grid, pop the focal word.
-      tl.to(".cell", { autoAlpha: 0.25, duration: 0.18, ease: "power2.out" }, 2.3);
-      tl.to(
-        cells[FOCUS],
-        {
-          autoAlpha: 1,
-          scale: 1.25,
-          color: "var(--hg-violet-2)",
-          duration: 0.22,
-          ease: "back.out(2)",
-        },
-        2.32,
-      );
-
-      window.__timelines["main"] = tl;
+      window.__timelines["main"] = gsap.timeline({ paused: true });
     </script>
   </body>
 </html>

package/skills/music-to-video/references/motion-primitives/word-grid-burst/scene.html

@@ -0,0 +1,96 @@
+<template id="word-grid-burst-template">
+  <div
+    data-composition-id="word-grid-burst"
+    data-width="1920"
+    data-height="1080"
+    data-duration="2.8"
+  >
+    <style>
+      :root {
+        --hg-violet: #7c3aed;
+        --hg-violet-2: #a855f7;
+        --hg-bg: #0a0a0f;
+        --hg-fg: #f5f5fa;
+        --hg-dim: #6b6b78;
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      .stage {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        grid-template-columns: repeat(5, 1fr);
+        grid-template-rows: repeat(3, 1fr);
+        align-items: center;
+        justify-items: center;
+        padding: 140px 120px;
+        gap: 24px;
+      }
+      .cell {
+        font-weight: 900;
+        font-size: 92px;
+        letter-spacing: -0.03em;
+        line-height: 0.95;
+        color: var(--hg-fg);
+        white-space: nowrap;
+        will-change: transform, opacity;
+      }
+    </style>
+    <div class="stage">
+      <div class="cell">PULSE</div>
+      <div class="cell">FORGE</div>
+      <div class="cell">SURGE</div>
+      <div class="cell">VOLT</div>
+      <div class="cell">CORE</div>
+      <div class="cell">FLUX</div>
+      <div class="cell">SPARK</div>
+      <div class="cell">DRIVE</div>
+      <div class="cell">BLAZE</div>
+      <div class="cell">WAVE</div>
+      <div class="cell">SHIFT</div>
+      <div class="cell">BOLT</div>
+      <div class="cell">RUSH</div>
+      <div class="cell">PEAK</div>
+      <div class="cell">IGNITE</div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      // Deterministic reveal order: scatter sequence across the 15-cell grid.
+      const order = [7, 0, 12, 4, 9, 2, 14, 6, 11, 1, 8, 3, 13, 5, 10];
+      const cells = gsap.utils.toArray(".cell");
+      const step = 0.13;
+      const FOCUS = 7; // chosen focal cell ("DRIVE")
+
+      // Each cell pops in on its own "onset" — explicit per-cell timing.
+      order.forEach((idx, i) => {
+        tl.fromTo(
+          cells[idx],
+          { autoAlpha: 0, scale: 0.8 },
+          { autoAlpha: 1, scale: 1, duration: 0.22, ease: "back.out(1.8)" },
+          i * step,
+        );
+      });
+
+      // Downbeat refocus (~2.3s): dim the whole grid, pop the focal word.
+      tl.to(".cell", { autoAlpha: 0.25, duration: 0.18, ease: "power2.out" }, 2.3);
+      tl.to(
+        cells[FOCUS],
+        {
+          autoAlpha: 1,
+          scale: 1.25,
+          color: "var(--hg-violet-2)",
+          duration: 0.22,
+          ease: "back.out(2)",
+        },
+        2.32,
+      );
+
+      window.__timelines["word-grid-burst"] = tl;
+    </script>
+  </div>
+</template>

package/skills/music-to-video/references/planning.md

@@ -90,8 +90,8 @@ frame** is owned by the worker on its frame timeline; you only set each group's
 ## Write + validate
 
 Complete `STORYBOARD.md` ([`storyboard-format.md`](storyboard-format.md)), then run
-`node scripts/validate-plan.mjs` and fix every `✗`. Show the user a frame-by-frame summary and
-iterate until approved.
+`node scripts/validate-plan.mjs` and fix every `✗`. Present the frame-by-frame summary in chat
+and iterate until approved (Step 3 in `SKILL.md` says how).
 
 ## Self-check
 

package/skills/music-to-video/scripts/lib/storyboard.mjs

@@ -5,7 +5,7 @@
 // ship standalone: installed via `npx skills add`, a skill's scripts can't reach
 // the monorepo's core package, and the core export points at .ts source that
 // `node` (which runs these scripts) can't load. CANONICAL contract = the core
-// parser + skills/hyperframes-core/references/storyboard-format.md; keep this in
+// parser + skills/hyperframes/references/storyboard-format.md; keep this in
 // lockstep. Behavior: never throws, accepts freeform narrative, recognizes
 // Frame/Beat/Scene headings at H2/H3, preserves unknown keys verbatim under
 // `extra` (keys lowercased). Pure node — no deps.

package/skills/music-to-video/sub-agents/frame-worker.md

@@ -16,7 +16,7 @@ Your job: **follow the manual, fetch the materials, assemble.** The storyboard t
   - **asset** — `asset:{treatment, clips, anchors?, overlay_copy?}` (see `montage.md`).
 - `audiomap.json` — timing truth; use the seconds you're given.
 - `frame.md` — the brand (palette + type). Pull every visual token from here.
-- **Materials** — `references/templates/<id>/index.html` (its `data-composition-variables` give the param semantics) for template groups; `references/motion-primitives/<id>/index.html` for free groups; staged `assets/…` for asset groups.
+- **Materials** — `references/templates/<id>/index.html` (its `data-composition-variables` give the param semantics) for template groups; `references/motion-primitives/<id>/scene.html` (the sub-composition; `index.html` only mounts it and holds the page background and font) for free groups; staged `assets/…` for asset groups.
 - Canvas `<width>×<height>` and the frame's `pacing`.
 
 If your dispatch carries `lint` / `check` feedback from a prior pass, address each finding.
@@ -45,5 +45,5 @@ If your dispatch carries `lint` / `check` feedback from a prior pass, address ea
 - Each group's text / palette match its block's `params` / `copy`, drawn from `frame.md`.
 - `phrase_flow` frames pace by phrase / energy.
 - Seek-safe per `hyperframes-core/determinism-rules.md` (derive variation from indices; swap text / numbers with `tl.set`).
-- Asset clips: muted `<video>`, direct children of `#stage`, with `data-start` / `data-duration` / `data-track-index` and the crossfade hard-kill `tl.set`.
+- Asset clips: muted `<video>`, direct children of `#stage`, with `data-start` / `data-duration` / `data-track-index`. Crossfade outgoing clips to `opacity:0` ending at the next anchor.
 - Final frame is intentional; hero text is readable and clear of the edges.