Parallax Depth Cards

Layered cards that shift at different speeds while scrolling, creating a parallax sense of depth.

With a built-in scroll container, the layered cards shift, scale, and blur by different factors as you scroll — far layers move slowly with a depth-of-field blur, near layers move fast and stay sharp — producing a camera-dolly parallax effect that suits portfolio showcases or feature-highlight sections.

Loading preview…

npx shadcn@latest add https://webberui.com/r/parallax-depth-cards.json

Playground

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

Parallax strengthintensity

Container height (px)height

320

<ParallaxDepthCards />

Installation

npx shadcn@latest add https://webberui.com/r/parallax-depth-cards.json

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

Usage

import { ParallaxDepthCards } from "@/components/ui/parallax-depth-cards";

<ParallaxDepthCards
  height={400}
  intensity={1}
  layers={[
    { icon: "🏔️", title: "Far", description: "Moves the slowest, with a depth-of-field blur" },
    { icon: "🌲", title: "Mid", description: "Follows the scroll at a moderate speed" },
    { icon: "✨", title: "Near", description: "Moves the fastest and always stays sharp" },
  ]}
/>

Props

Prop	Type	Default	Description
`layers`	`DepthCardLayer[]`	—	Card layer data; the higher the index, the closer to the viewer and the faster the parallax displacement
`intensity`	`number`	`1`	Parallax intensity (0.4–2 recommended); affects both the displacement distance and the blur difference
`height`	`number`	`420`	Height of the built-in scroll container (px)
`className`	`string`	—	Forwarded to the outermost scroll container

DepthCardLayer

Field	Type	Default	Description
`title`	`string`	—	Card title
`description`	`string`	—	Card description text, shown below the title
`icon`	`React.ReactNode`	—	Icon in the card's top-left corner; accepts an emoji string or any ReactNode
`gradientClassName`	`string`	built-in colors	Tailwind class that overrides the card's background gradient

Accessibility

When the user has "reduce motion" enabled at the system level, the cards are presented as a static stack with no scroll displacement, scaling, or blur applied
Card titles and descriptions are real text nodes, so assistive technology reads them normally; purely decorative glows and hints are marked aria-hidden
The scroll container carries role="region" and an aria-label, and uses overscroll-contain to prevent scroll chaining to the page behind it