CreatorMotion · Trend Card Tour

Give two before-and-after trends their own reading time, then bring them together. This ten-second camera tour starts close on the first complete chart, moves across to the second at the same inspection scale, and pulls back for the paired conclusion. You supply both endpoint values and each change statement; the scene organizes the comparison without calculating or validating that statement.

What you get

  • A local generator, editable HyperFrames scene and motion/review instructions. Generate two plotted cards and render their camera tour; it is not a data-analysis or forecasting tool.
  • Exactly two cards, each with label, two values and a change string. Each plot has a zero-based vertical frame scaled to 1.1 times its own maximum, endpoint dots, sparse grid labels and fixed Before/After captions.
  • A close first-card view from the start, lateral travel beginning at 3.35 seconds and a paired pullback from 6.65 seconds. Charts themselves stay static while the shared camera plane moves; the final wide view preserves the two labels, charts and supplied change statements.
  • 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

Use the tour to separate two explanations, then compare their meaning in the final pair. Independent scales can support clear individual plots, but they do not make slope or apparent vertical change directly comparable across cards.

Good fit

  • A creator explaining two short before/after comparisons whose changes need individual attention before a joint conclusion.
  • A teaching passage where the camera should lead the reading rather than repeatedly drawing or replacing charts.
  • A recurring report using the same two-card structure, typography and camera pacing.

Not for

  • Automatic computation of change percentages, validation of a trend, regression or forecasting from the plotted points.
  • Direct cross-card comparisons of line slope or absolute height when the two independently scaled vertical axes differ.
  • Long time series, automatic full-film editing, invented presenter footage or soundtrack, or copying another creator’s identity and source materials.

How to use

You say/creatormotion-comparison-trend-card-tour Turn my supplied explanation into a white-yellow B-roll scene using the Trend Card Tour effect. Use the text, data and media I provide, and ask for any required input that is missing.
  1. Prepare exactly two cards with label, two nonnegative values and a change string. Each pair needs a positive maximum. Define the before and after periods and measurement units in your supporting explanation; the plotted endpoint captions are fixed rather than separate data fields.

  2. Calculate each change statement independently and check it against its values. The change field is plain supplied text, so a mismatched percentage will still be displayed. When the before value is zero, do not invent a percentage change merely to fill that field.

  3. Compare the axes before drawing a conclusion across cards. Each uses its own maximum plus headroom, so identical-looking slopes may represent different quantities. Keep titles and change strings compact enough for both close views and the final pair. No presenter or raster images are used.

  4. From the extracted package, prepare Node.js 22+, FFmpeg and HyperFrames CLI 0.8.30. Run node scripts/create.mjs --out PROJECT --data CONTENT.json --style white-yellow, substituting another documented palette if wanted. Read the motion specification and image policy before adapting the scene; use semantic --overrides for deliberate style changes.

  5. Inspect the editable project at entry, each motion handoff and final hold, then render with the command printed by the generator. Check the resulting frames for text collisions, correct numbers and readable contrast. Keep at least 1.2 seconds for the final reading when editing, and compare all four palettes with identical content after structural changes. Narration, music and assembly into a longer film remain separate work. Review the first close view, the entire lateral move, the second view and the pullback—not just the final frame. Verify that camera framing preserves focused labels, ticks and statistics. Maintain the shared-plane tour instead of replacing it with a generic line-drawing animation.

Requirements and costs

You bring
cards: 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