SHOWCASE · IMAGE GRID
Image Distortion
A 2×2 grid of textured planes. Hovering any plane lifts a custom shader uniform from 0 → 1; the vertex shader bumps the surface and the fragment shader ripples UVs around the cursor. Move across an image to chase the ripple.
Where it shows up: Awwwards portfolios, Cuberto, Locomotive case studies, Active Theory project tiles. The pattern reads as "this team works in WebGL" without being heavy-handed.
Implementation notes: plane geometry must have many segments (32×32 here) so the vertex shader has vertices to displace. The cursor uniform is set in onPointerMove using the event's uv property — the UV at the raycaster hit. Hover strength lerps toward 0/1 each frame so the transition is buttery rather than instant.
Variations: add color shift (RGB split) for chromatic aberration on hover; swap the displacement formula for simplex noise; chain into a page transition where the clicked image expands to fill the viewport.