← All videos

1280×720 · 16:9 landscape Remotion Remotion + React

Run log

ModelClaude (agent build)
Renderer / stackRemotion + React
Iterations to final1
Render time32s wall
Format1280×720 · 16:9 landscape
Published2026-10-29

What broke (and the fix)

  • Nothing broke — clean first pass. Stills at 30/70/100% verified one shared baseline, bottom-series-first stacking in legend order, and totals landing exactly on 60, 75, 78 and 95.
Original prompt Tested

Stacked bar chart — Remotion prompt (category segments + legend)

by MotionPrompts (own run)
Charts

Prompt

Banned list —Beat grid —Build method —Self-review —
<direction> A 9-second stacked bar chart film, data-driven from Q1 · Q2 · Q3 · Q4 and New: 30,42,38,55; Returning: 22,26,31,34; Churned: 8,7,9,6. House style: background #0a0a0a, white type, exactly ONE orange accent #ff5c1a (the first series only — its legend chip and its bar segments), Arial/Helvetica bold, no webfonts. The kicker reads "SIGNUPS BY QUARTER — SAMPLE DATA" and a footer states all figures are sample data — every number on screen is fictional sample data. Banned: gradients, glows, drop shadows, 3D bars, grouped side-by-side bars, per-bar baselines, rainbow palettes, any second accent colour, webfonts. </direction> <structure> 0.0-1.0s: kicker and headline spring in; the legend builds across the top — one chip per series, in series order, first series in the orange accent, the rest light and dark greys. 1.1-5.6s: the bars grow segment by segment from ONE shared baseline, bottom series first, bars staggered left to right. Every segment height comes from the same single scale (value divided by the largest bar total). As each stack completes: that bar's total counts in above the bar and settles. 5.6-9.0s: hold the finished chart with category labels under the baseline, perfectly still. </structure> <build> A Remotion composition, 1280x720, 30fps, 270 frames. All data is parsed from the data strings at render time: categories arrive as "Q1 · Q2 · Q3 · Q4" and series arrive as "Name: v,v,v,v; Name: v,v,v,v; ...". Bar totals, segment heights and the shared scale are all computed from the parsed values — never hard-code a total or a pixel height. Segments are positioned by cumulative offset from the shared baseline, and the total label counts up only once its own stack has finished growing. Animation uses springs and clamped interpolation only; every frame is a pure function of the frame number. </build> <gotchas> - One baseline, one scale: if any bar is scaled to its own maximum, the comparison lies. Derive every height from the single largest total. - Stack order must match legend order, bottom series first — a legend that reads top-down against a stack that reads bottom-up confuses everyone. - Count each bar's total in only after its last segment lands; a total floating over a half-grown bar looks like a rendering bug. - Leave headroom above the tallest bar for its total label — the label must never touch the headline or the legend. - Segment colours are positional (series index), never per-bar; the accent belongs to the first series in every bar. </gotchas> Before you finish: step through the timeline at five points and fix anything that overlaps, clips the frame, or drifts off the beat grid.

Use this prompt

One baseline and one scale are stated three times in this prompt — direction, structure and gotchas — because per-bar scaling is the silent lie stacked charts tell. The run landed the computed totals (60, 75, 78, 95) exactly, with each total counting in only after its stack finished.

Related videos

Product UI morph — one shape, many states
Product UI morph — one shape, many states
HyperFrames·Square Tested
Remotion data prompt — CSV to animated bar chart
Remotion data prompt — CSV to animated bar chart
Remotion·Landscape Tested
Remotion bar race prompt — rankings over time
Remotion bar race prompt — rankings over time
Remotion·Landscape Tested
Remotion count-up stats prompt — number story
Remotion count-up stats prompt — number story
Remotion·Square Tested