Technique study / round 1

The page scrolls. The scene listens.

Everything you read here is plain HTML. Behind it, one WebGL scene is driven by a single number: how far down the page you are.

01 / One number

Scroll progress is the input.

A smooth-scroll library eases the raw wheel input. Each frame, its scroll position is turned into a value from 0 to 1 and handed to the scene.

02 / Shader

The shape bends with it.

That value goes into a vertex shader as a uniform. The surface ripples, the colors shift, and the camera drifts along a short path.

03 / Separation

Text stays text.

Selectable, searchable, readable by a screen reader. The canvas is decoration, so it is hidden from assistive tech and the page still works without it.

04 / Cost

It is not free.

A full-screen canvas redraws every frame while you scroll. The notes that come with this demo list what we measured and what we did not.