Show one query alongside several result channels. Words appear in a shared search capsule, then each channel heading and tall result image reveal beneath it. The nine-second composition keeps the common input visible while viewers compare supplied screens; it does not perform a search or retrieve results.
What you get
A local generator, editable HyperFrames effect and motion/review instructions. Generate the 1920×1080 project and render a 30 fps shared-query comparison segment.
Editable query and screens with label/image keys. Default article-results, video-results and community-results raster slots match the illustrative creative workshop query.
Discrete word appearances from 0.55 seconds at 0.18-second spacing, then headings from 2 seconds and individual downward screen reveals from 2.20 seconds. The final row holds without a winning-result selection.
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
Treat the shared query as a claim about the screenshots. If they came from different dates, settings or inputs, explain that context instead of letting one search capsule imply a controlled comparison.
Good fit
A creator comparing prepared views of the same search context across a small number of channels.
A short teaching passage with one concise query and clear channel labels.
A recurring series using consistent shared-input, screen geometry and typography.
Not for
A real search interface, live query execution, result retrieval or automatic screenshot capture.
Changing the displayed query while leaving unrelated screenshots beneath it, or implying generated default screens are actual current search results.
Automatic full-film editing, generated presenter performances or soundtrack, or copying a reference creator’s identity and materials.
How to use
You say/creatormotion-comparison-query-screens Turn my supplied explanation into a white-yellow B-roll scene using the One Query Multiple Screens effect. Use the text, data and media I provide, and ask for any required input that is missing.
Prepare query and screens with channel label and valid image key. The default query and images both show creative workshop; replace the screenshots when presenting another actual search context.
Map article-results, video-results and community-results or your custom keys through --images. Paths resolve beside the map and unlisted slots retain defaults. Despite earlier guide wording, requiredImage is used for each screen: missing screenshots do not fall back to editable result diagrams.
Keep the query short enough to finish before the fixed screen entrances. Typing is a word-by-word visibility sequence, not keyboard interaction; long queries may still be appearing when screens enter. The authored three-channel row narrows as you add more screens, so inspect fit. No presenter video or matte is used.
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. Read the query and labels, check each screen’s top-aligned crop and confirm all images actually belong to the same stated input. If a detail matters, show it large enough elsewhere rather than relying on a small full-page image.
Requirements and costs
You bring
query: provide your own content or retain the illustrative default. · screens: 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. query and screen labels/image keys are JSON controls, with palettes and semantic overrides. Changing query text does not change the content inside raster screenshots.
No presenter take is used. Bundled illustrative screens are available, but each screen requires a resolvable image key; use your own screenshots for a real comparison. No matte is needed.
Yes. Preserve a common query, channel headings and complete result-screen reveals. The final implementation uses individual downward masks rather than the older guide’s whole-row scale move.
No. It only animates supplied text and images. Capture or prepare matching results separately and verify their context before using them.
No. The scene presents channels under a common input without selection or ranking logic. Explain any assessment yourself and support it with visible details.
User reviews
—0 reviews
Select a star to share your experience.
No reviews yet. Ratings appear once readers share real experiences.