A giant word cut out of a black plate shows a night sky through its letters, then the camera flies through the O until the whole sky fills the screen. The real headline and booking pill fade in on the other side.
Small-group night-sky expeditions to the darkest places left on Earth.
Eight nights under Bortle 1 skies with an astronomer, a 16-inch telescope and nothing else on the horizon.
npx shadcn@latest add https://hyperblur.dev/r/hero-scroll-letters.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-scroll-letters.tsx.
import { HeroScrollLetters } from "@/components/hyperblur/hero-scroll-letters"
<HeroScrollLetters title="Darker skies, brighter stars" detail="Namibia · 2 Jun 2027 · 4 seats left" />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Nova Expeditions" | Name in the top bar of the intro. |
| intro | string | "Small-group night-sky expeditions..." | Short line under the word before the zoom. |
| title | string | "The sky, the way it used to look" | Headline revealed after flying through the letters. |
| subtitle | string | "Eight nights under Bortle 1 skies..." | Paragraph under the revealed headline. Hidden when empty. |
| detail | string | "Atacama · 14 Mar 2027 · 6 seats left" | Departure line in the booking pill. Text before the first dot is highlighted. |
| cta | { label: string; href: string } | null | { label: "Reserve a seat", href: "#" } | Button inside the booking pill. null hides it. |
| accent | string | "#5eead4" | 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. |