CreatorMotion · Handoff and Explain

Introduce an old state and its replacement, then shift attention to what the new state means. Two illustrated paper objects connect through an explicit arrow; a lateral move carries the old object out of view and puts the new one beside numbered supporting points. This 6.8-second shot stages a transition you describe, without transforming files or verifying the claimed improvement.

What you get

  • A local generator, editable HyperFrames shot and motion/review instructions for a 1920×1080, 30 fps segment. Generate the project and render a transition-and-explanation video using your own material.
  • oldState, newState and up to four points, plus required before-image and after-image raster slots with bundled defaults. Titles and imagery remain separate editable parts of the paper objects.
  • Old state from 0.16 seconds, a connecting arrow from 0.62 seconds and new state from 1.08 seconds. The camera group moves left from 2.05 to 2.80 seconds; supporting points enter from 2.95 seconds as the new state takes the lead position.
  • 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

Make the new-state points explain concrete consequences of the handoff. Establish the old context briefly, then use the open space for useful specifics rather than assuming a camera move proves an improvement.

Good fit

  • A creator explaining a workflow change and then spelling out what the replacement makes possible.
  • A short teaching passage where the old state establishes context but should leave the frame before the detailed explanation.
  • A series with repeatable before/after paper objects, decisive handoff motion and numbered support lines.

Not for

  • Automatically migrating data, generating a before/after result or proving the new state performs better.
  • A persistent side-by-side comparison, a long explanatory list or a pipeline that needs every input to remain visible.
  • Automatic full-film editing, generated presenter footage or music, or copying another creator’s identity and source material.

How to use

You say/creatormotion-diagram-handoff-explain Turn my supplied explanation into a white-yellow B-roll scene using the Handoff and Explain effect. Use the text, data and media I provide, and ask for any required input that is missing.
  1. Write concise oldState and newState labels, then up to four points explaining the new state. Ground each point in the change you are actually describing; the animation does not infer benefits from the labels.

  2. Reuse the bundled before-image and after-image for an illustrative example or replace those exact slots through --images MAP.json. Relative paths resolve beside the map; unspecified defaults remain. Both images are required by the paper helper, so there is no automatic blank-paper fallback. Follow the image policy and match imagery to your claims.

  3. Keep points brief enough for their numbered lines and the final reading hold. The old state leaves the frame after the fixed camera shift; if your explanation requires continued before/after comparison, choose another structure rather than relying on a hidden object. No presenter or matte is used.

  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 entire lateral move, final crop of the new paper and each explanation entrance in actual MP4 frames. Check image crops, arrow endpoints and label wrapping, with supporting text at least 24 px. Preserve the handoff into an explanatory anchor rather than replacing it with disconnected fades.

Requirements and costs

You bring
oldState: provide your own content or retain the illustrative default. · newState: provide your own content or retain the illustrative default. · points: 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