How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Media: a video (muted, looping, inline) or a photo, cropped to cover the whole section like object-fit: cover.
- 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 footage inside each cell by 0.02 × that offset. Cells move as whole blocks (nearest filtering), which gives the stepped, pixelated 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 the blocks slide home within about a second.
- Headline: 112px uppercase (line-height 0.9) in the accent colour, centred, 85% of the width with 32px padding. It stays in the DOM above the footage and ignores the cursor.
- Footer: two 20px labels along the bottom with 32px padding. The left one has its parts 16px apart, and the right one is bracketed.
- Under 1000px and on touch devices: the plain media shows with no effect. The headline is 56px and full width, the labels are 18px, and the padding and gaps halve.
- Fallbacks: without WebGL, with reduced motion or with no JavaScript, the plain media shows.