How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Grid: the section is split into 25 × 25 cells. Each cell stores an x/y offset in a small float texture, and the shader shifts the text inside each cell by 0.02 × that offset. Cells snap as whole blocks (nearest filtering), which gives the pixelated, tiled look.
- Push: cells within 25% of the grid around the cursor are pushed along the cursor's velocity, harder the closer they are (up to 10× at the centre, strength 0.1 × 100).
- Relax: every frame all offsets shrink to 92.5%, and the cursor velocity decays by 10%, so blocks slide home over about a second.
- Type: the headline stays in the DOM, so the layout, line breaks and font come from CSS. The script copies each word into the texture at its exact on-screen position and hides the DOM text only while WebGL is drawing it.
- Layout (demo): a full-width section with 32px sides and 64px below. The headline is 20vw, uppercase, line-height 0.85, with 32px padding, in the accent colour on a pale ground. A short statement and paragraph follow.
- Screens under 1000px and touch devices: the plain headline is shown with no effect, as in the original.
- Fallbacks: without WebGL, with reduced motion or with no JavaScript, the plain headline shows.