Build a small hierarchy by showing its roots, tracing each route and then introducing its destination. This seven-second scene supports one or two roots, optional relay labels and solid or dotted connectors. You specify the topology; the animation makes that structure readable without inventing categories, inferring relationships or treating every branch as an equal radial peer.
What you get
A local generator, editable HyperFrames hierarchy and motion/review instructions for a 1920×1080, 30 fps segment. Generate the structure from your own labels and render the completed shot.
One or two roots, up to six branches with label and optional rootIndex/relay, rootShift for the root entrance and connectorStyle set to solid or dotted. Numbered leaf panels preserve branch order.
Root entrances beginning at 0.16 seconds, route tracing from 0.65 seconds at 0.43-second intervals, and destination reveals after each route. A relay adds an intermediate label and stem before its leaf. Both connector styles use route-following reveals, with the complete topology held at the end.
Four styles keep the same data and choreography: White & Yellow (white-yellow), Charcoal & Lime (charcoal-lime), Paper & Orange (paper-orange), and Black & White (midnight-ice). Semantic style overrides are supported; check contrast after changing them. Dark canvases use a fine grid. Local fonts include Inter, IBM Plex Mono for measurements and ordinals, Smiley Sans and Noto Sans SC. Chinese text selects Smiley Sans automatically, including accompanying Latin text; --zh-font noto-sans-sc selects Noto Sans SC, while --font takes precedence for a supplied font.
Before you choose
Validate the topology before judging the animation. Use explicit rootIndex values when branch ownership matters, and make relay labels explain an actual intermediate relationship rather than adding visual complexity for its own sake.
Good fit
A creator explaining how one source produces several outputs or how two sources organize a small set of destinations.
A short teaching passage needing optional intermediate labels without flattening the structure into disconnected cards.
A series with consistent root/leaf typography, connector geometry and ordered branch narration.
Not for
Automatic taxonomy generation, discovery of source relationships or verification that the diagram matches a real system.
Arbitrary deep trees, more than two visible roots or six visible branches, or an automatically arranged large graph.
Automatic long-form editing, generated presenter performances or music, or copying another creator’s identity and source materials.
How to use
You say/creatormotion-diagram-branch-reveal Turn my supplied explanation into a white-yellow B-roll scene using the Branch by Branch effect. Use the text, data and media I provide, and ask for any required input that is missing.
Prepare one or two root strings and one to six branches with concise label strings. Optional rootIndex is a zero-based root choice; optional relay inserts an intermediate label on that route. Extra roots or branches beyond the implementation limits are not displayed.
Assign each branch deliberately. When rootIndex is omitted, the code distributes branch positions across the available roots by array order; it does not infer membership from names. Keep explicit rootIndex values within the actual root range and check them whenever the roots are reordered.
Choose connectorStyle solid or dotted and set rootShift for the root’s entrance offset. rootShift does not move roots during the later branch scan. Keep roots and leaves to a few words and relay notes short; more branches create narrower panels. No presenter, raster image or alpha matte is required.
From the extracted package, prepare Node.js 22+, FFmpeg and HyperFrames CLI 0.8.30. Run node scripts/create.mjs --out PROJECT --data CONTENT.json --style white-yellow, substituting another documented palette if wanted. Read the motion specification and image policy before adapting the scene; use semantic --overrides for deliberate style changes.
Inspect the editable project at entry, each motion handoff and final hold, then render with the command printed by the generator. Check the resulting frames for text collisions, correct numbers and readable contrast. Keep at least 1.2 seconds for the final reading when editing, and compare all four palettes with identical content after structural changes. Narration, music and assembly into a longer film remain separate work. Inspect the actual route from each root to its relay or leaf, including the dotted mask reveal. Check labels, connector endpoints and optional relay spacing in all palettes. Keep supporting labels at least 24 px and retain the quiet final hierarchy rather than substituting independent card fades.
Requirements and costs
You bring
roots: provide your own content or retain the illustrative default. · branches: provide your own content or retain the illustrative default. · rootShift: provide your own content or retain the illustrative default. · connectorStyle: provide your own content or retain the illustrative default.
Dependencies
HyperFrames CLI 0.8.30 or compatible — required · Node.js 22 or newer — required · FFmpeg — required
Outside costs
Not collected yet
Tools used
HyperFrames
Publisher testing
v1.0.1 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
FAQ
Yes. roots, branch labels and optional relay text are supplied in JSON, together with topology and connector controls. Four palettes and semantic overrides change appearance without changing the intended root mapping.
No. This branch uses editable labels, boxes and connectors. Shared media instructions apply where another scene uses such material, not as a requirement here.
Yes. Preserve root establishment, route tracing and relay-before-leaf order. Recheck each endpoint and the final hold after moving panels or changing branch count.
An explicit rootIndex selects it. Without one, array positions are divided among the available roots. That default is a layout rule, not an analysis of what the branch means.
The supplied shot supports roots, optional relay labels and leaves within a compact two-root/six-branch layout. A deeper tree needs deliberate implementation changes rather than extra nested JSON alone.
User reviews
—0 reviews
Select a star to share your experience.
No reviews yet. Ratings appear once readers share real experiences.