@koda-sl/baker-cli 0.128.0-dev.70bf43ce4 → 0.131.0-dev.597b50181

package/canvas/tiktok-captions-composition/index.html

@@ -112,7 +112,7 @@
 
           group.forEach((word, wi) => {
             const span = document.getElementById('w_' + gi + '_' + wi);
-            tl.set(span, { className: '+=active-word' }, word.start);
+            tl.set(span, { className: 'active-word' }, word.start);
           });
 
           tl.fromTo(el,

package/canvas/video-overlay-composition/index.html

@@ -81,6 +81,27 @@
          after another (e.g. coverage chips appearing as each is spoken), not as a clump. */
       .chips { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; max-width: 92%; }
 
+      /* BUILT-IN CAPTION TRACK (renders only when a transcript.json is wired by the
+         scaffold — the merged overlay+captions pass). Restyle freely; the karaoke
+         grouping/sync is driven by the script below off the word-level transcript. */
+      .caption-container {
+        position: absolute; bottom: 320px; left: 0; right: 0;
+        display: flex; align-items: center; justify-content: center;
+        padding: 0 60px; pointer-events: none;
+      }
+      .caption-group {
+        position: absolute;
+        font-family: 'BrandFont', 'Arial Black', 'Helvetica Neue', sans-serif;
+        font-size: {{font_size}}px; font-weight: 900; color: {{text_color}};
+        text-align: center; text-transform: uppercase; line-height: 1.2;
+        text-shadow:
+          2px 2px 0 rgba(0,0,0,0.9), -2px -2px 0 rgba(0,0,0,0.9),
+          2px -2px 0 rgba(0,0,0,0.9), -2px 2px 0 rgba(0,0,0,0.9),
+          0 4px 8px rgba(0,0,0,0.6);
+        visibility: hidden;
+      }
+      .caption-group .active-word { color: {{highlight_color}}; }
+
       /* 9-grid position helpers (absolute). Tweak the insets or add your own. */
       .pos-top-left      { top: 90px; left: 56px; text-align: left; }
       .pos-top-center    { top: 90px; left: 50%; transform: translateX(-50%); }
@@ -116,17 +137,20 @@
              data-start, data-duration and data-track-index. See
              references/hyperframes/blueprints-and-transitions.md. -->
 
-        <!-- CAPTION TRACK SLOT (optional, recommended for sound-off feeds): the feed
-             plays muted, so burn in captions from the word-level transcript the
-             deconstruct produced. Floor: `npx hyperframes add caption-highlight`
-             (TikTok karaoke); escalate by register (caption-kinetic-slam, etc.). The
-             scaffold already wires a default caption track as a separate composition;
+        <!-- CAPTION TRACK: built in below (#captions renders the word-synced karaoke
+             track whenever the scaffold wires a transcript.json — same render pass).
+             To escalate the register (caption-kinetic-slam, caption-editorial-emphasis,
+             caption-neon-glow) pull a block: `npx hyperframes add <id>` and restyle;
              see references/hyperframes/captions-and-audio.md for the sync contract. -->
       </div>
+      <!-- Captions live OUTSIDE #overlay-root on purpose: the generic overlay runtime
+           animates every [data-start] element under #overlay-root, and the caption
+           groups carry their own karaoke timing — nesting them would double-animate. -->
+      <div class="caption-container" id="captions" data-layout-allow-occlusion></div>
     </div>
 
     <script>
-      (() => {
+      (async () => {
         const DURATION = parseFloat('{{duration}}');
         const tl = gsap.timeline({ paused: true });
         const els = Array.from(document.querySelectorAll('#overlay-root [data-start]'));
@@ -163,6 +187,54 @@
           if (tx) el.style.transform = tx;
         }
 
+        // BUILT-IN CAPTION TRACK — active only when the scaffold staged a transcript
+        // (the merged overlay+captions pass). No transcript.json ⇒ captions skip
+        // silently and this composition is a pure overlay layer.
+        const transcript = await fetch('./transcript.json')
+          .then((r) => (r.ok ? r.json() : null))
+          .catch(() => null);
+        if (Array.isArray(transcript) && transcript.length > 0) {
+          const WORDS_PER_GROUP = parseInt('{{words_per_group}}', 10) || 3;
+          const container = document.getElementById('captions');
+          const groups = [];
+          for (let i = 0; i < transcript.length; i += WORDS_PER_GROUP) {
+            groups.push(transcript.slice(i, i + WORDS_PER_GROUP));
+          }
+          groups.forEach((group, gi) => {
+            const el = document.createElement('div');
+            // `clip` marks this as a hyperframes-timed element (this same GSAP
+            // timeline drives its show/hide); without it the pre-render gate flags
+            // every group as visible for the whole composition.
+            el.className = 'caption-group clip';
+            el.id = 'cg_' + gi;
+            el.setAttribute('data-start', String(group[0].start));
+            el.setAttribute('data-duration', String((group[group.length - 1].end - group[0].start) || 0.5));
+            group.forEach((word, wi) => {
+              const span = document.createElement('span');
+              span.id = 'w_' + gi + '_' + wi;
+              span.textContent = word.text + ' ';
+              el.appendChild(span);
+            });
+            container.appendChild(el);
+
+            const groupStart = group[0].start;
+            const groupEnd = group[group.length - 1].end;
+            gsap.set(el, { visibility: 'hidden' });
+            tl.set(el, { visibility: 'visible' }, groupStart);
+            group.forEach((word, wi) => {
+              const span = document.getElementById('w_' + gi + '_' + wi);
+              tl.set(span, { className: 'active-word' }, word.start);
+            });
+            tl.fromTo(
+              el,
+              { scale: 0.8, opacity: 0 },
+              { scale: 1, opacity: 1, duration: 0.1, ease: 'back.out(1.5)' },
+              groupStart
+            );
+            tl.set(el, { visibility: 'hidden' }, groupEnd + 0.05);
+          });
+        }
+
         tl.to({}, { duration: 0.01 }, Math.max(0.01, DURATION - 0.01));
         window.__timelines = window.__timelines || {};
         window.__timelines.main = tl;

package/canvas/video-overlay-composition/meta.json

@@ -1,7 +1,7 @@
 {
   "id": "video-overlay",
   "title": "Overlay layer: agent-authored HTML/CSS composited over a video",
-  "description": "A paint-it-yourself overlay layer, NOT a prop renderer. The scaffold seeds #overlay-root in index.html with the reference ad's overlays as real, editable HTML elements (text + a position class + data-start/data-dur timing); a tiny generic runtime only shows/hides each element at its timestamp (with an optional data-anim entrance). Every styling decision — bars, tickers, colors, fonts, a real logo <img> dropped into this dir — lives in the HTML/CSS you edit, not in props. Drop brand-bold.otf / brand-regular.otf for on-brand type. Fixed 1080x1920; copy + edit width/height for other ratios.",
+  "description": "A paint-it-yourself overlay layer, NOT a prop renderer. The scaffold seeds #overlay-root in index.html with the reference ad's overlays as real, editable HTML elements (text + a position class + data-start/data-dur timing); a tiny generic runtime only shows/hides each element at its timestamp (with an optional data-anim entrance). Every styling decision \u2014 bars, tickers, colors, fonts, a real logo <img> dropped into this dir \u2014 lives in the HTML/CSS you edit, not in props. Drop brand-bold.otf / brand-regular.otf for on-brand type. Fixed 1080x1920; copy + edit width/height for other ratios. When speech is present the scaffold also wires the optional `transcript` input, and this composition renders the word-synced caption track in the SAME pass (one headless render, one less encode) \u2014 captions skip silently when no transcript is wired.",
   "width": 1080,
   "height": 1920,
   "fps": 30,
@@ -12,7 +12,35 @@
       "required": true,
       "staged_as": "background.mp4",
       "description": "The base video to composite overlays onto (e.g. the concatenated reproduction clips)."
+    },
+    "transcript": {
+      "kind": "json",
+      "required": false,
+      "staged_as": "transcript.json",
+      "description": "Optional word-level transcript JSON from video_transcribe: [{text, start, end}, ...]. When wired, the built-in TikTok-style caption track renders in this same pass."
     }
   },
-  "params": {}
+  "params": {
+    "words_per_group": {
+      "kind": "integer",
+      "min": 1,
+      "max": 8,
+      "default": 3,
+      "description": "How many caption words to show at once."
+    },
+    "font_size": {
+      "kind": "integer",
+      "min": 24,
+      "max": 200,
+      "default": 72
+    },
+    "text_color": {
+      "kind": "color",
+      "default": "#ffffff"
+    },
+    "highlight_color": {
+      "kind": "color",
+      "default": "#FFD700"
+    }
+  }
 }