Glide Gallery

Infinite-scroll isometric card gallery

Why it works: Image walls usually sit flat and still. Tilting the grid in 3D and putting it on a soft horizontal sweep turns a portfolio or product gallery into something that moves at the right pace for a hero. Present, but not asking for your full attention. Under the hood: - Cards live in a CSS grid that's rotated on X and Z, so the whole plane reads as receding into the canvas. - Vertical scroll is a single offset advanced per frame; the grid duplicates so it loops seamlessly. - Each card's horizontal position and Y-axis rotation come from `sin(phase)` and `cos(phase)`, where phase is derived from its position in the loop. - Drag updates velocity directly; on release, velocity eases back toward the autoplay target so the motion never jerks. - Cards outside a cull radius around the visible center get skipped each frame. Best for: - Portfolio and case-study sites - Photography, fashion, and lifestyle brands - Music album and editorial pages - Product galleries and lookbooks - Studio and agency homepages Controls: - Images : array of image URLs (falls back to a built-in set if empty) - Columns : grid column count (1–8) - Card Size : width of each card in px (60–400) - Gap : spacing between cards in px (0–120) - Autoplay : scroll on its own when not being dragged - Speed : autoplay scroll rate (-10 to 10, negative reverses) - Curve : amplitude of the sine sweep in px (0–1500) - Perspective : CSS perspective in px (500–3000) - Tilt X : forward/back tilt in degrees (-90 to 90) - Tilt Z : roll tilt in degrees (-90 to 90) Built for production: Plain CSS 3D transforms with a single `requestAnimationFrame` loop, no animation library. Auto-pauses when scrolled offscreen via `IntersectionObserver`. Pointer events handle drag on both mouse and touch with `touchAction: none` so it doesn't fight page scroll. Cards outside the visible band are skipped each frame.

Infinite-scroll isometric card gallery