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.
- 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.
- Portfolio and case-study sites
- Photography, fashion, and lifestyle brands
- Music album and editorial pages
- Product galleries and lookbooks
- Studio and agency homepages
- 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)
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.
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.
- 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.
- Portfolio and case-study sites
- Photography, fashion, and lifestyle brands
- Music album and editorial pages
- Product galleries and lookbooks
- Studio and agency homepages
- 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)
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.
Abhrajit Ray
