Glide 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.