Water Ripples
Real water: the pointer dents a simulated surface and the ripples bend what is behind them, rather than drawing rings on top.
cursorwaterripplewebglshaderinteractiveheromust-haveportfolio
Note
The difference from Cursor Ripples is refraction. A height field runs on the GPU across two float textures, and the draw pass offsets its lookup into the source by the slope of the surface — so the thing underneath genuinely warps. The cost is that it can only bend a texture: give it an image, or it generates a backdrop. It cannot refract live DOM, which is why the drawn version still exists for use over app content. Needs WebGL2 with float render targets; without them it renders nothing rather than something broken.