CreatorMotion · Grouped Metric Bars

Compare two series within each measure before moving to the next. Paired horizontal bars grow in sequence with numeric endpoints, separate units and a fixed series legend. Each metric has its own scale, so the ten-second effect supports within-metric comparison without pretending that bars from different units share one numerical axis.

What you get

  • A local generator, editable HyperFrames effect and motion/review instructions. Generate a 1920×1080 project and render a 30 fps paired-metric comparison segment.
  • Two seriesLabels and metrics with name, two values and unit. Each group’s maximum is 1.05 times its largest supplied value, with its own labeled axis.
  • Two-series growth within the first metric, followed by the next metric. Bars and endpoint counters share a 1.1-second interval, with a fixed legend and a final complete comparison.
  • Four palettes preserve geometry and timing: 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 text automatically uses Smiley Sans, including Latin words; --zh-font noto-sans-sc selects the plainer face and --font embeds your own. Inspect wrapping after changes.

Before you choose

Use the chart to explain a tradeoff rather than invent an overall winner. A completion rate and a time measure can move in different desirable directions; define success for each before drawing a conclusion from the paired bars.

Good fit

  • A creator comparing two alternatives across a small number of clearly defined metrics.
  • A short teaching example where measures have different units and need independent scales.
  • A recurring series using consistent paired-bar order, legends and typography.

Not for

  • Directly comparing lengths between different metric groups, interpreting the longest bar as the best outcome or assuming all measures share a unit.
  • Automatic benchmark collection, significance testing or negative/all-zero data without adapting the current scale calculation.
  • 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-grouped-bars Turn my supplied explanation into a white-yellow B-roll scene using the Grouped Metric Bars effect. Use the text, data and media I provide, and ask for any required input that is missing.
  1. Prepare two seriesLabels and metrics with name, exactly two numeric values and unit. Keep series order consistent in every group. The default compares completion rate and time to first result as illustrative data.

  2. Verify metric definitions and whether higher or lower is desirable. Every group rescales to its own maximum; the two bars within a group are comparable, but a long bar in one group cannot be directly compared with a long bar in another.

  3. Check display precision: endpoint counters use two decimals for values below one and whole numbers otherwise. A fractional rate is not multiplied by 100. Each group has fixed spacing and a three-second start cadence, so adding metrics needs a layout/timing review. No footage, matte or raster image is required.

  4. Prepare Node.js 22+, FFmpeg and the documented HyperFrames CLI 0.8.30. From the extracted package run node scripts/create.mjs --out PROJECT --data CONTENT.json with the chosen --style, adding semantic --overrides if needed. Read the motion specification and image policy before adapting the composition. Shared image-map options do not add an active raster slot or presenter to this effect.

  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 reveal and final comparison for labels, bounds, contrast and correct values. Preserve at least 1.2 seconds of final reading time when changing the timeline and inspect all palettes with identical content after module changes. Narration, music and film assembly remain separate work. Check each group’s axis, unit, series color and terminal values, then read the complete two-measure comparison. The title Two measures, one decision is fixed in code; adapt it if your brief differs.

Requirements and costs

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