---
name: milestone-branch
description: Animate a numbered workflow with a connected detail branch from its selected stage.
version: 1.0.0
---

# Milestone Branch

Use this parameterized renderer to explain which stage of a process is current and what work belongs there. Author a concise JSON brief, generate editable HTML/SVG, then encode its deterministic GSAP timeline with HyperFrames.

## Brief

Provide `title` (46 weighted characters), `context` (65), `stations` (2–5 labels, 16 each), `activeIndex` (zero-based integer), `notes` (1–4 labels, 34 each) and `palette` (`lagoon`, `ember`, `slate`). Chinese characters count as two. Keep notes concrete and distinct. Selection controls both completed/current/upcoming appearance and the branch anchor. Right-half selections send their details leftward to keep them in frame.

## Run

Node.js 22+, npm, Chrome and FFmpeg are prerequisites. From this directory:

```sh
npm ci
node scripts/compose.mjs /path/to/brief.json /path/to/project
npx --no-install hyperframes inspect /path/to/project --json
npx --no-install hyperframes render /path/to/project --output /path/to/film.mp4 --fps 30 --quality high --strict --workers 1 --low-memory-mode
```

If tools are installed outside standard locations, set `HYPERFRAMES_BROWSER_PATH`, `HYPERFRAMES_FFMPEG_PATH` and `HYPERFRAMES_FFPROBE_PATH` to their absolute paths before rendering. Do not substitute another encoder for the HyperFrames render step.

## Motion contract

The 1920 × 1080 composition lasts 7.2 seconds. Numbered stations arrive over a horizontal rail. The continuous stem starts at the bottom of the current station only. Its extension finishes before the first horizontal twig grows; each note becomes readable after its twig has connected. The last note settles by 3.51 seconds, leaving over 3.6 seconds of reading time. The selected index stays fixed throughout one film.

The generated `brief.json`, `geometry.json` and `index.html` are editable. `window.__timelines['milestone-branch']` is the GSAP timeline; `window.seek(seconds)` is a convenience for inspection. The output contains no soundtrack. Sound design is optional work outside this renderer.

## Check before delivery

Inspect encoded frames around stem and twig completion. Verify the active index at both ends of the track, 1 and 4 notes, and any Chinese brief. Confirm no text overlap or clipping, full normal-speed playback, and the true dropped-frame count. Compare forward/backward seek pixels and computed meaning separately from raw DOM serialization. Report actual results and remaining limitations.

Dependencies are pinned in package-lock.json. Their applicable license notices accompany the installation and are retained in licenses/. This is a bounded JSON renderer, not an automatic unrestricted text-to-film system.