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

Usage

API Reference

PropertyTypeDefault
images

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

readonly ScrollTiltedGridImage[]—
loop

Appends additional image cycles as the sentinel approaches.

booleanfalse
initialCycles

Initial number of cycles rendered when looping is enabled.

number2
maxCycles

Maximum number of cycles retained in the gallery.

number4
smoothScroll

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

booleantrue
aspectRatio

CSS aspect ratio used by every image frame.

string"4 / 5"
perspective

Perspective depth in pixels applied to each frame.

number1000
maxTilt

Maximum rotateX angle at the entry and exit positions.

number62
maxBlur

Maximum blur in pixels away from the viewport focus point.

number7
rounded

CSS border radius applied to every image frame.

string"0.25rem"
sectionPadding

Top and bottom breathing room around the image grid.

string"18vh"
className

Additional classes applied to the gallery section.

string—

View source

Click the icon in the preview panel to browse source for each variant.

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
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} />
}