Keep one idea at the center while introducing its surrounding peers. Curved spokes draw outward in sequence, with each endpoint appearing as the route reaches it. This 6.6-second scene presents up to three related items without imposing downward hierarchy levels or claiming that the connections were discovered automatically.
What you get
A local generator, editable HyperFrames radial composition and motion/review instructions for a 1920×1080, 30 fps shot. Generate and render the relationship diagram from your own labels.
center, up to three peers and connectorStyle set to solid or dotted. Peers occupy fixed top, lower-left and lower-right positions, with functional glyphs chosen by input order.
A stable accented core from 0.16 seconds, spoke tracing from 0.60 seconds at 0.82-second intervals and paired endpoint reveals. Both connector styles follow their routes; the completed radial arrangement then holds for reading.
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
Use the shared center to explain a real commonality, and give each spoke a meaning the audience can name. Similar visual treatment suggests peers, so choose a hierarchy scene if depth or authority is the actual point.
Good fit
A creator explaining three applications, formats or related concepts around one shared idea.
A concise teaching passage where each connection needs its own reading beat while the center remains stable.
A series with consistent radial geometry, peer typography and restrained route reveals.
Not for
Automatically finding related concepts, ranking peers or inferring a causal connection from their labels.
A deep hierarchy, arbitrary radial layouts or more than three visible peers through the supplied input.
Automatic full-film editing, generated presenter footage or soundtrack, or copying another creator’s identity and materials.
How to use
You say/creatormotion-diagram-radial-branches Turn my supplied explanation into a white-yellow B-roll scene using the Radial Branch Reveal effect. Use the text, data and media I provide, and ask for any required input that is missing.
Write a short center label and one to three peers. Later entries are not displayed. Use peers that share an understandable relationship with the center, and explain that relationship rather than relying on proximity alone.
Choose solid or dotted connectors according to the intended visual language. Both use the same underlying routes and reading order; dotted styling does not automatically mean a weaker or uncertain relationship unless you define that convention.
Check the top/left/right arrangement with your labels. The scene uses preset positions rather than redistributing fewer peers evenly around a circle. Functional icons follow position, not semantic analysis. No presenter, raster image or matte is used.
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 core, every spoke/endpoint handoff and the final peer spacing in actual MP4 frames. Keep supporting text at least 24 px. Preserve the fixed center and peer relationship rather than turning the shot into a ranked downward tree.
Requirements and costs
You bring
center: provide your own content or retain the illustrative default. · peers: 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. center, peers and connectorStyle are JSON inputs, with four palettes and semantic overrides. Endpoint positions and glyph choices are part of the scene implementation.
No. Editable glyphs, labels and connector geometry construct the shot. The shared media instructions do not add image or presenter requirements here.
Yes. Preserve a stable center and paired spoke/endpoint reveals, including the route-following mask for dotted connectors. Re-render after layout or timing changes.
The current scene takes the first three at most. A fourth visible peer requires deliberate position, connector and timing changes rather than another JSON item alone.
Not automatically. The top, lower-left and lower-right slots are layout choices. Explain any ranking convention explicitly instead of treating the visual arrangement as an evaluation.
User reviews
—0 reviews
Select a star to share your experience.
No reviews yet. Ratings appear once readers share real experiences.