All studies13 / 74
WebGL
Velocity bend
Case-study covers that bow slightly and split their colour vertically when the list is scrolled fast, then settle flat and sharp at rest.
Where it earns its place
A work or portfolio index where covers should feel physical under a flick, without giving up real images, layout or SEO.
What we changed
- Kept the two ideas that make it restrained: the bend is driven by scroll velocity, not position, and the colour split runs only along the direction of travel.
- Kept real images in the DOM: each WebGL plane is pinned to its <img> every frame, and the image is what shows under reduced motion or before WebGL is ready.
- Velocity is read from the example's own scroll container instead of the window, and rendering is on demand, so the canvas costs nothing while the list is still.
- Flipped the bend so the middle lags the edges like a sheet in air, matched the plane's corner to the image's, and painted Kinetiq case-study covers in place of stock media.