---
name: stepwise-pane
description: Create a short split-screen explanation with continuous presenter footage and a growing, persistent list.
version: 1.0.2
---

# Stepwise Pane

This is a parameterized HTML/CSS + GSAP renderer for a fixed 8.8-second teaching passage. It accepts structured content and a local continuous video; it does not generate a speaker, write a script, or synchronize speech. HyperFrames encodes the editable project at 1920 × 1080 and 30 fps.

## Prepare a brief

Use Node.js 22 or newer and install FFmpeg (including ffprobe). Run `npm ci` in the installed directory. The package pins HyperFrames 0.8.30 and GSAP 3.13.0. Fonts and browser-side resources are included with their notices. A compatible Chromium installation is required by HyperFrames; use its normal browser setup or `PUPPETEER_EXECUTABLE_PATH`.

Write a JSON file with these keys:

- `title`, `eyebrow`, `closing`: short, nonempty text; each is limited to 64 characters. Keep the title to two visual lines.
- `points`: one to seven short strings. Allow up to 42 characters for one lane, 32 for two. Render and inspect wrapping; character limits do not guarantee fit.
- `textBank`: `near` places writing on the left, `far` on the right.
- `lanes`: 1 or 2. Two lanes fill in row-major order.
- `palette`: `linen`, `harbor`, `clay`, or `ink`.
- `footage`: local MP4 path, resolved relative to the JSON file. Supply at least 8.8 uninterrupted seconds, with permission to use the person and recording. The renderer uses the beginning of the take, without looping.
- `focus`: horizontal crop anchor from 0 to 100. Check the whole take so the face stays inside the 760-pixel-wide portrait region.

Use distinct topics and meaningful steps. Keep the footage and briefs beside the project rather than embedding them into the reusable package. Stock people are illustrative and should not be represented as endorsing a product or speaking the written words.

## Build and render

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

Generated `index.html` remains editable. `brief.json` records content, while `build.json` records timings, typography and video duration. Fonts use Manrope for Latin and Noto Sans SC when Chinese text is detected.

## Direct the sequence

The portrait enters gently without changing the list layout. A horizontal mask reveals the title, then each line appears with a separate ordinal arrival. Previously revealed rows stay readable. After the last item, a closing sentence arrives and the complete composition holds through the last frame. List cadence spans 1.05–5.70 seconds; the final sentence starts at 6.45 seconds. Change timing in the generator when authoring a different pace, then regenerate and inspect the film.

This output is silent: the source video is muted, and there is no narration, soundtrack generator or audio editor. Add licensed sound in a separate editing workflow if required, retaining its editable timeline and checking the actual final mix.

## Check delivery

Inspect native-resolution encoded frames at each reveal and in the final hold. Verify title wrapping, all rows, CJK glyphs, portrait crop and end-of-take continuity. Check direct, backward and forward timeline seeks, including zero and the final frame; wait for the video seek to settle. Serve CSS with `text/css` and verify local font loading. Play the encoded film once at normal speed and record real playback counters without repeating to erase drops. Keep runtime behavior, visual review, listening and user acceptance separate.