Hero Parallax Grid

A product/portfolio wall with alternating row parallax — each row sweeps in a different direction as you scroll, with a 3D reveal.

A scroll-driven hero parallax wall: items are split into several rows, adjacent rows shift horizontally in opposite directions, and rotateX plus a fade-in complete within the first 20% of the reveal, producing a sense of moving through depth.

Loading preview…

npx shadcn@latest add "https://webberui.com/r/hero-parallax-grid.json?t=<install token>"

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Rowsrows

Horizontal travel (px)travel

320

Titletitle

Descriptiondescription

Card width (px)cardWidth

200

Card height (px)cardHeight

150

<HeroParallaxGrid />

Installation

npx shadcn@latest add "https://webberui.com/r/hero-parallax-grid.json?t=<install token>"

Or, once registries are configured in components.json, install it as @webberui/hero-parallax-grid.

Usage

import { HeroParallaxGrid } from "@/components/ui/hero-parallax-grid";

const items = [
  { src: "/work/nova.jpg", alt: "Nova", title: "Nova" },
  { src: "/work/ember.jpg", alt: "Ember", title: "Ember" },
  // 9–15 images recommended
];

<HeroParallaxGrid
  items={items}
  title="Selected work"
  description="Alternating row parallax."
/>;

The height of the outer track container (the h-* in className) determines the scrollable distance; the taller it is, the slower and more complete the parallax sweep. If the scrolling happens inside a nested overflow section, pass that container's ref to container.

Props

Prop	Type	Default	Description
`items`	`(string \| { src; alt?; title? })[]`	—	Product/portfolio items; 9–15 recommended
`container`	`RefObject<HTMLElement>`	`undefined`	Nested scroll container; the window is the scroll source by default
`rows`	`number`	`3`	How many rows to split into; adjacent rows shift in opposite directions
`travel`	`number`	`320`	Horizontal displacement per row (px); larger sweeps faster
`title`	`string`	`undefined`	Title at the top (not rendered when omitted)
`description`	`string`	`undefined`	Description below the title
`cardWidth`	`number`	`200`	Card width (px)
`cardHeight`	`number`	`150`	Card height (px)
`aria-label`	`string`	`"Parallax product wall"`	Accessible name for the gallery
`className`	`string`	`undefined`	The track container; its height determines the scrollable distance
`imageClassName`	`string`	`undefined`	Applied to every card image

Accessibility

When the user has "reduce motion" enabled at the system level, a static grid is rendered instead, with no scroll parallax
The whole set carries role="group" and aria-label; images without an alt are marked aria-hidden