Skip to main content
Level 3’s six-scene SaaS explainer ended on a cinematic-zoom into a pricing reveal — a transition doing the work a real number could. This chapter is how to put an actual animated chart or count-up stat in that reveal instead of just a camera move. Numbers and geography are the two subjects where “what data” and “how it moves” are separate decisions. The Data blocks give you a polished chart or map you feed values into; the count-up showcase blocks handle the odometer-and-flourish moment. Everything here plugs into the one-shot skeleton — the data goes in the “copy” slot, the block name in “technique.”

​
Charts: name the block, or hand-draw

There are two ways to get a chart, and the choice is about control:
  • Name data-chart to get the built animated bar + line chart — staggered reveal, value labels, NYT-style typography — and feed it your numbers. Fast, consistent, no design decisions.
  • Say “hand-draw everything — no chart library” to make the agent build the chart from inline SVG and GSAP instead. You give up the polish of the block for total control over shape, motion, and layout — a bar race that overtakes mid-animation, an arc that draws to match a counter, a layout no library ships.
Feed data inline or as a file. Small series go straight in the prompt; a CSV gets referenced and parsed at build time (keep it deterministic — no render-time fetches).
/motion-graphics 12-second 1920x1080 video. Title “Most-used languages” with the subtitle “share of respondents, 2026 survey”. Turn this into an animated bar chart with a staggered reveal and value labels counting up on each bar, each label suffixed %:
Use the data-chart registry block. No audio.
Rendered from the prompt above, unedited — labels count up while the next bar is already growing.
/motion-graphics 10-second 1920x1080 video, dark slate background. Title “Top languages 2026” top-left. Five horizontal bars (Python, TypeScript, Rust, Go, Java) grow from zero with staggered starts, overtaking each other twice mid-animation; each bar has a right-edge value label counting up to its final %. End state holds 2s, alive — the leader pulses once, timed to finish exactly on the last frame, never a frozen tail. Hand-author the marks (no chart library) and make them look hand-drawn: wobbly ink strokes, not clean rectangles. Say which two pairs overtake and when, or the reveal will land on a different number of crossings each run. No audio.
Rendered from the prompt above, unedited — hand-authored ink strokes, no chart library; ranks swap twice. State the block or opt out of it — don’t leave it implicit. “Animate this data” without a decision drifts between a generic block and an improvised layout.
  • ❌ animate this CSV as a chart
  • ✅ turn this CSV into an animated bar chart — use the data-chart registry block or …hand-draw everything, no chart library
Format numbers for the animation you asked for. An odometer count-up needs fixed digit columns; a $0 → $4.2M range forces an awkward $0.0M start.
  • ❌ counts from $0 to $4.2M
  • ✅ counts up to $4.2M

​
Count-up stats

For a single hero number, apple-money-count is the Apple-style finance counter — it rolls from $0, flashes green, and bursts money icons with sound. Name it when you want that exact flourish; hand-draw when you want a bare number in your own type.
/motion-graphics 6-second 1920x1080 video, dark navy background. Beat 1 (0-1s): label “ARR” fades up small, top-center. Beat 2 (1-4s): a giant number counts up to $4.2M with an odometer roll, easing out as it lands. Beat 3 (4-6s): “+312% YoY” stamps in below in green, then settles into a gentle ambient idle. Use the apple-money-count registry block as base. No narration.
Rendered from the prompt above, unedited.

​
Maps: match the ask to the map

Each map block answers a different geographic question. Say what the map is for and name the matching block: The US map encodings combine — asking to “shade states and draw flows between two cities” gets you one composition: the agent merges the blocks at source onto a shared projection so arcs land exactly on the choropleth’s states.
/motion-graphics 12-second 1920x1080 video. A US choropleth shades states by adoption rate with staggered reveals and a gradient legend, then connection arcs draw between San Francisco, Austin, and New York. Use the us-map and us-map-flow registry blocks. No audio.
Rendered from the prompt above, unedited.
The map blocks fetch their geo data from a CDN at runtime, which violates the deterministic-render rules — the agent bakes the projected geometry into the composition instead. You never need to ask for this; it’s part of building the map correctly.
Pick the encoding, don’t just say “map.” Choropleth (color), bubble (size), hex (equal weight), and flow (arcs) tell different stories from the same data.
  • ❌ put California's number on a US map
  • ✅ size each city as a proportional bubble → us-map-bubble, or shade each state by value → us-map
Name the region’s block. The choropleths are region-specific with baked-in projections (spain-map is D3 conic conformal, world-map is Natural Earth) — there’s no generic “any country” map.
  • ❌ a map of Spain's regions (leaves the projection and geography to chance)
  • ✅ use the spain-map registry block

​
Routes and flights

For a point-to-point journey — a route drawing across a map with a landing beat — nyc-paris-flight is the Apple-style flight animation: a plane flies New York → Paris with a marker circle, landing pop, and sound effects. Use it as the base and re-point the endpoints in your prompt.
/motion-graphics 6-second 1920x1080 video. A realistic map with a plane flying between two cities, a marker circle at the origin, and a landing pop at the destination. Use the nyc-paris-flight registry block as base — the route runs New York (JFK) → Paris (CDG), labelled at both ends. Keep the block’s own title card and route ticks. End on the settled map, not on the block’s white-out hand-off frame. No audio.
Rendered from the prompt above, unedited. A route is a flow with a vehicle, not a static arc. If you want the drawn arc without the plane and sound, that’s us-map-flow; if you want the journey performance, that’s nyc-paris-flight.
  • ❌ draw a line from NYC to Paris (ambiguous between arc-only and full flight)
  • ✅ a plane flies the route with a landing pop → nyc-paris-flight

​
Where to go next

Capstone thread — the Level 7 film’s Measure and Everywhere regions are this chapter end to end: data-chart bars rise from the timeline wire while the hero count lands, then the same wire becomes a great-circle arc over the world-map block’s real cloud render regions (cut from the film, below).
This is the clause in the full capstone prompt that buys the piece — prompt language you can lift for your own video:
Measure (14–21s). The wire becomes a chart baseline (same line, same thickness — no cut): adapt the data-chart registry block — six labeled bars rise from the wire itself on spoken cues while a hero numeral counts up beside them in huge tabular mono: 50+ CATALOG BLOCKS (the real registry count) […] Everywhere (21–28s). The wire arcs and the ground falls away: adapt the world-map registry block — the dotted world map scrolls beneath while the wire becomes a great-circle route arcing across it. Real render infrastructure, truthfully labeled: pulses light up at AWS and Google Cloud regions (US-EAST-1 · EU-WEST-1 · AP-SOUTH-1) with a “CLOUD RENDER · LAMBDA + CLOUD RUN” kicker […]
That clause, rendered — the region cut from the finished film. Next: Overlays and lower thirds — naming timed blocks that sit above your footage or scene, instead of ones that render the scene itself.