A scroll-driven story on a single unit chart. The same dots start as five regional clusters, gather into one field, then flow apart into six finish-time bars. Scroll back up to rewind. Not one dot is destroyed or created; they only rearrange.
The 600 finishers split into five clusters by home region: Africa, Europe, the Americas, Asia and Oceania. One dot is one runner.
The five clusters gather into a single packed field. The small Oceania group nests in the centre, the larger regions wrap around it.
The same finishers flow apart into six bars by finishing time, each dot travelling from its old spot and recolouring on the way. The four-hour pack towers over the fast and the slow.
Scroll the story, or use the beat dots and Prev/Next. Each beat is a saved view; scrolling back up reverses it.
chart.storyboard.bind({ beats, scroller }) pairs prose
elements with views; here scroller points the observer at the
story column, so a beat applies as its step crosses the middle of that panel
(IntersectionObserver, no scroll listeners) and re-applies in reverse on the
way up. Every beat's options payload sets
plotOptions.unit.transition: 'flow', which keys the dots by
global order: the SAME dot migrates (and recolours) from a regional cluster to
the packed field to a finish-time bar rather than fading out and back in.
Transitions are cut instead of animated under prefers-reduced-motion. The
unit chart is a premium type; without a license it renders with a trial
watermark. Needs the storyboard feature (bundles
perspectives).