freecodego 0.1.7-alpha.2.2 → 0.1.7-rc.2.3

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

@@ -0,0 +1,302 @@
+<!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>