---
name: roadmap-spotlight
description: Make a 7.5-second editorial motion card: a two- or three-column roadmap fills in, the camera pushes onto the first column, its title is replaced by a focus line and the first step is highlighted.
version: 1.0.3
category: video
delivery: download-only
---

# Roadmap Spotlight

This is a parameterized HTML/CSS + GSAP renderer. A JSON brief becomes an editable HyperFrames project and a 1920x1080, 30 fps MP4. `render.mjs` writes a video-only file; `sound.mjs` adds synthesized cues. It is not a prompt-to-video generator: you author short copy for every brief.

Read `references/direction.md` and `references/input.md` first. Keep the order of events: headers drop in, rails draw, numbered step cards wipe in column by column, a camera push settles on column one while its neighbours stay on screen, the first column title swaps in place for the focus line, then only the first step takes the accent, then a quiet hold. Do not add ambient motion.

## Author and create

Brief fields: `tiers` (2-3 columns, each `name` and 1-4 `steps`), `spotlightLine`, optional `footnote` (use it to label invented content as demo data), optional `tierLabel`, optional `locale` (`en` or `zh-CN`, detected from the text when omitted), optional `sound`. Unknown fields, over-long text and counts out of range are rejected with a readable error.

```sh
node scripts/create.mjs --data /absolute/path/brief.json --out /absolute/path/project --theme linen-teal
node scripts/render.mjs /absolute/path/project /absolute/path/video-only.mp4
node scripts/sound.mjs /absolute/path/project /absolute/path/video-only.mp4 /absolute/path/video.mp4
```

Skip the third command for a silent video.

Themes: `linen-teal`, `lilac-indigo`, `slate-coral`, `umber-amber` (the last two are dark and get a static dot grid). `--colors colors.json` overrides semantic tokens with six-digit hex values. Chinese text selects Smiley Sans (bundled), with Noto Sans SC behind it; `--zh-font noto-sans-sc` swaps that, and `--font local.woff2` wins over both.

Prerequisites: Node.js 22+, FFmpeg, Chrome supported by HyperFrames, and HyperFrames 0.8.30 (run through pinned `npx`; `HYPERFRAMES_CLI=/path/hyperframes.mjs` supplies a local copy and is a tool path, not a credential). The first run may need network access. No API keys or paid models are needed. Check a project with `npx --yes hyperframes@0.8.30 inspect /absolute/path/project --json`.

## Sound

`create.mjs` writes `sound-map.json` beside the project: one cue for every visible event (header drop, rail draw, each card wipe, the camera push, the title swap, the accent), taken from the same timing table as the animation. `sound.mjs` renders those cues with plain oscillators and filtered noise (no samples, no network, no keys), adds a quiet low bed, normalizes to about -20 LUFS with a -2 dBTP ceiling and muxes AAC 48 kHz stereo. Set `"sound": {"mode": "off"}` to get an unchanged silent copy, `"bed": false` to drop the bed, or `"gainDb": {"card": -3}` to rebalance a cue kind. Cue timing is verified against frames and level numbers; whether it sounds good is a human judgement nobody has made here. Details are in `references/direction.md`.

## Review

Check the audio numbers with `ffprobe` and `ffmpeg -af ebur128=peak=true`. Inspect native frames at 0.3, 0.8, 1.4, 2.2, then densely between 2.6 and 4.2 s, and at the final hold. Check that the focus line fits its header, that no step text is clipped (the camera crops the right-hand neighbours on purpose) and that the footnote stays readable. Seek backward and forward to confirm the timeline is deterministic. Build success is not review approval, and neither is user acceptance.

See `references/third-party.md` for bundled dependencies and their licenses.