@koda-sl/baker-cli 0.79.0 → 0.80.0

package/dist/cli.js

@@ -9,7 +9,7 @@ import {
   defaultRegistry,
   generateCatalog,
   validateCanvasDeep
-} from "./chunk-CCO34ACK.js";
+} from "./chunk-NBNUNCY7.js";
 
 // src/cli.ts
 import { defineCommand as defineCommand141, runMain } from "citty";
@@ -9200,11 +9200,19 @@ function buildOverlayHtml(input) {
   const blueprint = VideoBlueprint.parse(input);
   const blocks = [
     [
-      "<!-- \u2B07 OVERLAY LAYER \u2014 this is YOUR HTML to paint. The reference's overlays are",
-      "     seeded below as plain elements (text + position class + data-start/data-dur).",
-      "     Restyle freely in <style>, regroup, animate, swap a logo placeholder for a",
-      "     real <img> you drop in this dir. The runtime only shows/hides by timestamp;",
-      "     it makes NO styling decisions. Positions: edit the .pos-* classes or add your own. -->"
+      "<!-- \u2B07 OVERLAY LAYER \u2014 this is YOUR HTML to paint, and it is a REAL Hyperframes",
+      "     composition (our hyperframe_render runs the genuine `npx hyperframes` renderer).",
+      "     The reference's overlays are seeded below as plain elements (text + position",
+      "     class + data-start/data-dur). Restyle freely in <style>, regroup, animate, swap a",
+      "     logo placeholder for a real <img> you drop in this dir. But you can do FAR more:",
+      "       \u2022 pull a ready-made block \u2014 `npx hyperframes add <id>` (lower-third, social card,",
+      "         stat counter, chart, code, logo sting) \u2014 and nest it as a",
+      '         <div data-composition-src="compositions/<id>.html" data-start data-track-index ...> clip;',
+      "       \u2022 drive a real caption track off the transcript (karaoke / themed / kinetic);",
+      "       \u2022 animate with the named GSAP motion-rule vocabulary, not just fade/slide/pop;",
+      "       \u2022 frame a talking head as a video-call / PIP / split.",
+      "     See ../.claude/skills/creative-canvas-ads/references/hyperframes/ (start at README.md).",
+      "     Positions: edit the .pos-* classes or add your own. -->"
     ].join("\n")
   ];
   for (const scene of blueprint.scenes) {
@@ -9522,14 +9530,17 @@ function buildVideoTodo(report, overlayCount, floatingCount, opts, blueprint) {
         "The hook is VISUAL-FIRST: the feed plays muted, so scene 1's opening frame + its overlay text must read sound-off in ~1 second \u2014 don't bury the hook in the spoken line alone (meta-ads-playbook \xA739 visual-hooks-beat-audio, \xA748 the 1-second/feed-native rule)."
       ]
     },
-    transitions: "Scene-to-scene cuts the deconstruct flagged as fade/whip/zoom/dissolve/swipe are reproduced as an ffmpeg xfade at the boundary (everything else stays a hard cut). The overlap is consumed from extra generated footage, so the picture stays exactly on the audio timeline. To change a transition, edit the scene's `transition_out.type` in prompt.json and re-scaffold, or hand-edit the `spine` node's ffmpeg args.",
+    transitions: "Scene-to-scene cuts the deconstruct flagged as fade/whip/zoom/dissolve/swipe are reproduced as an ffmpeg xfade at the boundary (everything else stays a hard cut). The overlap is consumed from extra generated footage, so the picture stays exactly on the audio timeline. To change a transition, edit the scene's `transition_out.type` in prompt.json and re-scaffold, or hand-edit the `spine` node's ffmpeg args. For a richer HERO cut (whip-pan, glitch, light-leak, gravitational-lens\u2026), the overlay layer can run a Hyperframes shader/CSS transition instead \u2014 see references/hyperframes/blueprints-and-transitions.md (pick 2\u20133 transition types total; the motion IS the handoff).",
+    overlay_capabilities: 'The overlay layer (video-overlay-composition/index.html) is a REAL Hyperframes composition, not a plain text layer \u2014 our hyperframe_render node runs the genuine `npx hyperframes` renderer. So it can do far more than fade/slide/pop: (1) PULL a ready-made block \u2014 `npx hyperframes catalog --type block` then `npx hyperframes add <id>` into the composition dir, and nest it with a <div data-composition-src="compositions/<id>.html" data-start data-track-index data-width data-height> clip (~97 blocks: lower-thirds, social-proof cards, stat counters, charts, code, logo stings); (2) animate with the named GSAP motion-rule vocabulary (kinetic-beat-slam, svg-path-draw, counting-dynamic-scale, multi-phase-camera\u2026); (3) frame a talking head as a video-call/PIP/split. The whole engine + how to build new effects is documented in references/hyperframes/ (start at README.md \u2192 catalog.md, motion-rules.md). Reach for this whenever the reference\'s graphics are richer than plain text.',
+    caption_system: "Sound-off feed = burned-in captions carry the message. The deconstruct produced a word-level transcript \u2014 drive a real caption track off it (karaoke highlight \u2192 themed \u2192 kinetic), not hand-typed text. Floor: `npx hyperframes add caption-highlight` (TikTok karaoke); escalate by content register (caption-kinetic-slam for hype, caption-editorial-emphasis for premium, caption-neon-glow for AI/crypto). Group on meaning, sync within 80ms. Full ladder + transcript contract: references/hyperframes/captions-and-audio.md.",
+    talking_head_overlay: "For a scene where a presenter shows something (screen-share, app demo, product, a 'video call' look), frame the talking-head clip in the overlay composition: presenter full-bleed \u2192 shrinks to a rounded corner PIP pill while a content card takes the stage (or split/stack/overlay-glass-card). The pattern, the #video-wrap\u2192corner-pill tween, the glass call card, and the corner-coord presets are in references/hyperframes/talking-head-and-overlays.md. A ready exemplar ships as the `video-call-composition` move \u2014 copy it next to your canvas, drop brand fonts in the dir, point a `hyperframe_render` at it with the presenter clip as its `background`.",
     text_overlays: {
       count: overlayCount,
       note: "Seeded as editable HTML inside `#overlay-root` in video-overlay-composition/index.html (text + a .pos-* class + data-start/data-dur). PAINT it: restyle the CSS, build lower-thirds/tickers, drop brand-*.otf for on-brand type. The runtime only shows/hides by timestamp."
     },
     floating_elements: {
       count: floatingCount,
-      note: floatingCount > 0 ? "Seeded as commented <img> stubs in index.html (each names the `baker images icon/sticker/gif/logo` command to source it) \u2014 source the asset, drop it in video-overlay-composition/, uncomment the <img>." : "none detected by the deconstruct \u2014 see `completeness_check`, the reference may still have icons/stickers it missed."
+      note: floatingCount > 0 ? "Seeded as commented <img> stubs in index.html (each names the `baker images icon/sticker/gif/logo` command to source it) \u2014 source the asset, drop it in video-overlay-composition/, uncomment the <img>. For a graphic that should ANIMATE (a lower-third, a social-proof/review card, a stat counter, a chart, a logo sting), prefer a ready-made Hyperframes block instead of a static <img>: `npx hyperframes add <id>` and nest it (see `overlay_capabilities` + references/hyperframes/catalog.md)." : "none detected by the deconstruct \u2014 see `completeness_check`, the reference may still have icons/stickers it missed."
     },
     sound_effects: {
       count: report.sfx_count,