Donut chart — Remotion prompt (centre KPI + legend)

<direction> A 9-second donut chart film for a traffic-share breakdown, data-driven from Direct 42 · Search 27 · Social 18 · Referral 13, with the centre KPI 128K labelled VISITS. House style: background #0a0a0a, white type, exactly ONE orange accent #ff5c1a (used only on the largest segment, its legend value and the kicker), Arial/Helvetica bold, no webfonts. The kicker reads "TRAFFIC SHARE — 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 or bevelled rings, pie-slice explosions, rainbow palettes, any second accent colour, webfonts, fade-everything-polite animation. </direction> <structure> 0.0-1.0s: kicker and headline spring in at top-left. 0.9-4.7s: an SVG donut (stroke-based ring segments) sweeps in segment by segment, clockwise from 12 o'clock, in data order, largest segment in the orange accent, the rest white and greys, with a small gap between segments. 1.5-4.7s: the centre KPI counts up from 0 to the centre value while the ring sweeps; the centre label sits under it in spaced capitals. 3.2-6.0s: legend rows build in on the right, staggered — colour chip, segment name, and percentage. Percentages are computed from the segment values and must sum to exactly 100. 6.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 centre value and label arrive as separate strings. Segment arc lengths are computed from the parsed values (each value divided by the total, times the ring circumference) and drawn with stroke-dasharray / stroke-dashoffset — never hard-code angles, lengths or percentages. The centre count-up parses the number out of the centre value string and keeps its suffix (e.g. "K"). Animation uses springs and clamped interpolation only; every frame is a pure function of the frame number. </build> <gotchas> - Percentages in the legend must be recomputed from the same parsed values as the arcs, and must sum to 100 — if the legend and the ring disagree, the film is wrong. - Start the ring at 12 o'clock (rotate -90 degrees) and sweep clockwise; a ring that starts at 3 o'clock reads as a bug. - Leave a small gap between segments, but never let a gap eat a whole small segment — clamp segment length at zero, not below. - Only the largest segment gets the accent colour; if two segments tie, the first one in data order wins. - The centre number must finish counting at the same moment the sweep finishes, not after it. </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.