Introduce two dimensions, then position a small set of labeled objects on the map. Arrow-ended axes and their endpoint labels establish the space before item glyphs appear at coordinates you supply. This 6.4-second scene presents a positioning model; it does not score items, assign their regions or infer parent-child or causal relationships.
What you get
A local generator, editable HyperFrames map and motion/review instructions for a 1920×1080, 30 fps segment. Generate and render the scene using your own axis definitions and item positions.
horizontal and vertical endpoint label pairs, plus up to six items with label, x and y. Coordinates use the example’s normalized scale: x increases toward the right and y increases upward. Glyphs are assigned by position.
Axis drawing from 0.16 seconds, endpoint labels at 0.65 seconds and item entrances from 0.88 seconds at 0.36-second intervals. The completed map holds with all objects visible and without relationship connectors or automatic region selection.
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
Define the two dimensions before placing any item, and explain the basis for the positions. A polished map can make subjective choices look measured; keep the claimed precision consistent with the actual coordinate model and divider geometry.
Good fit
A creator explaining how a small set of options differs along two clearly defined continuous dimensions.
A teaching passage needing a spatial model whose axes and positions can be explained separately.
A series with consistent axis meanings, coordinate conventions and item typography.
Not for
Automatically rating options, finding the best quadrant or validating that supplied positions represent measured evidence.
A precise quantitative scatterplot with calibrated ticks, Euclidean distance interpretation or automatically collision-free placement.
Automatic full-film editing, generated presenter footage or music, or copying another creator’s identity and materials.
How to use
You say/creatormotion-diagram-quadrant-positioning Turn my supplied explanation into a white-yellow B-roll scene using the Quadrant Positioning effect. Use the text, data and media I provide, and ask for any required input that is missing.
Define horizontal as [leftMeaning,rightMeaning] and vertical as [bottomMeaning,topMeaning]. Prepare up to six labeled items with numeric x/y positions, using the normalized zero-to-one range illustrated by the package. Keep the same definitions when comparing versions of a map.
Choose positions from an explicit rationale and distinguish measured data from subjective judgement. The code applies the supplied coordinates directly without clamping or classification. Do not change positions merely to improve label spacing or make an option look stronger.
Keep labels short and inspect the full object footprint near axes and plot edges. The drawn horizontal divider is not at y=0.5 under the current coordinate mapping, so do not assume the visible cross is an exact half-scale threshold. No presenter, raster image or matte is needed.
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. Check every label and coordinate placement in actual MP4 frames. Inspect overlaps and glyph meanings, since icons follow input order rather than item semantics. Keep supporting text at least 24 px and preserve separate axis/label/item reading beats. Explain quantitative thresholds separately if the application requires them.
Requirements and costs
You bring
horizontal: provide your own content or retain the illustrative default. · vertical: provide your own content or retain the illustrative default. · items: 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. Axis endpoint labels and item label/x/y fields are JSON inputs, with four palettes and semantic overrides. The functional glyph sequence and plotting geometry are part of the scene.
No. Editable axes, glyphs and labels construct this shot. Generic image/presenter guidance does not require those media here.
Yes. Keep axes and dimension labels legible before the item comparison. Re-render after changes and preserve actual data positions rather than rearranging items for dramatic effect.
No. You supply coordinates and their meaning. The scene does not evaluate the items, verify a rating or choose a region.
Not exactly in the current implementation. The vertical divider corresponds to x=0.5, but the horizontal line is at about y=0.405. Treat it as an explanatory positioning layout unless you deliberately calibrate the geometry for quantitative thresholds.
User reviews
—0 reviews
Select a star to share your experience.
No reviews yet. Ratings appear once readers share real experiences.