Cards bend in a shader as they move, the same carousel shell as the portfolio case studies.
How it works
Same shell as the portfolio
This demo uses the carousel from the case-study viewer: a flat DOM track for the active slide, with a full-screen WebGL canvas layered on top for the curved neighbour peeks.
Swipe or drag horizontally to move between slides
Arrow keys, dots, and trackpad horizontal scroll also work
At rest, the centre card stays live DOM; the shader only owns the side peeks
What the shader does
While a slide moves, the fragment shader warps the rasterized strip and adds depth cues at the edges:
Warp: cards bend away from the viewport centre
Progressive blur: side peeks soften as they recede
Desaturation: edge pixels grey out toward the rim
Chromatic edge: motion splits colour channels with a green accent fringe
Edge noise: subtle liquify on the leading/trailing edges while moving
DOM → texture
Each slide is rasterized from the DOM with modern-screenshot, composited into a horizontal strip, and sampled in the shader. Theme colours come from CSS variables so light/dark switches stay in sync.
Tweak the effect live
Add ?tune to the URL to open a slider panel: blur strength, aberration, spring physics, rest curve, and more. Use Copy values in the panel to grab the current settings.