A dusk mountain scene in five layers, sky, far ridge, dolomite towers, wooded hills and foreground pines, with the headline tucked between them. Scrolling pushes the camera in and each layer moves at its own depth.
A guided week on the Alta Via 1, from Lago di Braies to Belluno, sleeping in mountain huts every night.
npx shadcn@latest add https://hyperblur.dev/r/hero-scroll-depth.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-scroll-depth.tsx.
import { HeroScrollDepth } from "@/components/hyperblur/hero-scroll-depth"
<HeroScrollDepth title="Walk the ridge" summary="Five days on the Haute Route." />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Trailhead" | Logo text with a peak glyph in the top bar. |
| eyebrow | string | "Hut-to-hut trekking · Dolomites" | Mono label above the headline. |
| title | string | "Go higher" | Huge headline set between the mountain layers. Short phrases work best. |
| summary | string | "A guided week on the Alta Via 1..." | Paragraph revealed at the end of the push-in. |
| stats | { value: string; label: string }[] | 7 days, 6 huts, 82 km | Figures under the summary. Empty array hides them. |
| cta | { label: string; href: string } | null | { label: "Plan your trek", href: "#" } | Accent button revealed at the end. null hides it. |
| accent | string | "#ffb37a" | Accent color used for highlights, buttons and progress details. |
| progress | number | undefined | Controlled progress from 0 to 1. When set, scroll tracking and autoplay are ignored. |
| autoPlay | boolean | false | Loops the progress by itself, forward, hold, then back. Use it for previews where nobody scrolls. |
| duration | number | 6 | Seconds for one forward pass of the autoplay loop. |
| length | number | 3 | Scroll distance in stage heights while the hero is pinned. Ignored with progress or autoPlay. |
| height | string | "100vh" | Height of the pinned stage. Use a pixel value when the hero lives inside a scrolling container. |
| headingAs | "h1" | "h2" | "h1" | Heading level of the headline. Use h2 when the page already has an h1. |