A framed film still grows from a small card to the full viewport while the headline splits apart and blurs out. A timecode, caption and play button settle onto the expanded frame.
An independent studio for brand films, documentaries and the occasional music video.
Forty-two films, nine countries, one reel cut from all of it.
Watch the full reel
npx shadcn@latest add https://hyperblur.dev/r/hero-scroll-expand.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-scroll-expand.tsx.
import { HeroScrollExpand } from "@/components/hyperblur/hero-scroll-expand"
<HeroScrollExpand titleStart="Made" titleEnd="to move" cta={{ label: "Play reel", href: "/reel" }} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Lumen Pictures · Showreel 2027" | Mono label with a record dot in the top left. |
| titleStart | string | "Stories" | First half of the headline. Slides left as the frame grows. |
| titleEnd | string | "in motion" | Second half of the headline, set in outline. Slides right as the frame grows. |
| subtitle | string | "An independent studio for brand films..." | Paragraph under the frame with a scroll hint. Hidden when empty. |
| caption | string | "Forty-two films, nine countries, one reel cut from all of it." | Large caption shown on the expanded frame under a running timecode. |
| cta | { label: string; href: string } | null | { label: "Watch the full reel", href: "#" } | Glass button with a play icon on the expanded frame. null hides it. |
| accent | string | "#ff9a3c" | 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 | 5 | 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. |