Draw observed data before presenting a separate trend. A plot grows into view, the measured path reveals across the x range, and a dashed supplied trend follows before a concluding strip appears. This ten-second effect animates coordinates you provide; it does not fit a regression, forecast future values or verify a causal relationship.
What you get
A local generator, editable HyperFrames implementation and motion/review instructions. Generate the project at 1920×1080 and render a 30 fps observed-versus-trend segment.
Editable title, points and trend arrays of [x,y] coordinates, x/y axisLabels and conclusion. Both paths share axes based on the maximum extents of the two supplied arrays, with zero-based geometry.
A plot entrance, linear observed-path reveal from 1.10 seconds, a separate dashed-trend reveal from 2.50 seconds and conclusion at 6.40 seconds. Optional --media adds a fixed presenter inset and reduces the drawable span.
Four palettes keep geometry and timing consistent: White & Yellow (white-yellow), Charcoal & Lime (charcoal-lime), Paper & Orange (paper-orange) and Black & White (midnight-ice). Semantic overrides need a contrast check; dark canvases retain a fine static grid. Fonts are bundled locally: Inter, IBM Plex Mono for measurements/ordinals, Smiley Sans and Noto Sans SC. Chinese content automatically uses Smiley Sans, including Latin words; --zh-font noto-sans-sc selects the plainer face and --font embeds your own. Recheck wrapping after changes.
Before you choose
Keep observation, reference line and conclusion distinct. A dashed path can look like a model forecast even when it is merely illustrative; state what it represents and make the concluding words no stronger than the data supports.
Good fit
A creator explaining ordered observations alongside a clearly identified supplied trend or reference line.
A short lesson with positive extents, readable axis units and a conclusion supported by the chosen data.
A series using consistent data geometry, path styling and typography.
Not for
Automatically estimating the trend, forecasting, statistical testing or proving that one variable caused another.
Negative or degenerate coordinate ranges without adapting the current zero-origin/maximum-based geometry. Use at least two ordered observed points and positive x/y extents.
Automatic long-form editing, generated presenter performance or music, or copying a reference creator’s identity and materials.
How to use
You say/creatormotion-comparison-line-trend Turn my supplied explanation into a white-yellow B-roll scene using the Line and Trend Draw effect. Use the text, data and media I provide, and ask for any required input that is missing.
Prepare at least two observed points ordered by x and a separate trend array on the same numeric scale. Name axes x then y and write a concise conclusion. The default practice/quality example is illustrative, not verified experimental evidence.
Check the zero-based geometry and supplied maximum extents. The y maximum rounds upward to a multiple of ten; the dashed line is drawn from your trend coordinates, not derived from observations. Label the trend’s meaning and avoid presenting it as an automatically validated prediction.
Inspect nonuniform x spacing carefully. The path mask reveals linearly across plot width, but point-marker entrances are evenly spaced by array index, so irregular intervals can produce marks appearing before or after the line reaches them. Adapt the marker timing if necessary. Add optional --media only with a continuous take covering its visible interval; no alpha matte is used.
Prepare Node.js 22+, FFmpeg and the documented HyperFrames CLI 0.8.30. Run node scripts/create.mjs --out PROJECT --data CONTENT.json with your chosen --style from the extracted package, adding semantic --overrides if needed. Read the motion specification and image policy before adapting material. No raster-image replacement is required by this composition. Include --media if using the presenter inset; the video starts at zero with a 6.8-second window and fades from 6.4 seconds.
Lint, validate and inspect the generated HyperFrames project, then render at 1920×1080 and 30 fps with the pinned CLI. Check actual MP4 frames at the opening, each handoff and final comparison for labels, geometry, contrast and bounds. Preserve at least 1.2 seconds of final reading time when editing and inspect all palettes with identical content after module changes. Narration, music and film assembly remain separate work. Check beginning/middle/end of the observed path, every marker, the separate trend mask, axis labels, conclusion and optional presenter clearance.
Requirements and costs
You bring
title: provide your own content or retain the illustrative default. · points: provide your own content or retain the illustrative default. · trend: provide your own content or retain the illustrative default. · axisLabels: provide your own content or retain the illustrative default. · conclusion: 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. Supply title, coordinate arrays, axisLabels and conclusion through JSON, then use a palette or semantic overrides. Keep the observed solid line distinct from the supplied dashed trend.
No for a chart-only segment. Add --media if you want the optional presenter inset and inspect timing/crop. There is no raster-image or aligned matte requirement.
Yes. Preserve the plot entrance, observed-data drawing, separate trend and later conclusion. Review actual intermediate frames rather than treating a finished chart still as proof of correct animation.
No. trend is a separate supplied coordinate array. Fit or establish that line outside the effect and explain its basis if you use it in a factual analysis.
Positions use actual x coordinates, but marker reveal times follow array indexes. Inspect and adapt the timeline for irregular spacing so point appearances agree with the linear path reveal.
User reviews
—0 reviews
Select a star to share your experience.
No reviews yet. Ratings appear once readers share real experiences.