---
name: branch-paths
description: Make an editable branching diagram film with causally ordered routes, optional processing stops, and readable outcomes.
version: 1.0.2
category: video
delivery: download-only
---

# Branch Paths

Use for explaining how one or two inputs lead to distinct destinations. This is a parameterized SVG/GSAP renderer with an authoring workflow: the Agent designs the topology and writes the brief. It does not infer a trustworthy process from arbitrary prose.

Before drawing, identify what flows, who owns each branch, and what changes at a processing stop. Keep each connector attached to the correct origin. A stop appears only after its incoming path reaches it; the outgoing path follows; the destination appears last. Conclude with a still reading interval.

Write UTF-8 JSON containing:

- `heading`: 1–68 characters; `caption`: 1–120 characters; optional `kicker` for a short topic label.
- `origins`: one or two short strings, up to 28 characters each.
- `outlets`: one to six objects with `name` (up to 30), `detail` (up to 46), `from` (zero-based origin index), and optional `via` (processing label, up to 24).
- `palette`: `estuary`, `archive`, `mulberry`, or `ink`.
- `flow`: `down` or `across`; `line`: `continuous` or `spaced`; `lift`: boolean for rising entrances.

Choose a different topology when the brief requires it. Downward diagrams suit allocation; horizontal routes suit intake decisions. Order related destinations together to reduce crossing. Use concise labels; character limits are guardrails, not proof of visual fit. Six dense destinations require especially short labels. Inputs are illustrative unless the user supplies verified facts.

Node.js 22+, Python 3, FFmpeg/ffprobe, and HyperFrames 0.8.30 are required. Chromium must be available through HyperFrames. Fonts and GSAP are local; keep their notices. No API credentials or paid generation are required.

```sh
node scripts/create.mjs --brief /path/to/brief.json --out /path/to/project
node scripts/render.mjs /path/to/project
```

`HF_BIN` optionally selects the entrypoint of an installed HyperFrames 0.8.30 CLI. Otherwise the render command uses `npx --yes hyperframes@0.8.30` and may need network access. Rendering uses one worker. Review `index.html`, `brief.json`, `timing.json`, and `audio-timeline.json`; edit the brief and regenerate for content changes. The nine-second film is 1920×1080 at 30 fps. `window.seek(seconds)` and the paused GSAP timeline support repeatable preview inspection. Do not start an independent CSS animation loop.

The original procedural music and event tones are rendered from the editable JSON into `mix.wav`, then mixed into `video.mp4`. Adjust notes, level, tempo and cue positions in the project audio timeline and rerun the renderer. This is a compact synthetic score, not recorded instruments or a professional mastering workflow. Listen to the result before accepting it. `picture.mp4` is the render intermediate and `poster.png` the reading frame.

Check all origin assignments, relay ordering, edge endpoints, CJK glyphs, overflow and settled-state readability. Seek backward and forward to the same time; compare frames. Probe duration, dimensions and audio; decode the whole file; watch at normal speed and report observed dropped frames separately from rendering success. Read [the directing notes](references/authoring.md) before delivery. The Skill archive contains no finished example media.