A WebGL gallery built on one idea: a card rotation is read off its position on screen, not off a timer. Scroll and the column turns; stop and the turn stops exactly where you left it; scroll back and it unwinds through the same frames it came through. Nothing is animating in the background waiting to be caught up with, which is what makes the effect feel attached to the reader rather than played at them. The turn does not arrive flat. Each card twists into it along a diagonal running across and up its face, so one corner enters the rotation before the opposite corner does and the card reads as a surface being turned in space rather than a panel on a hinge; the twist control sets how far apart those corners are, and at zero the whole card turns as one. Rotation runs about the vertical axis by default and can be switched to horizontal. The column itself is genuinely endless: a fixed set of planes is folded into a single window centred on the frame and reused forever, so a gallery of six pictures and a gallery of twelve cost the same and neither ever reaches an end. Pictures are cover-fit on the GPU, so no card shows a letterbox bar and none is squashed, whatever mix of portrait and landscape is loaded, and the crop offset is clamped so it can never be dragged off its own texture. Corners are rounded in the card surface as a signed distance rather than by a CSS radius, so the rounding stays true through the twist, and the edge is antialiased and premultiplied -- the canvas composites cleanly over whatever is behind it instead of over a black slab. Wheel, trackpad, drag and touch all drive the same column, with separate sensitivities and a smoothing control that runs from tracking the input exactly to a long glide. The scroll lock holds the page for a set amount of scrolling and then releases it, so the gallery can own the viewport for a few turns without trapping the reader in it. Tapping a card lifts it forward and centres it, dimming the rest, and tapping again puts it back along the same curve. The renderer is device-pixel-ratio aware, stops entirely when it scrolls out of view or the tab is hidden, holds its unattended drift under prefers-reduced-motion, and defaults to a transparent stage so it lands on the page rather than painting over it. Cards, spacing, radius, rotation, sensitivities, smoothing, hold and every interaction toggle are editable, and the export is one self-contained HTML file with no dependencies at all.
In collections: React Carousels & Image Galleries
Guide: Scroll-Driven and Auto-Drifting Galleries: Choose the Right Motion· React Carousel: Build One With CSS Scroll Snap or a Library· HTML Marquee Is Deprecated: How to Build a Modern Marquee
Carousel · HTML / CSS / JS · All tools