Drag Curve Row

An endless row of panels that bends with how hard you throw it. The row's per-frame travel drives a sin(v · π) displacement across a 64×64 mesh, so the panels bow like a strip of film; the cursor drops into a small water simulation that ripples and refracts the artwork; a click lifts one panel to fill the frame with its corners lagging behind the centre. No WebGL2? The same row runs on DOM and CSS — drag and expand keep working.

drag · flick · click a panel renderer: …

Engine: DragCurveRow.init(el, { panels }) → next() / prev() / goTo(i) / expand(i) / collapse() / set() / refresh() / destroy(). Panels can be any canvas or image; the seven here are painted with 2D canvas at load — no files, no network. The row pauses when it scrolls off screen or the tab is hidden, and it rebuilds its GPU resources if the browser drops the WebGL context. With prefers-reduced-motion the inertia and the open/close animation are switched off; dragging still tracks your pointer.