dsh-hyperframes 0.1.1 → 0.3.0

package/skills/media-use/scripts/transcribe.mjs

@@ -0,0 +1,180 @@
+#!/usr/bin/env node
+
+import { execFileSync } from "node:child_process";
+import {
+  existsSync,
+  readFileSync,
+  writeFileSync,
+  copyFileSync,
+  renameSync,
+  mkdtempSync,
+  rmSync,
+} from "node:fs";
+import { homedir, tmpdir } from "node:os";
+import { basename, extname, join, resolve } from "node:path";
+import { parseArgs } from "node:util";
+import { mergeTokensToWords } from "./lib/parakeet-words.mjs";
+import { track } from "./lib/telemetry.mjs";
+import { resolveNpxInvocation } from "./lib/npx-sync.mjs";
+
+// The DEFAULT local transcription path. Prefers NVIDIA Parakeet-TDT via
+// parakeet-mlx, which beats whisper.cpp on the Open ASR Leaderboard (~6.05% vs
+// 7.44% avg WER, and 4.73% vs 5.96% on noisy test-other) and is 5-10x faster
+// with native punctuation. Emits { text, words:[{text,start,end}] } (word
+// timestamps merged from Parakeet's sub-word tokens) for transcript-cut /
+// captions / the audio engine.
+//
+// Parakeet v3 covers English + 25 European languages. For other languages, or
+// when parakeet-mlx is not installed, it falls back to whisper.cpp via
+// `hyperframes transcribe` (99 languages; the CLI resolves/builds whisper.cpp
+// on first use — it is not bundled). `--engine` forces one.
+
+const { values: args } = parseArgs({
+  options: {
+    input: { type: "string", short: "i" },
+    out: { type: "string", short: "o" },
+    engine: { type: "string", default: "auto" }, // auto | parakeet | whisper
+    model: { type: "string", default: "mlx-community/parakeet-tdt-0.6b-v3" },
+    json: { type: "boolean", default: false },
+    help: { type: "boolean", short: "h", default: false },
+  },
+  strict: true,
+});
+
+if (args.help) {
+  console.log(`media-use transcribe: better-than-whisper local ASR (Parakeet), whisper.cpp fallback
+
+Usage:
+  node transcribe.mjs --input audio.wav [--out audio.transcribe.json] [--engine auto|parakeet|whisper]
+
+Parakeet (default) beats whisper.cpp on accuracy + speed for English/European
+languages; whisper.cpp (99 languages) is the fallback. Install Parakeet once:
+  uv venv ~/.venvs/parakeet && VIRTUAL_ENV=~/.venvs/parakeet uv pip install parakeet-mlx`);
+  process.exit(0);
+}
+
+if (!args.input) {
+  console.error("error: --input is required");
+  process.exit(2);
+}
+const inputPath = resolve(args.input);
+if (!existsSync(inputPath)) {
+  console.error(`error: input not found: ${inputPath}`);
+  process.exit(2);
+}
+const outPath = resolve(
+  args.out || `${inputPath.slice(0, -extname(inputPath).length)}.transcribe.json`,
+);
+
+// Locate the parakeet-mlx runner the same way the CLI does: env override, then
+// the documented ~/.venvs/parakeet install, then PATH. Checking the venv (not
+// just PATH) is what keeps a user who followed the install docs verbatim from
+// silently falling through to whisper. Returns the runner path, or null.
+function resolveParakeet() {
+  for (const p of [
+    process.env.HYPERFRAMES_PARAKEET,
+    join(homedir(), ".venvs", "parakeet", "bin", "parakeet-mlx"),
+  ]) {
+    if (p && existsSync(p)) return p;
+  }
+  try {
+    execFileSync("parakeet-mlx", ["--help"], {
+      stdio: ["ignore", "ignore", "ignore"],
+      timeout: 20000,
+    });
+    return "parakeet-mlx";
+  } catch {
+    return null;
+  }
+}
+
+// Write via a sibling temp + atomic rename so a SIGKILL mid-write can't leave a
+// truncated transcript at outPath (downstream reads it as valid JSON).
+function atomicWrite(target, data) {
+  const tmp = `${target}.tmp-${process.pid}`;
+  writeFileSync(tmp, data);
+  renameSync(tmp, target);
+}
+
+function report(engine, wordCount) {
+  if (args.json) console.log(JSON.stringify({ ok: true, out: outPath, engine, words: wordCount }));
+  else
+    console.log(
+      `transcribed ${basename(inputPath)} -> ${outPath}${wordCount != null ? ` (${wordCount} words,` : " ("}${engine})`,
+    );
+}
+
+function runParakeet(runner) {
+  const workDir = mkdtempSync(join(tmpdir(), "media-use-asr-"));
+  try {
+    execFileSync(
+      runner,
+      [inputPath, "--model", args.model, "--output-format", "json", "--output-dir", workDir],
+      { stdio: ["ignore", "pipe", "pipe"], timeout: 1_800_000 },
+    );
+    const jsonPath = join(workDir, `${basename(inputPath, extname(inputPath))}.json`);
+    if (!existsSync(jsonPath)) throw new Error("parakeet produced no JSON");
+    const merged = mergeTokensToWords(JSON.parse(readFileSync(jsonPath, "utf8")));
+    atomicWrite(outPath, JSON.stringify(merged, null, 2));
+    report("parakeet", merged.words.length);
+  } finally {
+    rmSync(workDir, { recursive: true, force: true });
+  }
+}
+
+// whisper.cpp via the hyperframes CLI (fetched/built on first use — see
+// SKILL.md): writes transcript.json into --dir; relocate to --out.
+function runWhisper() {
+  const workDir = mkdtempSync(join(tmpdir(), "media-use-whisper-"));
+  try {
+    // On Windows a bare "npx" is npx.cmd, which execFileSync cannot exec
+    // (spawnSync npx ENOENT) — resolveNpxInvocation reroutes it through
+    // node + npx-cli.js (and throws actionably when it can't), same
+    // mechanism as the audio engine's TTS spawns.
+    const resolved = resolveNpxInvocation(
+      ["hyperframes", "transcribe", inputPath, "--dir", workDir],
+      { stdio: ["ignore", "pipe", "pipe"], timeout: 1_800_000 },
+    );
+    execFileSync(resolved.cmd, resolved.args, resolved.opts);
+    const produced = join(workDir, "transcript.json");
+    if (!existsSync(produced)) throw new Error("whisper produced no transcript.json");
+    const tmp = `${outPath}.tmp-${process.pid}`;
+    copyFileSync(produced, tmp);
+    renameSync(tmp, outPath); // atomic publish
+    let words;
+    try {
+      const t = JSON.parse(readFileSync(outPath, "utf8"));
+      words = Array.isArray(t?.words) ? t.words.length : undefined;
+    } catch {
+      /* leave undefined */
+    }
+    report("whisper", words);
+  } finally {
+    rmSync(workDir, { recursive: true, force: true });
+  }
+}
+
+try {
+  const parakeetBin = resolveParakeet();
+  const engine =
+    args.engine === "parakeet" || args.engine === "whisper"
+      ? args.engine
+      : parakeetBin
+        ? "parakeet"
+        : "whisper";
+  if (engine === "parakeet") {
+    if (!parakeetBin) {
+      throw new Error(
+        "parakeet-mlx not found (checked $HYPERFRAMES_PARAKEET, ~/.venvs/parakeet, and PATH). Install: uv venv ~/.venvs/parakeet && VIRTUAL_ENV=~/.venvs/parakeet uv pip install parakeet-mlx (or use --engine whisper)",
+      );
+    }
+    runParakeet(parakeetBin);
+  } else {
+    runWhisper();
+  }
+  await track("media_use_transcribe", { engine });
+} catch (err) {
+  if (args.json) console.log(JSON.stringify({ ok: false, error: err.message }));
+  else console.error(`error: transcription failed: ${err.message}`);
+  process.exit(1);
+}

package/skills/media-use/scripts/transcript-cut.mjs

@@ -0,0 +1,239 @@
+#!/usr/bin/env node
+
+import { execFileSync } from "node:child_process";
+import { mkdtempSync, mkdirSync, readFileSync, renameSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { dirname, extname, join, resolve } from "node:path";
+import { parseArgs } from "node:util";
+import { compileCutList } from "./lib/cutlist.mjs";
+import { track } from "./lib/telemetry.mjs";
+
+const { values: args } = parseArgs({
+  options: {
+    input: { type: "string" },
+    transcript: { type: "string" },
+    remove: { type: "string" },
+    "remove-words": { type: "string" },
+    "remove-fillers": { type: "string" },
+    "cut-silence": { type: "string" },
+    keep: { type: "string" },
+    copy: { type: "boolean", default: false },
+    plan: { type: "boolean", default: false },
+    out: { type: "string" },
+    json: { type: "boolean", default: false },
+    help: { type: "boolean", short: "h", default: false },
+  },
+  strict: true,
+});
+
+if (args.help) {
+  console.log(`media-use transcript-cut — compile transcript edits into video cuts
+
+Usage:
+  node transcript-cut.mjs --input in.mp4 --transcript transcript.json --remove "12-15" --out out.mp4
+
+Options:
+  --input             Source video/audio file
+  --transcript        JSON word transcript, array or { words: [...] }
+  --remove            Time ranges to remove, seconds: a-b,c-d
+  --remove-words      Word-index ranges to remove: 12-18,40-41
+  --remove-fillers    Comma list of filler words to remove
+  --cut-silence       Remove inter-word gaps longer than this many seconds
+  --keep              Inverse mode: direct kept ranges, mutually exclusive with removal
+  --copy              Use stream copy for faster, keyframe-snapped cuts
+  --plan              Print kept segment JSON and exit without ffmpeg
+  --out               Output file
+  --json              Output JSON status
+  --help, -h          Show this help`);
+  process.exit(0);
+}
+
+try {
+  run();
+  await track("media_use_transcript_cut", {
+    mode: args.plan ? "plan" : "encode",
+    remove_fillers: !!args["remove-fillers"],
+    cut_silence: !!args["cut-silence"],
+    ranges: !!args.remove,
+    keep: !!args.keep,
+  });
+} catch (err) {
+  if (args.json) console.log(JSON.stringify({ ok: false, error: err.message }));
+  else console.error(`error: ${err.message}`);
+  process.exit(1);
+}
+
+function run() {
+  if (!args.transcript) throw new Error("--transcript is required");
+  const transcript = JSON.parse(readFileSync(resolve(args.transcript), "utf8"));
+  const segments = compileCutList(transcript, {
+    remove: args.remove,
+    removeWords: args["remove-words"],
+    removeFillers: args["remove-fillers"],
+    cutSilence: args["cut-silence"],
+    keep: args.keep,
+  });
+
+  if (args.plan) {
+    console.log(JSON.stringify(segments));
+    return;
+  }
+
+  if (!args.input || !args.out)
+    throw new Error("--input and --out are required unless --plan is set");
+  if (segments.length === 0) throw new Error("cut list has no kept segments");
+
+  const inputPath = resolve(args.input);
+  const outPath = resolve(args.out);
+  mkdirSync(dirname(outPath), { recursive: true });
+  const tmpDir = mkdtempSync(join(tmpdir(), "media-use-cut-"));
+  const keptSeconds = sumDurations(segments);
+  const totalSeconds = probeDuration(inputPath);
+
+  try {
+    const parts = segments.map((segment, index) => {
+      const out = join(
+        tmpDir,
+        `segment-${String(index).padStart(4, "0")}${extname(outPath) || ".mp4"}`,
+      );
+      cutSegment(inputPath, segment, out, Boolean(args.copy));
+      return out;
+    });
+    const listPath = join(tmpDir, "list.txt");
+    writeFileSync(
+      listPath,
+      parts.map((part) => `file '${escapeConcatPath(part)}'`).join("\n") + "\n",
+    );
+    // Encode to a sibling temp (same extension so ffmpeg picks the right muxer),
+    // then atomic-rename so a SIGKILL mid-encode can't leave a truncated outPath.
+    const tmpOut = `${outPath}.part${extname(outPath) || ".mp4"}`;
+    execFileSync(
+      "ffmpeg",
+      ["-y", "-f", "concat", "-safe", "0", "-i", listPath, "-c", "copy", tmpOut],
+      {
+        stdio: "ignore",
+      },
+    );
+    renameSync(tmpOut, outPath);
+  } finally {
+    rmSync(tmpDir, { recursive: true, force: true });
+  }
+
+  // Stream copy can only cut on keyframes; on sparse-keyframe footage the snap
+  // can silently swallow the whole cut. Compare, then surface the drift in BOTH
+  // the stderr warning (human) and the --json result (pipelines).
+  let copyDrift = null;
+  if (args.copy) {
+    const outSeconds = probeDuration(outPath);
+    if (Math.abs(outSeconds - keptSeconds) > 1) {
+      copyDrift = { produced_s: round3(outSeconds), expected_s: round3(keptSeconds) };
+      if (!args.json) {
+        console.error(
+          `warning: --copy keyframe snapping produced ${round3(outSeconds)}s instead of ${round3(keptSeconds)}s kept; drop --copy for frame-accurate cuts`,
+        );
+      }
+    }
+  }
+
+  if (args.json) {
+    console.log(
+      JSON.stringify({
+        ok: true,
+        input: inputPath,
+        out: outPath,
+        segments,
+        kept_s: round3(keptSeconds),
+        total_s: round3(totalSeconds),
+        ...(copyDrift && { copy_drift: copyDrift }),
+      }),
+    );
+    return;
+  }
+
+  console.log(
+    `cut ${inputPath} -> ${outPath} (${segments.length} segments, ${fmt(keptSeconds)}s kept of ${fmt(
+      totalSeconds,
+    )}s)`,
+  );
+  console.log(`next: resolve --from ${outPath} --type <type>`);
+}
+
+function cutSegment(inputPath, segment, outPath, copy) {
+  const argv = [
+    "-y",
+    "-nostdin",
+    "-ss",
+    fmt(segment.start),
+    "-i",
+    inputPath,
+    "-to",
+    fmt(segment.end - segment.start),
+  ];
+  if (copy) {
+    argv.push("-c", "copy", "-avoid_negative_ts", "make_zero");
+  } else {
+    argv.push(...encodeArgsFor(extname(outPath).toLowerCase()));
+  }
+  argv.push(outPath);
+  execFileSync("ffmpeg", argv, { stdio: "ignore" });
+}
+
+// Codec set per output container. Audio-only outputs must not get the
+// video-centric aac/x264 set (aac inside .wav breaks timing entirely).
+function encodeArgsFor(ext) {
+  if (ext === ".wav") return ["-c:a", "pcm_s16le"];
+  if (ext === ".mp3") return ["-c:a", "libmp3lame", "-q:a", "2"];
+  if (ext === ".m4a" || ext === ".aac") return ["-c:a", "aac"];
+  if (ext === ".flac") return ["-c:a", "flac"];
+  return [
+    "-c:v",
+    "libx264",
+    "-preset",
+    "veryfast",
+    "-crf",
+    "18",
+    "-c:a",
+    "aac",
+    "-movflags",
+    "+faststart",
+  ];
+}
+
+function probeDuration(filePath) {
+  const raw = execFileSync(
+    "ffprobe",
+    [
+      "-v",
+      "error",
+      "-show_entries",
+      "format=duration",
+      "-of",
+      "default=noprint_wrappers=1:nokey=1",
+      "--",
+      filePath,
+    ],
+    { encoding: "utf8" },
+  );
+  const duration = Number(raw.trim());
+  if (!Number.isFinite(duration) || duration <= 0)
+    throw new Error(`could not probe duration: ${filePath}`);
+  return duration;
+}
+
+function escapeConcatPath(filePath) {
+  return filePath.replace(/'/g, "'\\''");
+}
+
+function sumDurations(segments) {
+  return segments.reduce((sum, segment) => sum + (segment.end - segment.start), 0);
+}
+
+function fmt(n) {
+  return round3(n)
+    .toFixed(3)
+    .replace(/\.?0+$/, "");
+}
+
+function round3(n) {
+  return Math.round(Number(n) * 1000) / 1000;
+}

package/skills/motion-graphics/SKILL.md

@@ -0,0 +1,176 @@
+---
+name: motion-graphics
+description: >
+  A short, design-led motion graphic where motion is the message — kinetic
+  typography, stat count-up, chart/data-viz hit, logo sting / brand lockup,
+  lower-third / callout / social overlay, animated map (highlight regions,
+  connect places, zoom to a location), animated tweet / news-article /
+  headline, webpage / UI animation (scroll, cursor, callouts), or fusing a
+  real image's geometry into a chart. Usually under 10s (up to ~30s), no
+  narration or live-action subject; renders to MP4 or transparent overlay.
+  Longer / narrated / multi-scene → /general-video. Unclear → /hyperframes.
+---
+
+> **First, keep this skill fresh — confirm with the user before running:** `npx hyperframes skills update motion-graphics`. A fast no-op when everything is current; otherwise it refreshes this skill plus the core domain skills it depends on before you rely on them.
+
+> **figma source**: If the logo/asset/animation to build from comes from a figma.com URL, run `/figma` first — asset export, brand tokens, and Motion→GSAP translation if the graphic is a Figma Motion import — then build from its output. Don't drive Figma via raw MCP tools directly: that skips SVG sanitization, `.media/manifest.jsonl` provenance, and brand-token `var()` binding, so a later brand change can't propagate without a full re-import.
+
+# motion-graphics — dispatch entry
+
+> **The front door is `/hyperframes`.** This skill makes a **short, design-led, unnarrated motion graphic** (motion is the message; ~under 10s, no voice-over). Anything longer, narrated, or multi-scene — or any uncertainty → read `/hyperframes` first: the intent layer owns every route decision.
+
+This workflow is **autonomous by design** — at most one clarifying question (`agents/director.md`), then build through verification without intermediate review. The intent layer (`/hyperframes` → `references/intent-interview.md`) routes here directly without run-shape questions; a storyboard and companion session add little to a piece this short. Rendering is still user-gated: after checks and proof snapshots pass, ask the canonical “preview first, or render?” question from `../hyperframes-core/references/brief-contract.md`. When a `BRIEF.md` exists, read it before the director's question.
+
+A short design-led motion graphic. **Asset-first**: decide the asset strategy and source real material _before_ designing the shot, then design the shot around what you have, then compose by reusing catalog capabilities. All artifacts go to `PROJECT_DIR = videos/<project-name>/` (created in Step 0); all paths below are relative to it.
+
+| Phase    | Execution                                                             | Primary artifact                                                 | Detailed flow                 |
+| -------- | --------------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------------------- |
+| init     | Bash                                                                  | `hyperframes.json`                                               | Step 0                        |
+| plan     | subagent — **decide search?** + classify + asset strategy             | `shot-plan.json` (draft: category, `asset_needs` queries, brief) | `agents/director.md` (Part 1) |
+| source ◇ | Bash — media-use resolve (**skip if `asset_needs` is empty**)         | `assets/` + `assets/index.md`                                    | `phases/source/guide.md`      |
+| design   | subagent — shot design around resolved assets                         | `shot-plan.json` (final: block(s) + layout + motion + positions) | `agents/director.md` (Part 2) |
+| build    | subagent — reuse-first composition                                    | `compositions/index.html`                                        | `agents/builder.md`           |
+| verify   | Bash — `lint`, `check`, proof snapshots; repair on failure            | `snapshots/contact-sheet.jpg`                                    | Step 5                        |
+| approve  | Ask preview or render; wait for the answer                            | explicit render approval                                         | Step 6                        |
+| render   | Bash — `hyperframes render` (MP4, or `--format webm/mov` for overlay) | `renders/video.mp4` or transparent overlay                       | Step 6                        |
+
+`◇ source` runs only when the chosen category declares assets. Pure code/text categories (e.g. `kinetic-type`, most `charts`/`stat`) have `asset_needs: []` and skip straight from plan to design.
+
+## Categories — split by the search decision
+
+`plan`'s **first decision is: does this need a search?** That fork splits the categories into two groups; then the specific category is picked — for search-driven, **by the type of content the search returns**. Each category is one `categories/<id>/module.md` (its planning + build rules); the shared motion vocabulary lives in `references/motion-vocabulary.md` (→ `hyperframes-animation` rules/blueprints + registry blocks).
+
+**Form categories — no search; the user supplies the content:**
+
+| Category       | Intent                                                                                                         | Leans on                                                                    |
+| -------------- | -------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
+| `kinetic-type` | punchy line / quote / title, motion-first text                                                                 | `caption-*` blocks + animation rules                                        |
+| `stat`         | single hero number / count-up + ring                                                                           | `apple-money-count` / `rules/{counting-dynamic-scale, stat-bars-and-fills}` |
+| `charts`       | bar / line / pie / race / % from data                                                                          | `data-chart` block                                                          |
+| `logo-reveal`  | logo sting / brand lockup (user logo)                                                                          | `logo-outro` / `rules/svg-path-draw`                                        |
+| `lower-thirds` | name / title bars, callouts, social overlays                                                                   | `caption-*` + registry overlay blocks                                       |
+| `maps`         | geographic motion — highlight regions, connect places, zoom to a location (vector lane, or baked basemap lane) | `us-map` / `world-map` family + `bake-basemap.mjs`                          |
+
+**Search-driven categories — search first, then animate by content type** (the RWA path):
+
+| Returned content | Category       | Animation                                                      |
+| ---------------- | -------------- | -------------------------------------------------------------- |
+| webpage / link   | `webpage`      | webpage / UI animation (scroll, reveal, cursor, callouts)      |
+| news article     | `news`         | headline reveal + source card + key-fact callouts              |
+| tweet            | `tweet`        | animated tweet card                                            |
+| image / entity   | `asset-fusion` | the asset's geometry _becomes_ the chart (RWA diegetic fusion) |
+
+Build order: one at a time, coverage-first (rough is fine). `kinetic-type` ported from the prototype; the rest follow.
+
+## Prerequisites
+
+macOS Apple Silicon or Linux x64. System tools: `brew install node ffmpeg`. `npx hyperframes doctor` once. macOS GPU render: `export PRODUCER_BROWSER_GPU_MODE=hardware`.
+
+Optional keys (local fallbacks if unset) — only needed by categories that source/generate assets via media-use:
+
+| Key                                 | Used for                                                    | Fallback                        |
+| ----------------------------------- | ----------------------------------------------------------- | ------------------------------- |
+| `GEMINI_API_KEY` / `GOOGLE_API_KEY` | image generation (media-use resolve)                        | skip generate / search-only     |
+| (asset_scout / search providers)    | `webpage`/`news`/`tweet` + `asset-fusion` real-asset search | category degrades to asset-free |
+
+## Flow
+
+### Step 0 — Initialize
+
+cwd is the agent workspace root; write all artifacts under `PROJECT_DIR = videos/<project-name>/`. `<project-name>`: use the dir the user gave, else a short kebab-case name from the intent (`<subject>-motion`). Not the workspace basename or a timestamp.
+
+Only when `$PROJECT_DIR/hyperframes.json` is absent:
+
+```bash
+PROJECT_DIR="${MOTION_GRAPHICS_DIR:-videos/<project-name>}"
+mkdir -p "$(dirname "$PROJECT_DIR")"
+npx hyperframes init "$PROJECT_DIR" --non-interactive --example=blank --skill=motion-graphics
+```
+
+`init` checks the installed skills against the latest on GitHub and updates the global set if any are out of date.
+
+**Constraints:** never `hyperframes init` in the workspace root; never nest another `hyperframes/` inside `PROJECT_DIR`; every Bash command (master + subagents) is a `(cd "$PROJECT_DIR" && ...)` subshell — never bare `cd`.
+
+### Step 1 — Plan (subagent: Director Part 1)
+
+Dispatch one subagent. prompt = full `agents/director.md` + `## Dispatch context` (`SKILL_DIR` / `PROJECT_DIR` / the user's request / `Schema: <SKILL_DIR>/references/shot-plan-ir.md`). It must:
+
+1. **Decide: does this need a search?** (the first fork)
+   - **No** → pick a **form category** (kinetic-type / stat / charts / logo-reveal / lower-thirds); content is user-supplied; `asset_needs: []`.
+   - **Yes** → emit a **search plan** into `asset_needs[]` (news / web / tweet / image; two-pole queries). The specific **search-driven category** (webpage / news / tweet / asset-fusion) is confirmed by the content type returned in Step 2, and finalized in Step 3.
+2. Write a draft `shot-plan.json` (envelope + chosen form category _or_ search intent + `asset_needs` + a one-paragraph shot brief). Schema: `references/shot-plan-ir.md`.
+
+Validation: `[ -s "$PROJECT_DIR/shot-plan.json" ] && echo ok || echo missing`.
+
+### Step 2 — Source ◇ (Bash: media-use, conditional)
+
+If `shot-plan.json.asset_needs` is non-empty, resolve assets (search / generate / fetch → frozen project-local paths + ledger). See `phases/source/guide.md` (wraps `media-use resolve`; the search-driven categories use the news/web/tweet/image search). If `asset_needs` is empty, **skip to Step 3**.
+
+```bash
+# illustrative — see phases/source/guide.md
+(cd "$PROJECT_DIR" && node <SKILL_DIR>/phases/source/resolve.mjs --plan ./shot-plan.json --out ./assets)
+```
+
+Degrade gracefully: if a search/provider is unavailable, the category falls back to asset-free (note it in `context.log`).
+
+### Step 3 — Design (subagent: Director Part 2)
+
+Dispatch a subagent (prompt = `agents/director.md` Part 2 + dispatch context including the resolved `assets/index.md` if Step 2 ran + `catalog-map.md`). It designs the shot **around the available assets**: pick the catalog block(s) + the `hyperframes-animation` rules/blueprints, the layout, the motion, beats, and (for `asset-fusion`) the `element_positions` + eyedropper palette. Finalizes `shot-plan.json` (`content.block` + `content.customize` + per-category content).
+
+### Step 4 — Build (subagent: Builder, reuse-first)
+
+Dispatch a subagent. prompt = full `agents/builder.md` + dispatch context (`shot-plan.json`, `catalog-map.md`, the category's `module.md`, `references/motion-vocabulary.md`, `references/builder-contract.md`). **Reuse-first**: `npx hyperframes add <block>` + customize in place; hand-author only gaps + the asset-fusion affordance. Output `compositions/index.html` honoring the HF contract (paused GSAP timeline on `window.__timelines`, `class="clip"` + stable ids, `tl.seek(0)`, deterministic).
+
+### Step 5 — Verify (Bash → repair subagent on failure)
+
+```bash
+(cd "$PROJECT_DIR" && npx hyperframes lint .)
+(cd "$PROJECT_DIR" && npx hyperframes check .)
+(cd "$PROJECT_DIR" && npx hyperframes snapshot --at <proof-times>)
+```
+
+Choose proof times that show the opening state, signature move, and final hold. Inspect the generated contact or snapshot sheet before continuing. On `lint`, `check`, or snapshot failure, dispatch the repair subagent (`agents/finalize.md`) for one in-place fix pass, then rerun the failed gate. Never change a fixed duration merely to hide a defect.
+
+### Step 6 — Approve and render (Bash)
+
+Ask one question: “preview first, or render?” If the user chooses preview, open Studio and return to the same approval gate after revisions:
+
+```bash
+(cd "$PROJECT_DIR" && npx hyperframes preview --background)
+```
+
+Render only after an explicit render answer:
+
+```bash
+(cd "$PROJECT_DIR" && npx hyperframes render . --skill=motion-graphics -q high -o ./renders/video.mp4)
+# transparent overlay variant: --format webm  (or mov)
+```
+
+Verify the output exists, is non-empty, and has the intended duration. The final handoff names the artifact, actual duration, composition or frame id, proof times, and the inspected contact or snapshot sheet. Flags live in `/hyperframes-cli` → `references/preview-render.md`.
+
+## Resume table
+
+| State                                                    | Continue from              |
+| -------------------------------------------------------- | -------------------------- |
+| no `shot-plan.json`                                      | Step 1 (plan)              |
+| `shot-plan.json` has `asset_needs`, no `assets/`         | Step 2 (source)            |
+| `shot-plan.json` final, no `compositions/index.html`     | Step 3/4 (design+build)    |
+| `compositions/index.html` exists, proof snapshots absent | Step 5 (verify)            |
+| checks and proof snapshots pass, no approved render      | Step 6 (approval)          |
+| approved render exists                                   | verify output, then report |
+
+## Design notes (maintainers — execution does not read this)
+
+- **Asset-first rationale:** sourcing is front-loaded and informs shot design (the RWA flow: analyze → search → review → compose). the search-driven categories (`webpage`/`news`/`tweet`) and `asset-fusion` both lean on media-use search (news/web/tweet/image), which is media-use's documented RWA lineage.
+- **Reuse-first:** the in-ecosystem analog of LLM-generated templates is "compose catalog blocks + `hyperframes-animation` rules". HF's paused GSAP timeline ≙ Remotion's `useCurrentFrame`.
+- **Category module contract:** one `categories/<id>/module.md` (planning + build), sharing `references/motion-vocabulary.md` (+ optional eval). Adding a category = drop the folder + register its classifier line in `agents/director.md` + its row in `catalog-map.md`; the phase pipeline is untouched.
+- **Directory shape:**
+  ```
+  videos/<project-name>/
+    hyperframes.json  context.log
+    shot-plan.json            # the IR (Director output)
+    assets/  assets/index.md  # media-use output (if sourced)
+    compositions/index.html   # Builder output
+    renders/video.mp4
+  ```
+- **Registration:** in `hyperframes` router — add the "design-led short motion graphic" intent + Workflow description; carve the motion-graphics triggers out of `/general-video`; add reverse Do-NOT-use edges. See `motion-graphics-genre.md` §5-7.

package/skills/motion-graphics/agents/builder.md

@@ -0,0 +1,40 @@
+# Motion-Graphics Builder
+
+Turn `shot-plan.json` into one renderable HyperFrames composition (`compositions/index.html`). Everything stays in the HF ecosystem — HTML is the source of truth; a single **paused** GSAP timeline carries all motion; the engine seeks it. Category-specific build rules live in `categories/<id>/module.md`; this file is the shared contract.
+
+## Reuse-first (the default)
+
+Default = **compose existing catalog capabilities, not hand-author**:
+
+- `npx hyperframes add <block>` (registry) → customize in place. Most blocks bake content/data into their own script (only a few expose CSS-var params), so reuse = **add + edit**.
+- `hyperframes-animation` rules / blueprints / transitions for motion; runtime adapters (GSAP default).
+
+Hand-author only (a) gaps no block/rule covers, (b) the `asset-fusion` affordance binding. The Director named the block(s) + customizations in `shot-plan.json` (`content.block` + `content.customize`); see `catalog-map.md`.
+
+## The HF contract (non-negotiable)
+
+- Root `#stage` carries `data-composition-id`, `data-start="0"`, `data-duration=<s>`, `data-fps`, `data-width`, `data-height`.
+- Exactly ONE `gsap.timeline({ paused:true })`; register `window.__timelines["<id>"] = tl;`; end with `tl.seek(0)`. **Never `tl.play()`** for render-critical motion. No timers / async / event-driven timeline build. Finite repeats only.
+- **Timed clips** need `class="clip"` + a stable `id`. Timeline-driven groups inside one full-duration clip don't each need timing attrs.
+- **Fonts**: prefer local `@font-face` (.woff2) for deterministic / offline render; CDN Google Fonts do render (compiler caches + injects `@font-face`) but warn + need network.
+- **Deterministic only** — no `Date.now()` / `Math.random()` / network.
+
+## Layout before animation
+
+Build the **hero-frame end-state** in CSS first (flex + padding; never absolute offsets on content containers; the root must be sized). Use `fromTo()` for elements inside `.clip` and for any delayed entrance; `from()` is safe only for non-clip elements active from `t=0`. Exits belong to transitions or the final scene. Full rules: `references/builder-contract.md`.
+
+## IR → composition
+
+- `content.block` → `hyperframes add` it (or inline) + apply `content.customize`.
+- per-category `content` (text scenes / chart data / fusion positions / news-tweet content) → realize per `categories/<id>/module.md`.
+- resolved `asset_needs` → reference **frozen project-local paths** (never a remote URL or a prompt).
+- `palette[-1]` / bg + `font` from the envelope.
+- `export: alpha-overlay` → transparent bg; render `--format webm` (or `mov`).
+
+## Critical correctness (GSAP / seek)
+
+Opacity-gate delayed elements (set hidden until their entrance). Clamp at tween bounds (no overshoot past a held value). Allowed eases: `power1–4`, `back`, `bounce`, `circ`, `elastic`, `expo`, `sine` (`.in/.out/.inOut`). One motif per scene. Run `hyperframes check` for overflow / collisions.
+
+## Hand off for verification
+
+Self-check the authored file, then return it to the orchestrator. Step 5 runs `hyperframes lint`, `hyperframes check`, and proof snapshots on the assembled project. Do not render. When redispatched with a finding, fix the offending element and never change a fixed `data-duration` during repair. Remotion-source migrations use `/remotion-to-hyperframes` and its SSIM harness instead.