---
name: step-chapter
description: Animate three linked actions in order, then move into a clean chapter numeral and headline with editable GSAP timing.
version: 1.0.3
category: video
delivery: local
---

# Step Chapter

Use this Skill for a process explanation that opens the next part of a presentation. Three stationary cards share a connector line. Emphasis passes across them, a brief push clears the cards, and large chapter typography takes the screen. The ending stays still for reading.

This is a parameterized renderer for one motion structure. A new topic requires a new brief, without changes to scene code. It does not interpret arbitrary movie prompts.

## Make a project

Use Node.js 22, npm, a local Chromium executable and FFmpeg. Fonts and GSAP are bundled with their licenses; no account, paid model or browser download is required. Install the pinned HyperFrames toolchain once:

```sh
npm ci --prefix scripts/toolchain
node scripts/create.mjs --brief /absolute/path/brief.json --palette porcelain --out /absolute/path/new-project
HYPERFRAMES_BROWSER_PATH=/absolute/path/chromium node scripts/render.mjs /absolute/path/new-project /absolute/path/film.mp4
```

Supply JSON with exactly three `actions`, a `section` identifier and a `headline`. For example, a botanical workshop might use `{"actions":["Soak","Shape","Cure"],"section":"04","headline":"A small change in material"}`. Write labels as actions with a clear relationship to the destination title. Do not imply measured results without evidence.

Select `porcelain`, `estuary`, `clay` or `graphite`. All use identical motion, font metrics and geometry. `--lang zh-CN` sets document language for Chinese copy; Noto Sans SC supplies CJK glyphs in either language. Long text is fitted down to a defined minimum; actual browser overflow rejects rendering. Existing project directories are protected from overwrite.

Read [the brief contract](references/brief.md), [timing and visual direction](references/motion.md) and [checks](references/validation.md). The generated directory contains editable HTML, local assets, resolved JSON and the HyperFrames configuration. Seek the paused `window.__timelines['step-chapter']` timeline to inspect it. The generated page intentionally waits for the renderer or a timeline controller.

## Limits

Output is 7.4 seconds, 1920 × 1080, 30 fps, with no audio track. There are no photos, presenter footage, music, sound effects or audio editor. A mobile report can scale playback; this does not create a vertical composition. Shorten copy if the browser rejects font fit.

HyperFrames 0.8.30 has an unresolved transitive moderate advisory, GHSA-hp3w-g68c-fv3c / CVE-2026-97058, in sprintf-js 1.1.3. One advisory propagates through five packages. Ordinary installation can load its logging chain; the demonstrated text-only render does not establish universal unreachability. Keep this tool to trusted local inputs. It has not been approved for a public untrusted rendering service. `--no-audit` is not a fix. No compatibility-validated upgrade is included. See [dependency scope](references/dependencies.md).

Render success is a technical result. Review emphasis order, connecting endpoints, typography, the fast handoff and normal-speed playback before approving a film.