DocsScroll Tilted Grid

Scroll Tilted Grid

A cinematic two-column image gallery that tilts, softens, and resolves into focus as each frame crosses the viewport. Smooth scrolling and a reduced-motion fallback are built in.

Installation

pnpm dlx shadcn@latest add @componentry/scroll-tilted-grid

Dependencies: framer-motion lenis clsx tailwind-merge

Usage

API Reference

PropTypeDefault
imagesreadonly ScrollTiltedGridImage[]

Required images to render. Each item includes a src and descriptive alt text.

—
loopboolean

Appends additional image cycles as the sentinel approaches.

false
initialCyclesnumber

Initial number of cycles rendered when looping is enabled.

2
maxCyclesnumber

Maximum number of cycles retained in the gallery.

4
smoothScrollboolean

Enables Lenis smoothing. Disable when the app already owns a smooth-scroll provider.

true
aspectRatiostring

CSS aspect ratio used by every image frame.

"4 / 5"
perspectivenumber

Perspective depth in pixels applied to each frame.

1000
maxTiltnumber

Maximum rotateX angle at the entry and exit positions.

62
maxBlurnumber

Maximum blur in pixels away from the viewport focus point.

7
roundedstring

CSS border radius applied to every image frame.

"0.25rem"
sectionPaddingstring

Top and bottom breathing room around the image grid.

"18vh"
classNamestring

Additional classes applied to the gallery section.

—

Working with this component

Supply meaningful images

Pass images as objects with src and alt. Use alternative text that describes each image and choose a consistent aspectRatio for the gallery.

Control the effect

perspective, maxTilt, and maxBlur tune the visual treatment. Start with restrained values when the images need to remain easy to inspect while scrolling.

Use one scroll owner

Set smoothScroll to false if the application already supplies its own smooth-scroll setup. For a finite gallery, disable loop. Check the gallery in the actual page rather than only inside a preview.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X
PreviousScroll Split CardNextSignature
import { ScrollTiltedGrid } from "@/components/ui/scroll-tilted-grid"
 
const images = [
  {
    src: "https://images.unsplash.com/photo-1511818966892-d7d671e672a2?auto=format&fit=crop&w=1200&q=85",
    alt: "Curved concrete facade in soft daylight",
  },
  {
    src: "https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1200&q=85",
    alt: "Sunlit modern interior with warm timber details",
  },
  {
    src: "https://images.unsplash.com/photo-1487958449943-2429e8be8625?auto=format&fit=crop&w=1200&q=85",
    alt: "Minimal white house framed by a clear sky",
  },
  {
    src: "https://images.unsplash.com/photo-1494526585095-c41746248156?auto=format&fit=crop&w=1200&q=85",
    alt: "Quiet residential facade surrounded by trees",
  },
]
 
export default function Gallery() {
  return <ScrollTiltedGrid images={images} />
}