A two-line headline on warm paper pulls apart while a slit between the lines opens into a wide view through whitewashed arches. Location, price and a booking button settle at the bottom.
npx shadcn@latest add https://hyperblur.dev/r/hero-scroll-split.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-scroll-split.tsx.
import { HeroScrollSplit } from "@/components/hyperblur/hero-scroll-split"
<HeroScrollSplit lineTop="Slow mornings" lineBottom="by the water" price="$240" />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Casa Larga" | Spaced capitals in the top bar. |
| place | string | "Alentejo, Portugal" | Bold line above the location text. Empty hides it. |
| lineTop | string | "A long house" | First headline line. Moves up and left. |
| lineBottom | string | "by the sea" | Second headline line in the accent color. Moves down and right. |
| location | string | "Fourteen rooms on the Alentejo coast..." | Text in the bottom left. |
| price | string | "€280" | Nightly price in the bottom right. Empty hides it. |
| cta | { label: string; href: string } | null | { label: "Check availability", href: "#" } | Dark pill that turns accent on hover. null hides it. |
| accent | string | "#c4623a" | 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. |