Introduce two inputs, then give the resulting range the emphasis. Two compact receipt-style cards appear first; below them, large lower and upper numbers animate together and settle into a readable interval. This seven-second effect presents figures you provide—it does not calculate a range from the text on the receipts.
What you get
A local generator, effect implementation and motion/review instructions for an editable HyperFrames project. Render the generated composition at 1920×1080 and 30 fps to obtain a segment for your own edit.
Two source cards with label/value text and a separate range frame with lowStart, lowEnd, highStart, highEnd and unit controls. Both endpoints animate from their supplied start values to their supplied end values.
Receipt entries at 0.35 and 1.10 seconds, the result frame at 2.0 seconds and a synchronized count from 2.40 to 3.95 seconds. The final interval holds for reading; its numbers use a whole-number display.
Four palettes keep the motion consistent: White & Yellow (white-yellow), Charcoal & Lime (charcoal-lime), Paper & Orange (paper-orange) and Black & White (midnight-ice). Semantic overrides adapt the treatment; check contrast after changes. Dark palettes include a fine static grid. Fonts are bundled locally: Inter, IBM Plex Mono for measurements and ordinals, and Smiley Sans/Noto Sans SC for Chinese. Chinese copy automatically uses Smiley Sans, including Latin text in the composition; --zh-font noto-sans-sc selects the plainer alternative and --font embeds your supplied face. Inspect wrapping after a font change.
Before you choose
Use this when an interval is the conclusion, not a single total. Explain what makes the lower and upper estimates different, and ensure the visible inputs support that conclusion before animating them.
Good fit
An educational estimate where viewers should see two contributing amounts before the combined lower and upper bounds.
A short creator explanation of a time commitment or another interval with concise source labels and a clear unit.
A recurring series that needs the same range treatment, motion and typography across several examples.
Not for
Automatically deriving totals from receipt strings, live cost data or financial calculation. You supply both endpoints and must verify the relationship yourself.
Precise fractional displays without adapting the implementation: the animated endpoints are rounded to integers.
Automatic long-form editing, generation of presenter performances or music, or copying another creator’s identity and source footage.
How to use
You say/creatormotion-cards-cost-range Turn my supplied explanation into a white-yellow B-roll scene using the Cost Cards to Range effect. Use the text, data and media I provide, and ask for any required input that is missing.
Prepare two costs as label/value pairs. Then separately supply lowStart, lowEnd, highStart, highEnd and unit. The default uses Preparation 2–3 hours and Practice 2–4 hours, ending at 4–7 hours per week; these are illustrative inputs.
Check the arithmetic and assumptions outside the animation. Because costs.value is text while the counter endpoints are separate numeric fields, changing a receipt will not update the result automatically. Ensure both cards use compatible units and the low bound does not exceed the high bound.
Keep the labels short enough for the receipt layout and choose start values that make sense for the explanation. The effect displays only the first two costs. It uses editable text and geometry rather than presenter footage or active image slots.
Prepare Node.js 22+, FFmpeg and the documented HyperFrames CLI 0.8.30. Run node scripts/create.mjs --out PROJECT --data CONTENT.json from the extracted Skill directory. Add --style and optional --overrides for styling. An --images JSON map replaces named local slots; relative paths resolve beside that map and unlisted slots retain defaults. Read the image policy before replacing visual materials.
Inspect the editable composition and render with npx --yes hyperframes@0.8.30 render PROJECT --output VIDEO.mp4 --fps 30 --quality high --strict. Review real rendered frames at the opening, each main change and the final hold for cropping, overlap and readability. Assemble voiceover, music and other scenes separately. Compare the settled endpoints against your verified figures, read the unit and source cards together, and check that the animated values do not imply a calculation the content does not support.
Requirements and costs
You bring
costs: provide your own content or retain the illustrative default. · lowStart: provide your own content or retain the illustrative default. · lowEnd: provide your own content or retain the illustrative default. · highStart: provide your own content or retain the illustrative default. · highEnd: provide your own content or retain the illustrative default. · unit: 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. The JSON exposes costs, four endpoint fields and unit; palettes and semantic overrides control the treatment. Keep labels and value strings concise so they remain inside the receipts.
No. This effect uses editable receipts and numbers, with no active presenter or raster-image slot. Generic instructions about images and presenter mattes apply only to effects that use them.
Yes. Preserve the introduction of the two source cards before the lower result frame and its two endpoint counters. Adjust and re-render the editable project if you need different timing.
No. The receipt values are display strings, and the lower/upper endpoints are supplied separately. Verify the range yourself and update all related fields whenever the example changes.
The current counter rounds its displayed values to integers. If fractional values are essential, adapt the formatting before using it; do not assume a decimal input will remain visible with its original precision.
User reviews
—0 reviews
Select a star to share your experience.
No reviews yet. Ratings appear once readers share real experiences.