CreatorMotion · Latest Then History

Explain the current split first, then give it historical context. One selected 100% column develops before the remaining periods fill on the same scale, with complementary percentages and a fixed two-series legend. This ten-second effect follows your selected index; it does not identify the newest date or fetch a history automatically.

What you get

  • A local generator, editable HyperFrames implementation and motion/review guidance. Generate a 1920×1080 project and render a 30 fps current-to-history segment.
  • Matching periods and shares arrays, two seriesLabels for the share and its remainder, and focusIndex. Shares are numeric percentages from 0 to 100; the complementary value is 100 minus the supplied share.
  • A focused column reveal first, then the remaining array indexes in their existing order. The focused period label gains an underline while equal-height full columns preserve the shared 100% scale.
  • 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

Establish that the percentage definitions are comparable over time. A share can rise while its absolute count falls, so do not turn a current-first composition story into an unsupported growth claim.

Good fit

  • A creator explaining a current composition before showing a small number of earlier periods.
  • A short lesson where share and remainder have consistent definitions across time.
  • A series using consistent stacked percentages, period labels and typography.

Not for

  • Automatic date sorting, newest-period detection, history retrieval or forecasting. focusIndex determines the lead period.
  • Comparing absolute totals through equal-height columns. This chart shows percentage composition and does not encode differences in total population size.
  • Automatic full-film editing, generated presenter performances or music, or copying a reference creator’s identity and materials.

How to use

You say/creatormotion-comparison-latest-history Turn my supplied explanation into a white-yellow B-roll scene using the Latest Then History effect. Use the text, data and media I provide, and ask for any required input that is missing.
  1. Prepare periods and shares with matching lengths, and two seriesLabels in share/remainder order. Use percentages in the 0–100 range and verify the same denominator definition for each period.

  2. Set focusIndex to a valid integer identifying the latest period you intend to discuss. The default selects the last of four years. Remaining bars reveal in ascending input-index order, not an automatically calculated reverse chronology; order your data accordingly.

  3. Read the motion specification and inspect extreme percentages. A 0% or 100% segment leaves little or no interior room for its number, and the remainder label position is computed near the boundary. Display percentages are rounded to integers. No presenter, image slot or matte is required.

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

  5. 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 the selected period first, both complementary labels, period order and final shared scale. Adding periods does not automatically extend the ten-second sequence or preserve label spacing.

Requirements and costs

You bring
periods: provide your own content or retain the illustrative default. · shares: provide your own content or retain the illustrative default. · seriesLabels: provide your own content or retain the illustrative default. · focusIndex: 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