dsh-hyperframes 0.9.1 → 0.9.3

package/skills/music-to-video/references/templates/held-text-strobe-burst/index.html

@@ -1,302 +0,0 @@
-<!doctype html>
-<html
-  lang="en"
-  data-composition-variables='[
-    {"id":"markText",   "type":"string", "label":"Held word",                       "default":"NAMSHI"},
-    {"id":"fontStyle",  "type":"select", "label":"Font style", "options":["display","serif"], "default":"display"},
-    {"id":"markScale",  "type":"number", "label":"Word size scale", "default":1, "min":0.3, "max":2, "step":0.05},
-    {"id":"idleColor",  "type":"color",  "label":"Idle background (between bursts)", "default":"#000000"},
-    {"id":"idleInk",    "type":"color",  "label":"Idle word color",                 "default":"#ffffff"},
-    {"id":"frames",     "type":"string", "label":"Texture frames JSON (empty=built-in)", "default":""},
-    {"id":"strobePlan", "type":"string", "label":"Strobe plan JSON bursts (empty=built-in)", "default":""},
-    {"id":"decor",      "type":"select", "label":"Blueprint grid + crop border", "options":["no","yes"], "default":"no"}
-  ]'
->
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=1920, height=1080" />
-    <title>Held Text / Strobe Burst (Texture Flip) — Template</title>
-    <script src="../../motion-primitives/assets/gsap.min.js"></script>
-    <style>
-      *,
-      *::before,
-      *::after {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-      html,
-      body {
-        width: 100%;
-        height: 100%;
-        background: #000;
-        overflow: hidden;
-      }
-
-      #root {
-        position: relative;
-        width: 1920px;
-        height: 1080px;
-        overflow: hidden;
-        background: #000;
-        font-family: Arial, sans-serif;
-      }
-
-      /* Persistent base: the held word on the idle plate. Always visible; the
-         texture looks flip ON TOP of it during bursts, so the word reads as
-         continuously held (anchor) and falls back to a solid color on black
-         between bursts. */
-      .base {
-        position: absolute;
-        inset: 0;
-        background: var(--idle-bg, #000);
-      }
-
-      /* One full-frame layer per texture frame. Only opacity is toggled — a
-         seek-safe flip-book (deterministic under frame-by-frame render). */
-      .look {
-        position: absolute;
-        inset: 0;
-        overflow: hidden;
-        opacity: 0;
-        background: var(--bg);
-      }
-      /* optional blueprint grid */
-      .look.decor::before,
-      .base.decor::before {
-        content: "";
-        position: absolute;
-        inset: 0;
-        background-image:
-          linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
-          linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
-        background-size: 72px 72px;
-        opacity: 0.18;
-        mix-blend-mode: soft-light;
-      }
-      /* optional inner crop border */
-      .look.decor::after,
-      .base.decor::after {
-        content: "";
-        position: absolute;
-        inset: 44px;
-        border: 5px solid rgba(255, 255, 255, 0.22);
-        border-radius: 4px;
-      }
-
-      .word-wrap {
-        position: absolute;
-        inset: 0;
-        z-index: 8;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.28));
-      }
-
-      /* THE technique: the word's letterforms are a window — a solid tint
-         (multiply-blended) over a texture image, clipped to the text. */
-      .word {
-        color: transparent;
-        background-color: transparent;
-        background-image: var(--solid-fill), var(--texture-url);
-        background-blend-mode: multiply;
-        background-size:
-          100% 100%,
-          var(--texture-size, 150% 150%);
-        background-position: center, var(--texture-position, center);
-        background-repeat: repeat;
-        -webkit-background-clip: text;
-        background-clip: text;
-        text-align: center;
-        white-space: nowrap;
-      }
-      /* solid-fill variant for the idle base word (no texture) */
-      .word.solid {
-        background-image: none;
-        color: var(--ink, #fff);
-        -webkit-text-fill-color: var(--ink, #fff);
-      }
-
-      .word.display {
-        font-family: Impact, "Arial Black", Arial, sans-serif;
-        font-size: 470px;
-        font-weight: 900;
-        /* line-height ≥ 1 so the background-paint box encloses the full glyph;
-           with line-height < 1 the cap tops/bottoms overflow the box and the
-           texture (clipped to text) leaves untextured slivers there. */
-        line-height: 1.05;
-        text-transform: uppercase;
-        transform: scaleX(0.78);
-        -webkit-text-stroke: 1px rgba(255, 255, 255, 0.22);
-      }
-      .word.serif {
-        font-family: Georgia, "Times New Roman", serif;
-        font-size: 360px;
-        font-weight: 500;
-        font-style: italic;
-        line-height: 1.05;
-      }
-    </style>
-  </head>
-  <body>
-    <div
-      id="root"
-      data-composition-id="held-text-strobe-burst"
-      data-width="1920"
-      data-height="1080"
-      data-start="0"
-      data-duration="3"
-      data-root="true"
-    >
-      <!-- .base (held word on idle plate) and .look layers are injected by JS -->
-    </div>
-
-    <script>
-      (function () {
-        // Built-in texture frames (texture-flip palette). texture = file name
-        // (no .png) under assets/texture-mask-text/masks/.
-        var BUILTIN_FRAMES =
-          '[{"texture":"tiles-138","bg":"#ff70b0","fill":"#f0a020","ink":"#2a0f1d"},' +
-          '{"texture":"paving-stones-150","bg":"#f0d020","fill":"#d07838","ink":"#2a2410"},' +
-          '{"texture":"metal-041-a","bg":"#1050e0","fill":"#9fd0ff","ink":"#eaf2ff"},' +
-          '{"texture":"lava","bg":"#101127","fill":"#ff5a2c","ink":"#ffd9c2"},' +
-          '{"texture":"ground-080","bg":"#0f7a5a","fill":"#ffd27a","ink":"#04241a"},' +
-          '{"texture":"onyx","bg":"#e8e2d6","fill":"#3a3a44","ink":"#1a1a22"},' +
-          '{"texture":"bricks-075-a","bg":"#ff9000","fill":"#7fb0c0","ink":"#241400"}]';
-
-        // Built-in plan: as a BASE template the default is one continuous burst
-        // across the whole composition — flips every 0.125s (≈3f@24fps), never
-        // stops, never cuts to idle. (For the gruop_4-faithful two-burst look,
-        // pass strobePlan = [{start:1.125,end:1.542,step:.125},{start:2.042,end:2.708,step:.125}].)
-        var BUILTIN_PLAN = '[{"start":0,"end":3,"step":0.125}]';
-
-        var defaults = {
-          markText: "NAMSHI",
-          fontStyle: "display",
-          markScale: 1,
-          idleColor: "#000000",
-          idleInk: "#ffffff",
-          frames: "",
-          strobePlan: "",
-          decor: "no",
-        };
-        var vars = Object.assign(
-          {},
-          defaults,
-          window.__hyperframes && window.__hyperframes.getVariables
-            ? window.__hyperframes.getVariables()
-            : {},
-        );
-
-        var root = document.getElementById("root");
-        var masksDir = "assets/texture-mask-text/masks";
-        var style = vars.fontStyle === "serif" ? "serif" : "display";
-        var decor = vars.decor === "yes";
-        var scale = Number(vars.markScale) || 1;
-
-        function parse(str, fallback) {
-          var v = str && String(str).trim() ? str : fallback;
-          try {
-            var p = JSON.parse(v);
-            return Array.isArray(p) ? p : [];
-          } catch (e) {
-            return [];
-          }
-        }
-        var frames = parse(vars.frames, BUILTIN_FRAMES);
-        var plan = parse(vars.strobePlan, BUILTIN_PLAN);
-
-        // Apply word size scale (relative to the per-style base size).
-        var baseSize = style === "serif" ? 360 : 470;
-
-        function makeWord(extraClass) {
-          var word = document.createElement("div");
-          word.className = "word " + style + (extraClass ? " " + extraClass : "");
-          word.textContent = String(vars.markText);
-          word.style.fontSize = baseSize * scale + "px";
-          return word;
-        }
-        function wrap(word) {
-          var w = document.createElement("div");
-          w.className = "word-wrap";
-          w.appendChild(word);
-          return w;
-        }
-
-        // ── Persistent base: held word on the idle plate ──────────────────
-        var base = document.createElement("div");
-        base.className = "base" + (decor ? " decor" : "");
-        base.style.setProperty("--idle-bg", vars.idleColor);
-        var baseWord = makeWord("solid");
-        baseWord.style.setProperty("--ink", vars.idleInk);
-        base.appendChild(wrap(baseWord));
-        root.appendChild(base);
-
-        // ── One stacked .look per texture frame ───────────────────────────
-        var looks = frames.map(function (f) {
-          var look = document.createElement("div");
-          look.className = "look" + (decor ? " decor" : "");
-          look.style.setProperty("--bg", f.bg || "#000");
-          var word = makeWord("");
-          word.style.setProperty("--texture-url", 'url("' + masksDir + "/" + f.texture + '.png")');
-          word.style.setProperty(
-            "--solid-fill",
-            "linear-gradient(" + (f.fill || "#fff") + "," + (f.fill || "#fff") + ")",
-          );
-          if (f.pos) word.style.setProperty("--texture-position", f.pos);
-          look.appendChild(wrap(word));
-          root.appendChild(look);
-          return look;
-        });
-
-        // ── Deterministic, beat-quantized timeline ────────────────────────
-        window.__timelines = window.__timelines || {};
-        var tl = gsap.timeline({ paused: true });
-        gsap.set(looks, { opacity: 0 });
-        var compDur = Number(root.getAttribute("data-duration")) || 3;
-
-        function gridJumps(start, end, stp) {
-          var s = Number(start) || 0,
-            e = Number(end) || s,
-            d = Number(stp) || 0.125;
-          var out = [],
-            n = Math.max(0, Math.floor((e - s) / d + 1e-6) + 1);
-          for (var i = 0; i < n; i++) out.push(+(s + i * d).toFixed(4));
-          return out;
-        }
-
-        // For each burst: flip a fresh texture look on every jump (0ms), cycling
-        // frames by a global step index; clear back to the idle base at end.
-        var step = 0;
-        var prev = null;
-        plan.forEach(function (burst) {
-          var jumps =
-            Array.isArray(burst.jumps) && burst.jumps.length
-              ? burst.jumps.slice()
-              : gridJumps(burst.start, burst.end, burst.step);
-          jumps.forEach(function (t) {
-            if (!looks.length) return;
-            var cur = looks[step % looks.length];
-            if (prev && prev !== cur) tl.set(prev, { opacity: 0 }, t);
-            tl.set(cur, { opacity: 1 }, t);
-            prev = cur;
-            step += 1;
-          });
-          // clean cut back to idle base (held word on black) at burst end —
-          // but NOT when the burst runs to the composition end, so the strobe
-          // never blacks out / stops on the last frame.
-          if (prev && burst.end < compDur - 1e-6) {
-            tl.set(prev, { opacity: 0 }, burst.end);
-            prev = null;
-          }
-        });
-
-        // pin total duration
-        tl.set({}, {}, compDur);
-
-        window.__timelines["held-text-strobe-burst"] = tl;
-      })();
-    </script>
-  </body>
-</html>