01 / Intent
A thousand dots, waiting.
The canvas is fixed. The scroll track is the only thing moving. Native scroll position becomes the animation clock, and every particle already knows where it is going next.
02 / Routes
The cloud gathers into paths.
Each particle has a precomputed target position for this frame. No physics, no simulation. Just math, typed arrays, and a GPU that handles the rest.
03 / Data
Structure emerges from the same buffer.
The identical position array that held atmospheric scatter now holds a grid. The DOM never touched a single point. Three.js just got told the numbers changed.
04 / Motion
Scroll is already a timeline.
No animation library required. Progress is one normalized float from zero to one, read straight from the element's bounding rect and scrubbed into the scene every frame.
05 / Compose
The spectacle and the content stay separate.
HTML panels sit above the WebGL layer, fully accessible and independently styled. The particles do the atmosphere. Your words do the work.