Give two plotted series separate reading intervals while exchanging the chart and speaker positions. The first line draws with the chart on one side, a short coordinated swap reframes the shot, and the second line draws once that framing settles. The composition returns to its original allocation for the final comparison. This 6.8-second scene presents your numbers without testing which approach is better.
What you get
A local generator, editable HyperFrames chart/speaker composition and motion/review instructions for a 1920×1080, 30 fps segment. Generate the project using supplied numeric series and a continuous local presenter take, then render the shot.
Two series with up to six values each and up to six axisLabels. Positions use a fixed zero-to-100 vertical mapping and equally spaced x slots. The title and two series names are fixed in the scene, not JSON fields.
First-line drawing from 0.32 to 1.52 seconds, a coordinated side exchange from 1.95 to 2.57 seconds and second-line drawing from 2.70 to 3.80 seconds. Both regions return from 4.50 to 5.12 seconds, leaving the completed comparison visible.
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 title, legend and underlying measurements agree before animating the swap. Distinguish a visual comparison of supplied series from evidence that one practice reliably outperforms another.
Good fit
A creator comparing two short numeric series whose meanings match or can be adapted to the chart labels.
A teaching passage needing line drawing in settled views and a purposeful change in chart/speaker emphasis.
A series with consistent graph geometry, split framing and controlled positional exchanges.
Not for
Automatically calculating results, collecting evidence or proving one approach causes an improvement.
Arbitrary units or series names without revising fixed copy, real-date spacing or values outside the documented zero-to-100 range.
Automatic full-film editing, generation of missing presenter footage or music, or copying another creator’s identity and materials.
How to use
You say/creatormotion-split-chart-swap Turn my supplied explanation into a white-yellow B-roll scene using the Chart Presenter Swap effect. Use the text, data and media I provide, and ask for any required input that is missing.
Prepare exactly two numeric series and matching axisLabels, up to six values/labels each. Use values from zero to 100 on one meaningful scale. The code clamps coordinates to that range; it does not warn through a printed value label or infer the correct units.
Check the fixed text: the title is Two ways to improve, with legends Focused practice and Unstructured effort. If your data describes other things, revise these scene strings before presenting it. Equal x spacing follows array index rather than actual elapsed time.
Supply a continuous local presenter take of at least 6.8 seconds through --media. It is muted and cropped/zoomed inside the speaker region, which moves between sides. Inspect the crop in both allocations; no alpha matte or raster chart image is needed. Never loop a shorter take.
Prepare Node.js 22+, FFmpeg and HyperFrames CLI 0.8.30. From the extracted package run node scripts/create.mjs --out /absolute/PROJECT --data /absolute/CONTENT.json --style white-yellow --media /absolute/PRESENTER.mp4. Use another documented palette or semantic --overrides as needed. Read the motion specification, DESIGN.md and image policy before adapting materials.
Run the generated project’s lint, validate and inspect checks, then render with the printed command. Inspect actual MP4 frames at entry, every focus change and the final reading hold for seams, clipping, contrast and media overlap. Keep essential text and interface targets readable; compare all four palettes with identical content after module changes. Narration is separate, and a silent preview does not establish audio synchronization. Inspect both swaps for edge seams, each line draw in its settled interval and the final legend/series relationship. Check clipping, contrast and the original data values independently; the polished line motion does not validate the comparison.
Requirements and costs
You bring
series: provide your own content or retain the illustrative default. · axisLabels: 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
series and axisLabels are JSON inputs, with palettes and semantic overrides. The chart title and two legend names are fixed code strings and need a deliberate edit to describe different series.
Yes. Supply a continuous local presenter take covering the 6.8-second composition. The graph uses editable SVG paths, not a screenshot, and this scene does not use an alpha matte.
Yes. Keep the coordinated region exchanges and draw each stroke only after framing is settled. Re-render after changes and inspect transition frames for gaps or occlusion.
No. The plot uses a fixed zero-to-100 coordinate mapping and clamps inputs to it. Normalize data deliberately beforehand if needed, and explain that transformation.
axisLabels are displayed strings at fixed x slots. Unequal dates do not change spacing, so treat it as an indexed series unless you deliberately adapt the plotting geometry.
User reviews
—0 reviews
Select a star to share your experience.
No reviews yet. Ratings appear once readers share real experiences.