Keep a three-step object in place while introducing explanations around it. A solid central slab establishes the steps; curved leaders then trace outward and reveal the surrounding notes one at a time. This 6.8-second shot annotates specific parts of one object, making it useful for a compact process explanation rather than a network of equal peer nodes.
What you get
A local generator, editable HyperFrames shot and motion/review instructions for a 1920×1080, 30 fps segment. Generate and render the composition from your prepared step labels and explanations.
Up to three steps and three callouts, with numbered central panels and preset curved leader routes. In the current layout, callout index zero points to the left step, index one to the right step and index two to the middle step.
A central slab and step entrances from 0.16 seconds, followed by the first leader at 0.88 seconds and subsequent leaders at 0.75-second intervals. Explanations appear near the ends of the traced leaders while the central object stays fixed for the final 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
Write the note for a particular step before placing it around the slab. Verify the fixed anchor mapping with your actual copy: a smooth leader animation is misleading if it attaches a correct explanation to the wrong step.
Good fit
A creator explaining why individual steps in a small process matter, without moving the process itself out of view.
A short teaching passage where an anchored note should follow the viewer’s attention to one specific part.
A series needing a consistent three-step slab, annotation geometry and restrained explanatory timing.
Not for
Automatic interpretation of a workflow, detection of annotation anchors from a screenshot or automatic remapping of leader routes.
A free-form graph, many steps, long surrounding paragraphs or assuming callout input order equals left-to-right step order.
Full-film editing, generated presenter footage or music, or reproducing another creator’s identity and source materials.
How to use
You say/creatormotion-diagram-anchored-callouts Turn my supplied explanation into a white-yellow B-roll scene using the Anchored Callout Reveal effect. Use the text, data and media I provide, and ask for any required input that is missing.
Prepare three concise steps in left-to-right order and short callouts for their intended meanings. The scene uses only the first three entries of each array. Start from the documented three-step structure instead of assuming it will automatically rebalance a shorter or longer process.
Map the explanations to the actual leader anchors: callouts[0] describes steps[0], callouts[1] describes steps[2], and callouts[2] describes steps[1]. Check that mapping after every reorder. Leaders have fixed geometry; they do not choose an anchor by reading the text.
Keep step labels to a few words and notes to at most two short lines where possible. Long upper explanations can intrude into adjacent space, and the lower note has a different text area. No presenter, matte or raster image is active in this implementation.
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. Follow every line from its central attachment to the correct note in the rendered video. Preserve the central object’s fixed position, readable contrast and at least a final reading hold. Current labels use a short opacity reveal; older “unblur” wording should not imply a blur operation that the implementation does not perform.
Requirements and costs
You bring
steps: provide your own content or retain the illustrative default. · callouts: 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. steps and callouts are supplied through JSON, with four palettes and semantic overrides. Position and routing changes require editing the scene rather than supplying extra text fields.
No. This shot uses editable slab geometry, numbered text and SVG leaders. The package’s shared media policy does not mean this scene needs a presenter or image replacements.
Yes. Preserve the stable central steps, sequential leader tracing and later explanations. Render after changes to check that routes still meet the intended edges and every note has enough reading time.
No. Preset anchors follow left, right, then middle. Match your callout array to that geometry, or edit the routes deliberately if you need a left-to-right reading sequence.
Not through the current steps/callouts inputs alone. The shot constructs its own central three-step object; screenshot-based anchor detection is outside its implementation.
User reviews
—0 reviews
Select a star to share your experience.
No reviews yet. Ratings appear once readers share real experiences.