← All videos

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

Run log

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

What broke (and the fix)

  • First still pass caught the classic failure of this format: the 'Support 21%' callout label ran off the left edge of the frame (its label box started at x=-49). Fixed before any full render by moving the pie centre from x=470 to x=560 and clamping every label box inside the frame, then re-stilled at 70% and 100% — all four labels fully in frame, no overlaps. The full render itself then ran clean on the first pass.
Original prompt Tested

Pie chart callouts — Remotion prompt (leader-line labels)

by MotionPrompts (own run)
Charts

Prompt

Banned list —Beat grid —Build method —Self-review —
<direction> A 9-second pie chart film with leader-line callout labels, titled REVENUE MIX — SAMPLE DATA, data-driven from Product 38 · Services 29 · Support 21 · Other 12. House style: background #0a0a0a, white type, exactly ONE orange accent #ff5c1a (the largest slice and its percentage only), Arial/Helvetica bold, no webfonts. The title sits top-left and includes the words SAMPLE DATA; the footer reads "ILLUSTRATIVE SAMPLE DATA". Every number on screen is fictional sample data. Banned: gradients, glows, drop shadows, 3D tilt or bevelled slices, exploded slices, rainbow palettes, labels placed inside slices, any second accent colour, webfonts. </direction> <structure> 0.0-1.0s: the chart title and headline spring in at top-left. 1.0-4.5s: the pie grows with one animated sweep — a single reveal angle travels clockwise from 12 o'clock and uncovers each slice in data order; the largest slice is the orange accent, the rest white and greys, with thin dark separators between slices. 5.0-7.0s: after the slices land, leader lines draw out from each slice's mid-angle — a dot on the rim, a diagonal to an elbow, then a short horizontal — and a "Name NN%" label fades in at the end of each line. Labels sit on both sides of the pie and never overlap each other or the frame edge. 7.0-9.0s: hold the finished chart, perfectly still. </structure> <build> A Remotion composition, 1280x720, 30fps, 270 frames. All data is parsed from the data string at render time: segments arrive as "Name value · Name value · ..." and the title as a separate string. Slice paths are computed per frame from an animated reveal angle: for each frame, convert the reveal angle and each slice's start/end angles (derived from the parsed values, never hard-coded) into SVG arc paths. Leader-line endpoints and label positions are computed from each slice's mid-angle, with labels clamped inside the 1280x720 frame. Animation uses springs and clamped interpolation only; every frame is a pure function of the frame number. </build> <gotchas> - Label collision is the classic failure of this format: check the final frame hard. Labels on the same side must be vertically separated, and no label box may start before x=0 or end after x=1280 — clamp label positions into the frame. - Place labels from the slice mid-angle, not the slice start; a line that points at the wrong slice is worse than no line. - Draw leader lines only after the sweep completes — lines chasing a moving rim look broken. - Percentages are computed from the parsed values and must sum to exactly 100. - Keep the label text outside the pie at all times; never let a long name ride over a slice. </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

The prompt treats label placement as a computed layout problem — mid-angle anchors plus frame clamping — because freehand callouts are where pie films fall apart. That rule exists because the first still pass here clipped a label off the left edge; the fix is baked into both the film and the prompt.

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