A headline surrounded by floating interface cards on several depth planes. As you scroll, near cards travel further and stay sharp while far cards drift slowly, blurred and dimmed.
Live workspace
Revenue, deploys and signups, as they happen.
npx shadcn@latest add https://hyperblur.dev/r/parallax-depth-cards.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/parallax-depth-cards.tsx.
import { ParallaxDepthCards } from "@/components/hyperblur/parallax-depth-cards"
<ParallaxDepthCards mode="page" height={560} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Live workspace" | Small label above the title. |
| title | string | "Every number your team watches, in one place." | Headline in the middle of the stage. |
| subtitle | string | "Revenue, deploys and signups update the moment they change." | Line under the headline. |
| cards | { label: string; value: string; detail?: string; tone?: "stat" | "chip" | "note" | "chart"; depth?: number; x?: number; y?: number; rotate?: number }[] | six cards | Floating cards. depth goes from 0 (far) to 1 (near); x and y are percentages of the stage. |
| mode | "inner" | "page" | "inner" | inner owns a scroll viewport of the given height; page pins the stage while the nearest scrolling ancestor (or the window) scrolls past it. |
| height | number | 440 | Height of the pinned stage in pixels. |
| progress | number | undefined | Controlled progress from 0 to 1. When set, scrolling and autoplay are ignored. |
| autoPlay | boolean | false | Loops the progress back and forth on its own. In inner mode the pointer takes over and the viewport becomes scrollable while hovered. |
| duration | number | 9000 | Length of one autoplay loop in milliseconds. |
| length | number | 2.4 | Scroll distance as a multiple of the stage height. |
| range | number | 260 | How far, in pixels, the nearest cards travel over the full scroll. |
| accent | string | "#2f7bff" | Accent color for focus rings, indicators and highlights. |
| className | string | undefined | Extra classes on the root element. |