Scroll Tilted Grid

Installation

Usage

Full-page (default)

The component ships with sectionPadding="20vh", so the grid breathes on a landing page without any wrapper work — page scroll drives the choreography.

import { ScrollTiltedGrid } from "@/components/ruixen/scroll-tilted-grid";
 
export default function Page() {
  return (
    <main className="relative min-h-screen overflow-x-hidden">
      <section className="flex min-h-screen flex-col items-center justify-center px-6 text-center">
        <h1 className="text-3xl font-medium tracking-tight md:text-5xl">
          A field of stills
        </h1>
      </section>
 
      <ScrollTiltedGrid loop />
    </main>
  );
}

Inside a bounded container

Pass a ref to a fixed-height self-scrolling ancestor via container, and shrink sectionPadding so the grid fits the smaller frame. useScroll and the loop's IntersectionObserver measure against the ref instead of the viewport.

import { useRef } from "react";
import { ScrollTiltedGrid } from "@/components/ruixen/scroll-tilted-grid";
 
export default function Preview() {
  const ref = useRef<HTMLDivElement>(null);
  return (
    <div ref={ref} className="h-[480px] overflow-y-auto rounded-xl">
      <ScrollTiltedGrid
        container={ref}
        loop
        maxCycles={4}
        sectionPadding="1rem"
        maxWidth="md"
        gap={6}
      />
    </div>
  );
}

Custom images

<ScrollTiltedGrid
  images={[
    "/gallery/01.jpg",
    "/gallery/02.jpg",
    "/gallery/03.jpg",
    "/gallery/04.jpg",
  ]}
/>

Props

Features

• Scroll-driven choreography: Each tile uses useScroll with a start end → end start offset so its tilt, blur, and translate are tied directly to its position in the viewport.
• Symmetric entry / exit pose: Tiles tilt forward +maxTilt on entry, settle flat at the midpoint, then tilt back -maxTilt as they exit over the top edge.
• Alternating sides: Even-indexed tiles drift in from the left, odd-indexed from the right, producing a paired editorial cadence.
• Infinite loop (opt-in): With loop, an IntersectionObserver sentinel appends two more cycles whenever the user gets within ~1500px of the bottom.
• Respects prefers-reduced-motion: Tiles render as static stills when the user has reduced motion enabled — no transforms, no filters, no blur.
• Composed transforms: x, y, z, rotate, rotateX, and skewX are applied together via Framer Motion's hardware-accelerated transform pipeline; an inner scaleY adds a subtle vertical squash so the tilt reads as physical rather than flat.