Guide viewers across a chart larger than its visible viewport while a supplied speaker remains fixed in a narrow column. The camera travels from labels toward bar endpoints, pauses on the figures, then moves down to the second group. This 6.8-second sequence presents prepared percentage rows without collecting data or making the speaker change sides.
What you get
A local generator, editable HyperFrames chart/presenter scene and motion/review instructions for a 1920×1080, 30 fps segment. Generate and render the oversized chart scan using your data and continuous local footage.
Two groups with name and up to three label/value rows each. Values are documented as zero-to-100 percentages; the scene adds the % label directly, without converting fractions. TIME SAVED is a fixed chart heading.
A horizontal scan from 1.15 seconds, with first-group headings/row labels receding from 1.27 seconds to avoid sliced fragments at the speaker boundary. A separate vertical move from 3.90 to 5.00 seconds brings the second group into view, while the speaker stays on the same side.
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
Check what the bars claim before planning the camera scan. Make the percentage definition explicit, and use a different or adapted chart when small values must be compared precisely rather than shown with a minimum visible length.
Good fit
A creator explaining two small groups of percentage data where endpoint values need a dedicated reading interval.
A short teaching passage using deliberate viewport travel to make a large chart readable beside a speaker.
A series with consistent split framing, group labels and percentage conventions.
Not for
Collecting or validating data, proving time savings or automatically choosing a chart scale for arbitrary units.
Accurate proportional comparison near zero without changing the minimum-bar treatment, or showing every label and value simultaneously throughout the scan.
Automatic full-film editing, generated presenter footage or music, or copying another creator’s identity and source materials.
How to use
You say/creatormotion-split-chart-pan Turn my supplied explanation into a white-yellow B-roll scene using the Chart Viewport Scan effect. Use the text, data and media I provide, and ask for any required input that is missing.
Prepare two groups, each with name and up to three rows containing label and value. Enter percentages as whole-scale numbers, such as 35 for 35%, not 0.35. Keep the fixed TIME SAVED heading meaningful for your data, or deliberately revise the scene wording.
Use values within zero to 100 and inspect low values carefully. The bar-width calculation clamps to a minimum of five and a maximum of 100 while numeric labels show the original value. A zero label therefore still has a nonzero bar; adapt that treatment if your explanation needs precise near-zero lengths.
Supply a continuous local speaker take at least 6.8 seconds long through --media. The video is muted and cropped into a fixed narrow column with a further zoom; check face framing. No raster chart image or alpha matte is used. Do not 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 label-to-endpoint travel, the endpoint pause and the vertical group change in actual MP4 frames. Cropping the oversized chart is intentional, but the current reading subject must stay clear. Verify that values and labels remain understandable despite the first labels fading during travel.
Requirements and costs
You bring
groups: 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. groups supplies names and label/value rows, with four palettes and semantic overrides. TIME SAVED is fixed in the effect code rather than exposed as a title input.
Yes. Bring a continuous local speaker take covering the 6.8-second shot. The chart is editable geometry/text, so no raster chart image or alpha matte is required.
Yes. Preserve the speaker’s fixed column and distinct horizontal/vertical camera moves. Re-render after content changes and review the intended reading subjects through the clipped viewport.
The width calculation uses a minimum value of five for visibility, while the printed number is unchanged. This is a design rule, not a true zero-length representation.
No. It displays your supplied values with a % suffix. Calculate and validate the measure yourself before generation.
User reviews
—0 reviews
Select a star to share your experience.
No reviews yet. Ratings appear once readers share real experiences.