Present a short list as one bounded unit, then connect the whole group to a single destination. List items arrive inside a shared enclosure before the outgoing bridge, destination glyph and relationship symbol appear. This 6.1-second scene explains a collective handoff without drawing separate links from every row or executing the action named at the destination.
What you get
A local generator, editable HyperFrames shot and motion/review instructions for a 1920×1080, 30 fps segment. Generate the project from your own list and destination text, then render the explanatory video.
Up to six items, a destination label and symbol. The list remains inside one enclosure; a single connector communicates the relationship to a large destination glyph.
List entrances from 0.16 seconds, a bridge trace from 1.55 seconds and destination/symbol entrances from 2.10 and 2.20 seconds. The current implementation draws a solid arrowed bridge, despite the older description calling it dotted.
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 enclosure to express a real grouping. Make the destination an appropriate next step for the group, and avoid implying that an arrow means the prerequisites have been checked or the activity has already happened.
Good fit
A creator explaining how a checklist or preparation group leads to one next activity.
A short teaching passage where the list should remain readable as a unit while the destination is introduced.
A series needing consistent list typography, bridge timing and a large destination identity.
Not for
Automatically completing a checklist, verifying prerequisites or executing the destination action.
Individual row-to-target mapping, multiple destinations, or assuming dotted styling is a documented input toggle.
Automatic full-film editing, generated presenter performances or music, or copying another creator’s identity and source material.
How to use
You say/creatormotion-diagram-list-bridge Turn my supplied explanation into a white-yellow B-roll scene using the List to Destination Bridge effect. Use the text, data and media I provide, and ask for any required input that is missing.
Prepare a nonempty items list of up to six concise strings, destination and symbol. Use list entries that make sense together as one group. Extra entries beyond six are not shown; longer wording still needs a fit review within the fixed enclosure.
Choose a symbol that supports the intended relationship rather than implying a mathematical or verified result you have not established. The destination uses a fixed play-style glyph; it is not inferred from your label.
Check the current visual grammar against your brief. The implementation uses one solid arrow from the list enclosure, not dotted per-row routes. Changing its stroke treatment requires a scene/style edit. No footage, matte or raster image is needed.
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 list spacing, connector endpoints and the symbol’s separation from the destination in actual MP4 frames. Keep supporting labels at least 24 px. Preserve the shared enclosure and whole-list relationship rather than adding unrelated edges to every item.
Requirements and costs
You bring
items: provide your own content or retain the illustrative default. · destination: provide your own content or retain the illustrative default. · symbol: 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. items, destination and symbol are JSON inputs, with four palettes and semantic overrides. Connector styling and the destination glyph are implemented in the scene.
No. The list, frame, connector, symbol and destination glyph are editable generated elements. Shared package media instructions do not require footage or raster images for this shot.
Yes. Preserve the bounded list, single outgoing bridge and later destination arrival. Re-render after changes and retain enough time to read the full relationship.
The source description says dotted, but the current scene uses a solid arrowed path. A dotted version requires a deliberate implementation change; there is no connectorStyle input here.
Not in this scene’s supplied structure. It treats the list as a unit leading to one destination, rather than implementing independent row-level relationships.
User reviews
—0 reviews
Select a star to share your experience.
No reviews yet. Ratings appear once readers share real experiences.