Explain a difference in retained information using two bounded stores. Rows accumulate inside a short container and a taller one, then two outside notes draw attention to the larger store. This 6.8-second scene uses an illustrative capacity metaphor; it does not measure storage, test a product’s memory or establish a numerical capacity ratio.
What you get
A local generator, editable HyperFrames comparison and motion/review instructions for a 1920×1080, 30 fps shot. Generate the scene from your own content, then render the video segment.
leftTitle, rightTitle, rows and callouts inputs. Both stores draw from the same row list: the left displays the first three rows, while the right can display the first seven. Up to two callouts annotate the larger store.
Fixed unequal container outlines, sequential row entrances from 0.32 seconds, and outside leader/label reveals from 2.60 seconds. The two stores remain side by side for the final reading; they are not a sequence of replacement cards.
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
Put genuinely shared information at the start of the row list, and explain what the additional rows represent. The diagram can clarify a retention model, but the container sizes should not become an unsupported benchmark.
Good fit
A creator illustrating how one workflow keeps only a short list while another retains a broader set of information.
A compact teaching passage needing visible internal rows followed by anchored interpretation.
A series using consistent storage metaphors, row typography and short explanatory notes.
Not for
Benchmarking actual storage limits, measuring bytes or token capacity, or proving a system remembers the information shown.
Independently authored left and right datasets, arbitrary row-targeted annotations or a live memory dashboard through the current inputs.
Automatic full-film editing, generated presenter performances or music, or copying another creator’s identity and source materials.
How to use
You say/creatormotion-diagram-capacity-callouts Turn my supplied explanation into a white-yellow B-roll scene using the Capacity with Anchored Callouts effect. Use the text, data and media I provide, and ask for any required input that is missing.
Write leftTitle and rightTitle to identify the compared concepts, then prepare concise rows. The left shows the first three items from that same list; put shared baseline information first and additional information afterward. The larger list is limited to seven displayed rows.
Supply up to two short callouts and verify their placement against your actual rows. Their leader anchors are fixed at two heights on the right-hand container; there is no row-index field that automatically reconnects them after reordering.
Explain the metaphor honestly. Container heights and row limits are design constants, not values calculated from a measured storage metric. Keep the comparison about the specified information and avoid implying a product capability you have not verified. No footage, matte or raster image is used.
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 both list prefixes, each annotation anchor and the larger store’s final fit. Keep labels concise and supporting text at least 24 px on the documented canvas. Check the MP4 rather than treating a successful generation command as approval of the visual relationship.
Requirements and costs
You bring
leftTitle: provide your own content or retain the illustrative default. · rightTitle: provide your own content or retain the illustrative default. · rows: provide your own content or retain the illustrative default. · callouts: 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. Titles, the shared row list and the two callouts are JSON inputs, with palettes and semantic overrides for appearance. Container dimensions and callout anchor positions are part of the scene code.
No. This implementation draws editable containers, row text and leader lines. Shared image/presenter guidance does not add those media requirements here.
Yes. Preserve unequal accumulation inside the two containers before the outside explanations. Review the fixed row pitch and annotation positions after changing text or geometry.
The current inputs use one rows array. The left takes its first three entries and the right its first seven; independent datasets require a scene change.
No. Its height and item allowance are preset visual choices. Supply supporting evidence separately if your explanation makes a factual claim about capacity or retention.
User reviews
—0 reviews
Select a star to share your experience.
No reviews yet. Ratings appear once readers share real experiences.