Ripple engine

Every surface runs its own damped wave equation in a small ping-pong texture. The pointer stamps drops as it moves, a click stamps a heavy one, and the display pass reads the height field's gradient as a surface normal — bending the content's UVs, shading the slopes and pushing the mesh out along z. Three presets: tile-hover, full-bleed, drag-row.

01 tile-hover — hover a tile: it ripples, the others fade to grey. Scroll and the whole grid bows.

Northlight01 Slow Harbour02 Paper Field03 Iron Lantern04 Second Sun05 Quiet Machine06

02 full-bleed — one large surface; drag across it, click for a heavy drop

Touch the water and it answers.

03 drag-row — drag the row: it bows with the throw. Click a panel to open it, click again or press Esc to close.

Drag · click to open

Every artwork is generated on a canvas at runtime — no images, no network, works from file://. H toggles the panel.

The panel drives whichever preset is selected. Under prefers-reduced-motion — or without WebGL2 — the engine paints the plain artwork and never starts a loop.