Hero Parallax
A scroll-driven grid of cards that drift in alternating directions on a tilted perspective plane.
Three rows of cards drift in alternating directions as you scroll, while the whole plane un-tilts and rises into view. The classic hero moment for a portfolio or product reel. Scroll the preview.
The ultimate
showcase reel
Scroll to send the grid drifting on a perspective plane. Drop in your own work and let the motion do the talking.
Installation
pnpm dlx shadcn@latest add "https://godui.design/r/hero-parallax.json"HeroParallax maps the container's scroll progress to spring-smoothed
transforms: rows translate on X in alternating directions while the plane's
rotateX, rotateZ, translateY, and opacity resolve to rest. It needs tall
scroll room, so the root is 300vh. Under reduced motion it renders a calm
static grid instead.
Usage
import { HeroParallax } from "@/components/godui/hero-parallax";<HeroParallax
products={[
{ title: "Aurora", thumbnail: "/aurora.jpg", href: "/work/aurora" },
{ title: "Beacon", thumbnail: "/beacon.jpg", href: "/work/beacon" },
]}
/>Custom header
Pass header to replace the default headline block with your own.
<HeroParallax
products={products}
header={
<div className="mx-auto max-w-7xl px-4 py-20">
<h1 className="text-6xl font-bold">Selected work</h1>
</div>
}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
products | HeroParallaxItem[] | — | Cards to scatter across the rows (best with ~15). |
header | React.ReactNode | Default block | Replaces the default headline. |
Each item is { title: string; thumbnail: string; href?: string }.
HeroParallax also forwards every standard <div> attribute to the root.