---
name: chart-traverse
description: Produce an editable presenter-and-chart film that travels across two groups of percentage bars.
version: 1.0.1
---

# Chart Traverse

Make a short visual explanation where a continuous speaker take accompanies a chart that is larger than its viewing window. This is a parameterized renderer: the author supplies two sets of values, concise wording and licensed footage. It does not generate a speaker performance or infer data from prose.

## Prepare the brief

Use Node.js 22+, npm and FFmpeg/ffprobe. Run `npm ci` in this folder. Runtime libraries and fonts are pinned; bundled browser assets include their notices. HyperFrames also requires a compatible Chrome installation.

Write a JSON file with these fields:

- `title`: nonempty heading, up to 36 characters.
- `unit`: up to 48 characters describing the percentages and their population.
- `note`: up to 90 characters explaining the data's origin or illustrative status.
- `panels`: exactly two objects with a `title` (30 characters maximum) and three `entries`. Each entry has `name` (22 characters maximum) and `amount` (a finite number from 0 to 100).
- `palette`: `lagoon` or `clay`.
- `footage`: local video path relative to the JSON file. Supply a continuous take at least 8.4 seconds long. The generator checks duration and never loops a short clip.
- `anchor`: horizontal crop position, 0–100. Inspect face and gesture boundaries after changing it.
- `language`: `en` or `zh-CN`. Bundled Manrope and Noto Sans SC provide Latin and Chinese glyphs.

Keep categories short enough for the 300 px label column. Character limits are guardrails, not a substitute for visual text checks. Use three values per panel and explain whether the populations are comparable. The supplied take is muted; these are silent visual studies without narration synchronization.

## Generate and render

```
node scripts/compose.mjs /absolute/brief.json /absolute/project
npx --no-install hyperframes inspect /absolute/project --json
npx --no-install hyperframes render /absolute/project --output /absolute/film.mp4 --fps 30 --quality high --strict --workers 1
```

The output is editable HTML/CSS plus a paused GSAP timeline registered under `window.__timelines['chart-traverse']`. It includes local assets and `build.json`. The film is 1920×1080, 30 fps, 8.4 seconds. All animation timing remains editable in the generator.

## Direct the reading sequence

The left speaker column remains in place. Read the first panel's labels, travel rightward across the chart by translating its plane left, and hold at the values. Then move the same plane vertically to the next panel while restoring its horizontal origin. Read the new labels before another endpoint scan. Keep bars proportional: zero is zero width and 100 uses the full scale. Labels recede before crossing the speaker boundary. The large values near the right edge are intentionally revealed by travel; verify all endpoints at the settled hold.

Inspect the start, horizontal moves, vertical handoff and final hold. Seek backward and forward across each boundary. Check continuous footage, complete facial framing, label readability, zero/100 values, font loading and actual encoded playback. Do not treat a successful render as visual approval. Supply a different authorized take if crop cannot preserve the subject.

## Distribution

The reusable package contains no presenter takes or finished films. Deliver per-brief media separately. Obtain rights for footage, avoid suggesting a speaker endorses invented survey results, and retain relevant media credits. Dependency notices stay with the bundled fonts and GSAP.