CreatorMotion · Chart Presenter Swap

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

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

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

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

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

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