Explain repeated passes through the same process without rebuilding its structure each time. A settled ring stays visible while stronger routes advance around it and a separate status list changes emphasis. Round headings mark the next pass. You supply the steps, round names and status wording; the animation does not execute the process or generate a record of completed work.
What you get
A local generator, editable HyperFrames loop and motion/review instructions for a 1920×1080, 30 fps shot. The default three-node, two-round example lasts 7.8 seconds; duration grows with the supported round/node counts.
Up to five nodes, three round headings and a statuses list. The status text is reused between rounds, while its active styling resets for another pass. Position-based glyphs distinguish the persistent nodes.
A complete ring context, routes traced in sequence and a side-by-side status reading. Each segment starts 0.82 seconds after the previous one; the next round changes its heading and clears the previous route emphasis without hiding the nodes.
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 distinct round names to explain why another pass matters, then narrate any real change separately. A repeated highlight is an illustration of iteration, not evidence that the underlying work improved.
Good fit
A creator explaining repeated review, drafting or learning passes through an already-defined process.
A short teaching passage where state changes and round identity matter more than constructing the underlying graph.
A series needing consistent loop geometry, round labels and status typography.
Not for
Running a real workflow, detecting actual completion or generating new status text for every round.
Constructing an open process into a closed cycle, arbitrary branching or an unbounded number of rounds.
Automatic full-film editing, invented presenter footage or music, or copying another creator’s identity and source material.
How to use
You say/creatormotion-diagram-cycle-traversal Turn my supplied explanation into a white-yellow B-roll scene using the Cycle State Traversal effect. Use the text, data and media I provide, and ask for any required input that is missing.
Prepare a compact ordered nodes array and one to three round names. At most five nodes and three rounds are displayed. Make the return relationship meaningful: repeated arrows should describe an actual iterative model rather than imply improvement merely because another pass occurred.
Supply one status phrase for each visible node in corresponding order. Statuses are limited to the node count; if fewer are supplied, the implementation cycles highlights over those remaining rows. Use complete matching lists when a one-to-one explanation matters.
Keep labels concise and check the side panel against the ring. The same status strings persist across passes; only the heading and highlight state change. This scene uses editable vector nodes and routes, with no presenter, raster image or matte input.
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 transition between rounds as well as individual segment handoffs. Keep nodes visible throughout and verify that every route activates the intended status. Maintain readable supporting text on the documented canvas and distinguish an animated completion state from a verified event in a live system.
Requirements and costs
You bring
nodes: provide your own content or retain the illustrative default. · rounds: provide your own content or retain the illustrative default. · statuses: 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. nodes, rounds and statuses are JSON inputs, with four palettes and semantic overrides. Node glyphs are assigned by position; the status wording is not automatically rewritten per round.
No. This implementation uses editable glyphs, text and routes. Shared package media guidance does not require presenter footage or image replacement here.
Yes. Keep the ring stable, advance the routes with the corresponding status emphasis and reset deliberately at round boundaries. Re-render after changing the count or pacing and inspect the final pass hold.
No. Each round shows your supplied heading and reuses the same status phrases. The scene changes their emphasis without recording new results or evaluating progress.
The ring already exists as context; successive routes show traversal of it. A cycle-build scene instead introduces missing nodes and connections before closing the loop.
User reviews
—0 reviews
Select a star to share your experience.
No reviews yet. Ratings appear once readers share real experiences.