CreatorMotion · Cycle State Traversal

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.
  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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

User reviews

—0 reviews

Select a star to share your experience.

No reviews yet. Ratings appear once readers share real experiences.

Similar Skills

View all skills