Guide viewers through two sets of statements without asking them to read both at once. A highlight scans the first illustrated board, then a second board arrives and takes over the reading focus while the first remains visible at lower contrast. This ten-second scene suits a compact before/after explanation whose row labels and pictures you have already chosen.
What you get
A local generator, editable HyperFrames comparison scene and documented motion/review instructions. Render your own segment from the generated project; it does not discover differences or produce a complete edited film.
Two cards with a title and row strings, plus rowDuration for the interval between highlight moves. Each row includes an ordinal, a square raster image and its statement.
An initial board scan, a second-board entrance at four seconds and a handoff that dims the first board. The second highlight starts at 4.60 seconds; both boards remain together for the ending.
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
Write each row as a statement the viewer can understand during one highlight interval. Match imagery to that statement, then rehearse the handoff with your narration; reducing two unrelated lists to “before” and “after” does not make a fair comparison.
Good fit
A creator explaining a small before/after change using corresponding statements and relevant row images.
A short teaching passage where guiding attention row by row is more helpful than revealing an entire comparison at once.
A series with consistent board layouts, image crops, typography and paced narration.
Not for
Automatic comparison of two documents, factual verification of an improvement, or generation of the row statements from source evidence.
Long paragraphs, many rows, or narration that needs a slower scan than the fixed handoff and ten-second timeline allow without editing.
Automatic full-film editing, missing presenter performances or soundtrack generation, or copying a creator’s identity and imagery.
How to use
You say/creatormotion-comparison-row-focus-cards Turn my supplied explanation into a white-yellow B-roll scene using the Row Focus Cards effect. Use the text, data and media I provide, and ask for any required input that is missing.
Prepare exactly two cards with titles and concise rows. Keep the relationship between the boards explicit: matching row order helps a before/after argument, while the animation itself does not establish that one state is better.
Use the bundled before-row-1 through before-row-3 and after-row-1 through after-row-3 raster defaults for the example, or replace named slots through --images MAP.json. Relative image paths resolve beside that map. Unnamed defaults remain available; added rows require corresponding extra image keys because every row calls the required-image helper. Review the square crop and ensure pictures support your statements.
Choose a positive rowDuration and check both scan schedules. The first board moves between rows from one second, the second from 4.80 seconds; the second board still enters at four seconds. Longer dwell or extra rows do not move that handoff automatically. Extend and review the timeline if either scan cannot finish with a reading hold.
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.
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. Inspect the first board after dimming, each image/text pairing and the active highlight alignment. Presenter video and an alpha matte are not part of this effect. If replacing imagery, follow the image policy and use your own or appropriately supplied material rather than treating illustrative defaults as proof.
Requirements and costs
You bring
cards: provide your own content or retain the illustrative default. · rowDuration: 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. cards and rowDuration are JSON inputs, while four palettes and optional semantic overrides control appearance. Replace the named raster slots separately when the sample pictures do not match your story.
No presenter clip is needed. Row images are required, but the six default image slots are supplied for the example. Replacements are optional for existing slots; new row positions need their own image mappings.
Yes. Preserve the first scan, second-board entrance and focus handoff. rowDuration changes the spacing between highlight moves, not the four-second board entrance or overall duration; inspect those relationships after editing.
Only with a layout, image and timing review. Rows have a fixed vertical pitch, the illustration keys are position-based, and the default scan schedule is not an automatic fit-to-content system.
No. You supply the statements and choose the visuals. The paired boards organize your explanation without verifying the claimed change.
User reviews
—0 reviews
Select a star to share your experience.
No reviews yet. Ratings appear once readers share real experiences.