A scrollytelling story on a single live chart. Scroll the panel below and the same twelve columns recolor, annotate, and finally reshape; scrolling back up rewinds the story.
Fiscal 2025, month by month: 341 k$ across twelve columns. A slow start and a strong finish, with two turning points hiding in plain sight.
A bad deploy took sign-ups offline for two days, and March is the only month that broke the climb. The spotlight narrows.
The hinge of the year. From May on, every month tops the last, and the slope never looks back.
Same columns, new grouping. Each quarter beats the last by half again or more: 35 k$ in Q1 grows to 157 k$ by Q4.
The twelve months curl into a ring, each column becoming its own slice. The quarter colors survive the change of shape.
chart.storyboard.bind({ beats, scroller }) pairs prose elements
with views; here scroller points the observer at the scroll
panel, so beats apply as their step crosses the middle of that panel
(IntersectionObserver, no scroll listeners) and re-apply in reverse on the
way up. The design rule that keeps every transition smooth: all five beats
keep the same twelve marks. Emphasis moves by color (spotlights,
quarter groups) and annotations, never by cropping or re-binning, so nothing
pops in or out. The finale's options payload swaps
chart.type, and the morph feature curls each column
into its own donut slice, a one-to-one morph. The dots call
chart.storyboard.goTo(i), each beat announces itself to the
aria-live region, and beatChange drives the step highlight.
Transitions are cut instead of animated under prefers-reduced-motion. Needs
the storyboard feature (bundles perspectives).