In-view trigger / linear width transition / rAF readout
KAKI OBSERVATION / 01
100%EDITORIAL DIAGRAM / NOT A SOURCE SCREENSHOT
Third-party inspiration. Kaki inspected the supplied Cursor Composer web archive to understand the interaction. The diagrams, sample distribution, and live reconstruction here are original Kaki material.
No source download or redistribution right is claimed. The archive remains research evidence and is not published with this record.
Kaki reconstruction / Live
Watch it fill. Then watch it again.
The sequence starts once the chart is 35% in view, as the source does. The figures are an illustrative Kaki sample distribution, not the source’s data and not a measurement of anything.
Sourcereading
0%
Reconstruction
0%
Record, rights,and copy
0%
Illustrative sample distribution for one curated Kaki record — source reading 7.5%, reconstruction 12.5%, record, rights, and copy 80%. Not a measurement.
Kaki addition — the source plays once, on first entering view, and offers no way back.
Behavior verified in the supplied Cursor Composer archive · Kaki-authored chart, sample data, and replay control · still bars on reduced motion
Observed interaction / 03
A proportion, told in order.
These diagrams describe the source mechanism without reproducing its screenshots, figures, page copy, or bundled application code.
KAKI OBSERVATION / 01
100%EDITORIAL DIAGRAM / NOT A SOURCE SCREENSHOT
01 / One bar, broken onto three rowsEach segment keeps the offset it would have held inside a single stacked bar, so a lopsided split stays readable without three colours competing in one strip.
KAKI OBSERVATION / 02
PACEEDITORIAL DIAGRAM / NOT A SOURCE SCREENSHOT
02 / Length sets the paceA bar's duration is derived from its own value — a fixed base plus a per-percent increment — so the long bar takes longer than the short ones without taking proportionally longer.
KAKI OBSERVATION / 03
READOUTEDITORIAL DIAGRAM / NOT A SOURCE SCREENSHOT
03 / The number is the barThe readout is not a separate count-up: it reports the same elapsed fraction over the same duration, and the dominant bar carries its value inside itself because it reaches the plot edge.
Why it is here
Motion that reports itself.
Most animated charts decorate a number that was already decided. Here the width transition and the counting label are two readings of one clock, so the figure cannot arrive before the bar that earns it. The staggered entry then does the editorial work: the three parts are read in order rather than compared all at once.
The chart earns its motion twice: breaking one stacked bar onto separate rows makes a lopsided split readable, and tying each bar's duration to its own length keeps a long bar from feeling slow while the number inside it stays honest to the width.
User-supplied Safari web archive of cursor.com/composer, including the rendered figure and its component source
Observed behavior
A once-only 35% in-view trigger; three rows carrying the offsets of a single stacked bar over a ten-step ruled plot; a linear width transition per bar staggered 360ms apart, each lasting a base 240ms plus 16ms per percent; a value label that rises a quarter-rem and fades in over 500ms starting 200ms into its bar; and a requestAnimationFrame readout reporting the same elapsed fraction, sitting inside the highlighted bar and outside the others
Kaki treatment
Kaki-authored reconstruction of the observed chart behavior using an illustrative Kaki sample distribution, original labels, editorial copy, layout, palette, and code, plus a replay control the source does not have. The supplied archive informed the behavior; no Cursor figure, value, screenshot, page copy, class name, media, or bundled source is republished.
Rights boundary
No redistribution license identified. Kaki presents an attributed motion study and original reconstruction only.
Reviewed
August 5, 2026
Continue looking
Related motion studies.
KAKI OBSERVATION / 01
CONTENTSEDITORIAL DIAGRAM / NOT A SOURCE SCREENSHOT
K–INSP–005 · Inspiration
Cursor Section Index Dot
A sticky page index whose single accent mark springs diagonally to the end of the current section label.