Experiment 01Real-time graphics
Scroll-velocity flow field
What if a background reacted to how fast you scroll rather than just where you are?
Explore the experiment
Runs live in your browser on WebGL2
A WebGL2 context renders this live on your device. It is skipped entirely — no renderer is even downloaded — if your browser lacks WebGL2, if Save-Data is on, if you have asked for reduced motion, or on phones and tablets, where a continuous GPU load is a poor trade. You get a still gradient instead and the write-up below covers what it does.
How to use it
Scroll at different speeds — the field travels faster the faster you scroll, and drifts when you stop. Moving a pointer over the page adds a vortex where the cursor is; that part needs a pointing device, and the scroll response does not.
Look behind this page
The field is rendering behind the text, full-page. Scroll and it travels; stop and it drifts.
- While it loads
- The concept artwork above is visible immediately. The live field starts in the page background once the browser is idle.
- If your device declines it
- The concept artwork stays still. The live field is skipped on phones, with reduced motion or Save-Data enabled, and when WebGL2 is unavailable.
The idea
Most scroll-linked backgrounds map position to appearance: at 40% down the page, the effect is 40% along. That reads as a slideshow. Velocity is more interesting because it responds to intent — a reader skimming fast and a reader inching through the same section get different visuals.
How it works
Every point’s position is a pure function of its seed and a clock, computed in the vertex shader rather than integrated in a ping-pong texture. That is one shader instead of two passes and two render targets, it cannot drift or blow up, and it survives a tab switch with nothing to restore.
The flow itself is the curl of a two-octave value-noise field — the gradient rotated ninety degrees. Taking a perpendicular gradient makes the field divergence-free by construction, which is why points never bunch into sinks or thin out from sources. That is what keeps it reading as fluid rather than as drift.
Scroll speed is differentiated against the frame delta and smoothed, then used to accelerate the clock the field is sampled at — not the distance each point travels. That distinction is the whole trick. Because position is a pure function of the clock, scaling the travel distance instead would teleport every point the instant the value changed. Accelerating a clock that only ever moves forward speeds the field up and slows it down without a single jump.
Energy also reads as heat: faster points run pink, slower ones purple, so a quick scroll is visible even where the local flow happens to be slow.
The pointer is a second input, independent of scroll. It applies a swirl plus a gentle outward push that falls off exponentially with distance, so the field curls around the cursor without the whole frame reacting.
What it taught us
Smoothing matters more than the effect. The first version used raw velocity and felt broken, because scroll input is spiky and the visual jittered. The fix was entirely in the easing, not the shader.
Where this gets used
Websites
A Drasyo build is static-first: pages are generated ahead of time and served as HTML, so they load fast, work without JavaScript, and give crawlers and answer engines something to read on the first request rather than after a fetch.
More from the lab
Want something like this built?
Tell us what you are building and we will say whether this belongs in it.
Start a conversation