CreatorMotion · Cycle Build and Close

Introduce the steps of a recurring process and make the return connection the concluding beat. Icon nodes appear around an elliptical route as arcs build between them; the final, stronger arc closes the loop before a central check appears. This is a construction of the cycle, rather than repeated traversal of an already complete diagram.

What you get

  • A local generator, editable HyperFrames cycle and motion/review instructions for a 1920×1080, 30 fps shot. The default four-node composition lasts 7.2 seconds; generate and render your own version after supplying labels.
  • Up to five nodes positioned in input order around an ellipse. The first node receives the accent treatment, and position-based functional glyphs distinguish the steps. Long labels trigger a smaller typography treatment, which still needs a readability check.
  • An initial node at 0.16 seconds, arc construction from 0.47 seconds and subsequent nodes spaced at 1.02-second intervals. A stronger final connection and center confirmation follow. Scene duration adapts to retain time after closure, rather than repeatedly looping the animation.
  • 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

Name the return relationship explicitly in your explanation. Let the closing arc communicate recurrence, while the center check confirms only that the diagram is complete—not that the process has delivered a verified outcome.

Good fit

  • A creator explaining how a few process steps lead back to a starting activity.
  • A short teaching passage where completing the loop is the point, such as introducing a review-and-improve model.
  • A series using consistent cycle geometry, step labels and a restrained closing confirmation.

Not for

  • Proving that a process is effective, automatically choosing its steps or verifying that a real system has completed them.
  • Continuous multi-round state traversal, arbitrary branching paths or more than five displayed nodes through the current input.
  • Automatic full-film editing, generated presenter performances or music, or copying another creator’s identity and source materials.

How to use

You say/creatormotion-diagram-cycle-build Turn my supplied explanation into a white-yellow B-roll scene using the Cycle Build and Close effect. Use the text, data and media I provide, and ask for any required input that is missing.
  1. Prepare a small ordered nodes array, using the four-step example as a starting point. The implementation displays at most five labels. Confirm that the final step genuinely returns to the first; a visual circle does not establish a feedback relationship by itself.

  2. Keep node labels to a few words so they fit the fixed panels. The wrapper reduces type and icons for longer text, but this is not a guarantee that every label fits. Glyphs are chosen by position rather than inferred from label meaning; inspect whether their associations suit your explanation.

  3. Retain the arc-to-next-node order and make the closing edge distinct. This scene builds the loop once; it has no rounds/status input for repeated traversal. No presenter, raster image or matte is needed.

  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 each route handoff, final closure and center mark in the MP4. Keep supporting text at least 24 px and inspect the final reading interval with your actual node count. The confirmation means the diagram has closed, not that a real process has been measured as successful.

Requirements and costs

You bring
nodes: 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