CreatorMotion · Capacity with Anchored Callouts

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.
  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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

User reviews

—0 reviews

Select a star to share your experience.

No reviews yet. Ratings appear once readers share real experiences.

Similar Skills

View all skills