Explain a small hierarchy by pairing each pyramid tier with a nearby note. A stepped trapezoid silhouette builds from top to bottom; strong layer labels and aligned explanatory lines then make the levels readable together. This 6.8-second scene visualizes an order you supply, without ranking the content or representing quantitative shares through the shape.
What you get
A local generator, editable HyperFrames tier diagram and motion/review instructions for a 1920×1080, 30 fps segment. Generate the composition and render the explanation from your prepared labels and notes.
Up to four tiers, each with label and note. Array order places the first tier at the narrow top and later tiers below it; width changes are structural rather than data-driven. Tier heights share the available vertical space.
Shape entrances from 0.20 seconds, labels from 0.80 seconds and their side notes from 1.15 seconds. Each annotation has an aligned divider, and the complete hierarchy remains visible for the final reading.
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
Use the pyramid only when the vertical ordering helps explain a defensible hierarchy. State what the order means, and avoid letting a broad base or narrow top imply unsupported quantities or importance.
Good fit
A creator explaining an explicit hierarchy such as strategic direction, enabling systems and daily practices.
A short teaching passage where every level needs its own concise explanation rather than a list of nested child cards.
A series with consistent tier geometry, strong labels and readable side-note alignment.
Not for
Automatically ranking ideas, validating a hierarchy or presenting pyramid widths as measured proportions.
A statistical population pyramid, a quantitative funnel or more than four visible levels through the supplied input.
Automatic full-film editing, generated presenter footage or music, or copying another creator’s identity and materials.
How to use
You say/creatormotion-diagram-tier-pyramid Turn my supplied explanation into a white-yellow B-roll scene using the Tiered Pyramid Notes effect. Use the text, data and media I provide, and ask for any required input that is missing.
Prepare a nonempty tiers array with up to four label/note pairs. Order it from the narrow top toward the broad base. Define what higher and lower levels mean in your explanation; the implementation does not derive the hierarchy from text.
Keep labels brief and notes to short lines. More tiers reduce each layer’s height, and label sizing adapts to that height; inspect the side-note fit separately rather than assuming all text automatically scales to fit.
Do not assign a numerical interpretation to the tier areas unless you deliberately redesign the geometry for data. The first tier is dark, the second uses the accent and later tiers use the shared surface treatment; that styling follows position. No presenter, raster image or matte is required.
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 every label-to-note pairing, tier boundary and settled hierarchy in actual MP4 frames. Keep supporting text at least 24 px and check four-tier examples with your actual wording. Preserve the shaped hierarchy and adjacent notes rather than turning the tiers into unrelated rectangular cards.
Requirements and costs
You bring
tiers: 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. tiers contains label/note objects, with four palettes and semantic overrides. Tier geometry and tone assignment are based on position and visible count rather than separate numeric data inputs.
No. Editable vector tiers, labels and notes create this shot. Shared package media instructions do not add image or presenter requirements here.
Yes. Preserve tier construction, label reading and matching side-note reveals. Re-render after content/count changes and inspect boundary alignment and the final hold.
No. Widths form the stepped hierarchy by a fixed layout rule. No quantity field scales a tier to a measured share.
The current scene uses the first four tiers at most. A fifth visible level requires layout, typography and timing changes rather than an extra array entry alone.
User reviews
—0 reviews
Select a star to share your experience.
No reviews yet. Ratings appear once readers share real experiences.