npm - takomi - Versions diffs - 2.1.41 → 2.1.43 - Mend

takomi 2.1.41 → 2.1.43

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 (601) hide show

package/assets/.agent/skills/music-to-video/references/templates/roll-flipbook-word-cycle/index.html ADDED Viewed

@@ -0,0 +1,267 @@
+<!doctype html>
+<html
+  lang="en"
+  data-composition-variables='[
+    {"id":"bgColor",    "type":"color",  "label":"Background",      "default":"#000000"},
+    {"id":"textColor",  "type":"color",  "label":"Text color",      "default":"#ffffff"},
+    {"id":"accentColor","type":"color",  "label":"Period accent",   "default":"#ff6a32"},
+    {"id":"flipWords",  "type":"string", "label":"Flipbook words (comma-separated)", "default":"Design,Strategy,Branding,Marketing,Production,Campaigns,Experiential,Communication,Event Management"},
+    {"id":"resolveText","type":"string", "label":"Lock phrase (empty = pure flicker, no lock)", "default":"everything you need"},
+    {"id":"periodChar", "type":"string", "label":"Trailing accent (empty = none)", "default":"."}
+  ]'
+>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Roll-Driven Flipbook (Word Cycle → Optional Lock) — gruop_3 reference impl</title>
+    <script src="../../motion-primitives/assets/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        background: var(--bg, #000000);
+        overflow: hidden;
+        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+      }
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--bg, #000000);
+      }
+      .g3-overlay {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        pointer-events: none;
+      }
+      /* grid stack — every layer occupies the same centred cell, so scaling a
+         layer transforms around its own centre (no translate(-50%) to clobber). */
+      .g3-stack {
+        display: grid;
+        place-items: center;
+      }
+      .g3-stack > * {
+        grid-area: 1 / 1;
+      }
+      .g3-layer {
+        white-space: nowrap;
+        color: var(--text, #ffffff);
+        text-shadow:
+          0 0 18px rgba(255, 255, 255, 0.45),
+          0 0 46px rgba(255, 255, 255, 0.22);
+      }
+      .g3-flip {
+        font-size: 120px;
+        font-weight: 800;
+        letter-spacing: -0.01em;
+      }
+      .g3-resolve {
+        font-size: 116px;
+        font-weight: 800;
+        font-style: italic;
+        letter-spacing: -0.01em;
+      }
+      .g3-period {
+        color: var(--accent, #ff6a32);
+        font-weight: 800;
+        font-style: italic;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- data-duration = the scene span. Set this to YOUR scene length; the script
+         reads it back so duration is single-sourced (no hard-coded value in JS).
+         Rebased to scene-relative time — content starts at ~0, no dead pre-roll. -->
+    <div
+      data-hf-id="hf-g3rt"
+      id="root"
+      data-composition-id="group-three-recreate"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="3.8"
+      data-root="true"
+    >
+      <div data-hf-id="hf-g3ov" class="g3-overlay">
+        <div data-hf-id="hf-g3sk" class="g3-stack" id="stack"></div>
+      </div>
+    </div>
+    <script>
+      (function () {
+        // ════════════════════════════════════════════════════════════════
+        //  ROLL-DRIVEN FLIPBOOK (Word Cycle → Optional Lock) · dense_multiply
+        //  A hi-hat ROLL drives a centred word that flips every 16th-note (flipbook),
+        //  cycling a word list to FILL the roll. Optionally, when a SURGE/phrase
+        //  follows, the flicker resolves (scramble-decode) into a locked phrase.
+        //  Background is pure black. Every move is a 0ms autoAlpha set on a pre-built
+        //  node (no GSAP textContent-sets, no onUpdate — both fail under seek render).
+        // ════════════════════════════════════════════════════════════════
+        var root = document.getElementById("root");
+        // ── 1. BEAT MAP — the ONLY block you edit per track ─────────────────
+        // SCENE-RELATIVE time (starts at ~0 — no dead pre-roll). When reusing, map
+        // your audiomap roll [rollStart,rollEnd] onto [flipStart, flipStart+rollLen],
+        // i.e. subtract the roll's start offset. bpm stays your track's tempo.
+        var BEAT = {
+          bpm: 129.2, // tempo.bpm  →  16th-note flip step = 60/bpm/4
+          flipStart: 0.1, // tiny entrance lead-in — NO dead air before the flicker
+          flipEnd: 2.19, // flicker length ≈ the source roll (~2.1s); auto-fills with words
+          resolveStart: 2.33, // lock phrase enters after a short clear (only if a phrase is set)
+          resolveLock: 3.33, // locks ~1s later (place just before a downbeat in your track)
+        };
+        // Scene length is single-sourced from data-duration (edit it in the HTML above).
+        var DUR = parseFloat(root.getAttribute("data-duration")) || 7.34;
+        // ── 2. Content variables ────────────────────────────────────────────
+        var defaults = {
+          bgColor: "#000000",
+          textColor: "#ffffff",
+          accentColor: "#ff6a32",
+          flipWords:
+            "Design,Strategy,Branding,Marketing,Production,Campaigns,Experiential,Communication,Event Management",
+          resolveText: "everything you need",
+          periodChar: ".",
+        };
+        var vars = Object.assign(
+          {},
+          defaults,
+          window.__hyperframes && window.__hyperframes.getVariables
+            ? window.__hyperframes.getVariables()
+            : {},
+        );
+        document.documentElement.style.setProperty("--bg", vars.bgColor);
+        document.documentElement.style.setProperty("--text", vars.textColor);
+        document.documentElement.style.setProperty("--accent", vars.accentColor);
+        var stack = root.querySelector("#stack");
+        var WORDS = String(vars.flipWords)
+          .split(",")
+          .map(function (w) {
+            return w.trim();
+          })
+          .filter(function (w) {
+            return w !== "";
+          });
+        var RESOLVE = String(vars.resolveText || "").trim(); // empty → pure flicker, no lock
+        var HAS_RESOLVE = RESOLVE !== "";
+        var PERIOD =
+          vars.periodChar && String(vars.periodChar).trim() !== "" ? vars.periodChar : "";
+        // ── 3. Derived timing (auto-fills the roll — adapts to any length / bpm) ─
+        var FLIP_STEP = 60 / BEAT.bpm / 4; // one word per 16th-note
+        var N_SWAPS = Math.max(1, Math.round((BEAT.flipEnd - BEAT.flipStart) / FLIP_STEP));
+        // ── 4. Build nodes ──────────────────────────────────────────────────
+        var flipNodes = {};
+        WORDS.forEach(function (w) {
+          if (!flipNodes[w]) {
+            var s = document.createElement("span");
+            s.className = "g3-layer g3-flip";
+            s.textContent = w;
+            stack.appendChild(s);
+            flipNodes[w] = s;
+            gsap.set(s, { autoAlpha: 0 });
+          }
+        });
+        var resolveNodes = [];
+        if (HAS_RESOLVE) {
+          var GLYPHS = "!<>-_/[]{}=+*^?#$%&01ABXYZ";
+          var decodeAt = function (str, p) {
+            var n = str.length,
+              out = "",
+              step = Math.floor(p * 48);
+            for (var k = 0; k < n; k++) {
+              var c = str.charAt(k);
+              if (c === " ") {
+                out += " ";
+                continue;
+              }
+              var lock = 0.4 + 0.6 * ((k + 1) / n); // lock left→right, in the back 60%
+              out += p >= lock ? c : GLYPHS.charAt((k * 7 + step * 3) % GLYPHS.length);
+            }
+            return out;
+          };
+          var DECODE_STEP = FLIP_STEP / 2; // scramble twice as fast as the flip
+          var N_STEPS = Math.max(
+            1,
+            Math.round((BEAT.resolveLock - BEAT.resolveStart) / DECODE_STEP),
+          );
+          for (var s2 = 0; s2 <= N_STEPS; s2++) {
+            var node = document.createElement("span");
+            node.className = "g3-layer g3-resolve";
+            if (s2 === N_STEPS) {
+              node.appendChild(document.createTextNode(RESOLVE));
+              if (PERIOD) {
+                var pd = document.createElement("span");
+                pd.className = "g3-period";
+                pd.textContent = PERIOD;
+                node.appendChild(pd);
+              }
+            } else {
+              node.textContent = decodeAt(RESOLVE, s2 / N_STEPS);
+            }
+            stack.appendChild(node);
+            gsap.set(node, { autoAlpha: 0 });
+            resolveNodes.push({ node: node, t: BEAT.resolveStart + s2 * DECODE_STEP });
+          }
+        }
+        // ── 5. Timeline — one paused GSAP timeline, absolute audio seconds ──
+        window.__timelines = window.__timelines || {};
+        var tl = gsap.timeline({ paused: true });
+        // PHASE A — flipbook word-cycle on the 16th grid, FILLING the roll window
+        var prev = null;
+        for (var i = 0; i < N_SWAPS; i++) {
+          var t = BEAT.flipStart + i * FLIP_STEP;
+          var node = flipNodes[WORDS[i % WORDS.length]];
+          if (prev && prev !== node) tl.set(prev, { autoAlpha: 0 }, t);
+          tl.set(node, { autoAlpha: 1 }, t);
+          prev = node;
+        }
+        // glitchy reveal of the first word as the roll kicks in (scale is safe here)
+        tl.fromTo(
+          flipNodes[WORDS[0]],
+          { scale: 0.8, filter: "blur(10px)" },
+          { scale: 1, filter: "blur(0px)", duration: 0.12, ease: "power2.out" },
+          BEAT.flipStart,
+        );
+        // PHASE B — resolve (OPTIONAL). With a lock phrase: clear, then scramble-decode
+        // and lock, holding to the end. Without one: the last word just holds (locks).
+        if (HAS_RESOLVE) {
+          if (prev) tl.set(prev, { autoAlpha: 0 }, BEAT.flipEnd); // clear the flicker
+          var prevR = null;
+          for (var r = 0; r < resolveNodes.length; r++) {
+            if (prevR) tl.set(prevR, { autoAlpha: 0 }, resolveNodes[r].t);
+            tl.set(resolveNodes[r].node, { autoAlpha: 1 }, resolveNodes[r].t);
+            prevR = resolveNodes[r].node;
+          }
+        }
+        // (if no resolve, `prev` — the last flip word — stays visible to the end)
+        // Extend the timeline to the full duration with a no-op so the held final
+        // state renders on every frame to DUR (a set AT the timeline's last instant
+        // gets dropped by the seek renderer).
+        tl.set(stack, { opacity: 1 }, DUR);
+        tl.seek(0);
+        window.__timelines["group-three-recreate"] = tl;
+      })();
+    </script>
+  </body>
+</html>