---
name: reading-steps
description: Compose a short editable reading sequence with circled numbers or dots and a stable final list.
version: 1.0.1
---

# Reading Steps

Turn one to four concise lines into a seven-second landscape video. This parameterized renderer keeps a centered capsule stack and reveals each line once. It does not generate stories, images or narration.

Read [the brief contract](references/brief-contract.md) and [motion direction](references/motion-direction.md). Author a JSON brief for the requested subject. Choose `porcelain`, `tidal`, `clay` or `graphite`; only colors and the static dark-theme grid change across themes.

Use Node.js 22, npm and FFmpeg. Install the fixed HyperFrames dependency with `npm ci`. Font files, GSAP and required notices are local. No account, key or model call is needed.

```sh
node scripts/create.mjs --brief /absolute/brief.json --theme porcelain --out /absolute/new-project
node scripts/render.mjs /absolute/new-project /absolute/film.mp4
```

The output directory must be empty. The project contains editable HTML with inline animation JavaScript, resolved brief, local assets and HyperFrames metadata. Keep the project beside the exported MP4. Use HyperFrames preview to review the timeline; GSAP registers it as `window.__timelines['reading-steps']`.

Review first state, every reveal and the full final hold at native resolution. Shorten text if the measured font fit fails. Read [verification](references/verification.md) before delivering. Videos have no audio track; add a separately licensed audio workflow if a brief requires sound. Rendered media and subject briefs belong outside this reusable Skill.