A winding line draws itself down the right side as you scroll, lighting milestone nodes and their cards one by one. On the left a year and a running total count up in step.
Solar and storage for homes, installed by our own crews and monitored for the life of the system.
Get a free roof estimate
npx shadcn@latest add https://hyperblur.dev/r/hero-scroll-timeline.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-scroll-timeline.tsx.
import { HeroScrollTimeline } from "@/components/hyperblur/hero-scroll-timeline"
<HeroScrollTimeline title="Ten years of shipping" countLabel="Customers" />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Helio Energy · since 2019" | Label with a glowing dot above the headline. |
| title | string | "From one rooftop to forty thousand" | Headline. |
| subtitle | string | "Solar and storage for homes..." | Paragraph under the headline. Hidden when empty. |
| countLabel | string | "Homes powered" | Label of the running total. |
| milestones | { year: number; title: string; text: string; count: number }[] | 6 milestones, 2019 to 2027 | Nodes along the line. Year and count drive the counters between nodes. |
| cta | { label: string; href: string } | null | { label: "Get a free roof estimate", href: "#" } | Accent button under the counters. null hides it. |
| accent | string | "#fbbf24" | 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 | 4 | 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. |