Introduce two package quotes in a readable sequence. A slider handle and amount counter move together from each package’s minimum to its supplied selected amount, then inclusion lines appear. Both final states remain for comparison. This eleven-second effect animates preset quotes; it is not an interactive pricing or checkout tool.
What you get
A local generator, editable HyperFrames effect and motion/review guidance. Generate a 1920×1080 project and render a 30 fps two-package quote segment.
Two packages with name, [minimum,maximum] range, selected amount and includes strings, plus currency prefix. Handle position derives from the selected amount’s fraction through its own range.
First package entrance from 0.50 seconds and second from 4.50 seconds. Each handle/counter travels over 1.5 seconds, with its inclusion list following at short reading intervals before the final paired hold.
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 keep a fine static grid. Bundled local fonts include 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. Inspect wrapping after changes.
Before you choose
Explain the offer before the slider. The same handle position can represent different amounts on the two ranges, so use the printed prices and inclusions for the comparison rather than implying a shared quantitative scale.
Good fit
A creator explaining two prepared package offers or illustrative quote ranges.
A short lesson with concise package names, a few inclusions and clearly defined amounts.
A series using consistent slider/amount hierarchy, palette and typography.
Not for
User-driven quote calculation, checkout, automatically changing inclusions by price or verifying a commercial offer.
A shared absolute price scale across both cards. Each handle uses its own minimum/maximum range, so similar positions need not mean similar amounts.
Automatic full-film editing, generated presenter performance or music, or copying a reference creator’s identity and materials.
How to use
You say/creatormotion-comparison-quote-sliders Turn my supplied explanation into a white-yellow B-roll scene using the Quote Sliders effect. Use the text, data and media I provide, and ask for any required input that is missing.
Prepare exactly two packages with nonzero ordered ranges, selected amounts within those ranges and short includes lists. Currency is a display prefix, not currency conversion. Verify the quoted amounts and inclusions yourself.
Check the positional labels: the first card is hard-coded ONE TIME and the second ONGOING. Change the implementation if those billing assumptions do not match your offers. The selected amount drives the handle fraction and counter; inclusions are independent strings revealed by time, not unlocked by the chosen amount.
Read the motion specification and keep the lists short enough for the fixed card height and eleven-second timeline. Monetary formatting uses whole amounts by default, so adapt it if cents matter. No presenter take, matte or raster image is required.
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 materials.
Lint, validate and inspect the generated HyperFrames project, then render at 1920×1080 and 30 fps using the pinned CLI. Review actual MP4 frames at entry, each change and final hold for bounds, contrast and correct labels. Preserve at least 1.2 seconds of final reading time when editing and check all palettes with identical content after module changes. Narration, music and film assembly remain separate work. Compare each minimum, maximum, selected amount and handle endpoint, then read both inclusion lists. Inspect intermediate travel alignment and final quote precision rather than judging only the completed card.
Requirements and costs
You bring
packages: provide your own content or retain the illustrative default. · currency: 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. packages and currency are supplied through JSON, with palettes and semantic overrides. Fixed ONE TIME/ONGOING labels require code edits when the billing context differs.
No. This scene uses editable package text, tracks and handles, with no active raster or presenter slot. Generic media instructions do not add a matte requirement.
Yes. Preserve first-package amount travel and inclusions before the second package sequence, followed by a complete comparison hold. Re-render after changing the ranges or list lengths.
No. The timeline animates from minimum to the preset selected amount. There is no pointer interaction, live price calculation or purchase flow.
No. They are supplied text revealed on a fixed schedule. Update them yourself if an offer changes, and verify whole-number display formatting against your intended price precision.
User reviews
—0 reviews
Select a star to share your experience.
No reviews yet. Ratings appear once readers share real experiences.