A pinned hero that turns vertical scroll into a sideways story, from an intro panel through illustrated chapters with parallax numerals. A chapter rail at the bottom fills as you travel.
Single-origin coffee we buy direct, roast in small batches and ship within 48 hours of the roast.
Only the ripest cherries, picked by hand over six passes of the same trees.
1,740 maltitudePulped the same afternoon, then fermented for 36 hours in spring water.
36 hfermentTurned every hour on raised beds until the beans settle at eleven percent.
18 dayson the bedsSmall batches in Lisbon, light enough to keep the panela and plum.
212 °Cfirst crackFifteen grams, two hundred and fifty of water, and four quiet minutes.
1:16ratio
npx shadcn@latest add https://hyperblur.dev/r/hero-scroll-horizontal.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-scroll-horizontal.tsx.
import { HeroScrollHorizontal } from "@/components/hyperblur/hero-scroll-horizontal"
<HeroScrollHorizontal title="How a bean becomes a cup" chapters={[{ title: "Pick", text: "By hand.", stat: "6", statLabel: "passes" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Finca La Esperanza · Huila" | Mono label above the headline with a leading rule. |
| title | string | "From a hillside in Huila to your morning cup" | Headline in the intro panel. |
| subtitle | string | "Single-origin coffee we buy direct..." | Paragraph under the headline. Hidden when empty. |
| cta | { label: string; href: string } | null | { label: "Shop the harvest", href: "#" } | Accent pill in the intro panel. null hides it. |
| chapters | { title: string; text: string; stat: string; statLabel: string }[] | Harvest, Wash, Dry, Roast, Brew | Panels after the intro. The first five get a drawn illustration each. |
| accent | string | "#e8875a" | 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 | 8 | Seconds for one forward pass of the autoplay loop. |
| length | number | 5 | 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. |