---
name: capability-stage
description: Author a narrated film showing a toolkit through distinct visual compositions, using editable HTML, SVG, GSAP and HyperFrames.
version: 1.0.1
---

# Capability Stage

Use this authoring toolkit for a subject with several different outputs. Each capability receives a separate palette, font classification, spatial arrangement and animation. A measured speech track determines the common scene length; the final composition recalls the opening. This is an editable, parameterized authoring system with seven supplied motion primitives, not arbitrary prompt-to-video generation.

## Prepare

Use Node 22 or newer, Python 3 and FFmpeg. Install the pinned dependencies with `npm ci --ignore-scripts`. The speech synthesizer runs locally; no paid API or account is required. Preserve dependency notices in generated projects. The synthesized voice is deliberately mechanical and requires listening review before public use.

Create a UTF-8 JSON brief with `brand`, optional `language` and `voiceLanguage`, and exactly eight `worlds`. Supply opening, five different capability demonstrations, a connecting statement and a closing. Each world has `title`, `spoken`, `kicker`, `detail`, `items`, `values`, `colors` (ground, foreground, accent), `family`, `temperature`, `classification`, `technique`, `layout` and boolean `dark`. Techniques: `statement`, `plot`, `fold`, `field`, `mosaic`, `cycle`, `converge`. A plot uses ten numeric values from 0 to 100 and up to five axis labels; a fold uses two short headings and two annotations. Inspect the generated storyboard and author subject-specific data. Never describe fictional demonstrations as existing product features.

Select distinct neighboring worlds, keep one dark scene, and restore the opening palette and typography at the end. Choose from Manrope, IBM Plex Mono, Bodoni Moda, Barlow Condensed and Quicksand; Noto Sans SC covers Chinese text. Test glyph coverage and actual fallback for each supplied language. Keep titles short enough to fit two lines at 1080p. More complex narrative or scene mechanisms require editing the runtime, then rebuilding and revalidating.

## Generate and render

```sh
node build.mjs /path/to/brief.json /path/to/project
python3 score.py /path/to/project
npx hyperframes lint /path/to/project
npx hyperframes check /path/to/project
npx hyperframes render /path/to/project --fps 30 --quality high --workers 1 --output /path/to/film.mp4
ffprobe -v error -show_streams /path/to/film.mp4
ffmpeg -v error -i /path/to/film.mp4 -f null -
```

The generated project has scoped scene CSS, independently constructed GSAP scene timelines in one master composition, a storyboard, exact speech events, and separate voice, music and action WAV tracks with editable arrangement JSON. Speech word events come from synthesis, not a forced-alignment transcription. The audio clock is computed from measured speech, not guessed reading speed. A single master timeline owns seeking; do not register the child timelines a second time.

Inspect every transition at native frames, compare initial zero with a return to zero, and test random seeking after future frames. Examine each capability at its action and hold. Check text bounds, font loading, normal 1x playback and actual dropped frames on the target device. Keep numeric measurements separate from listening and visual approval. Reports must identify unresolved checks honestly.

Keep per-film briefs, generated projects, audio and MP4s outside this generic package. Bundle only reusable source and installation metadata. Render after editing input, fonts, timeline or code; previous films do not validate the new version.