Interactive Scroll Explainer

What this builds

A scrollytelling explainer article where the narrative advances via scroll (pinned sections, progressive reveals, act structure) but the reader can also manipulate variables that change a persistent visualization in real time. This is the format used by the NYT Visual Investigations team, Pudding.cool, and the best product documentation pages: scroll provides pacing and narrative, but interactivity provides understanding.

• A persistent visualization canvas (chart, diagram, simulation, or code output) that stays pinned while explanatory text scrolls beside or beneath it
• User-controllable variables (sliders, toggles, preset buttons) embedded in the scroll flow
• Scroll-driven narrative acts that update the visualization state (zoom level, highlighted data, visible layers)
• User-driven exploration that overrides scroll state when the user interacts, then yields back to scroll when they continue scrolling
• A state machine that mediates between scroll-driven updates and user-driven updates
• Mobile fallback: interactive controls work on touch, visualization scales or simplifies