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.
Bring this into your project
Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.
npx webberui@latest add parallax-depth-cards.enPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<ParallaxDepthCards/>
The complete example includes the preview layout and data. Install the component first, then paste this file into your project.
Installation
npx webberui@latest add https://webberui.com/r/parallax-depth-cards.en.jsonOr, 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 anaria-label, and usesoverscroll-containto prevent scroll chaining to the page behind it