An event name starts so large that only a slice of its painted fill is visible, then shrinks into place while the image inside keeps panning. The top bar, facts row and ticket button assemble around it.
Three days of talks, studio visits and long dinners with people who make things for a living.
npx shadcn@latest add https://hyperblur.dev/r/hero-scroll-mask.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-scroll-mask.tsx.
import { HeroScrollMask } from "@/components/hyperblur/hero-scroll-mask"
<HeroScrollMask word="Northside" year="26" price="$299" accent="#38bdf8" />| Prop | Type | Default | Description |
|---|---|---|---|
| word | string | "Fieldwork" | Name painted with the moving fill. Also used in the top bar. |
| year | string | "27" | Small superscript after the word. Empty hides it. |
| price | string | "€390" | Price shown inside the ticket button. Empty hides it. |
| eyebrow | string | "A design conference · Lisbon" | Mono label above the word. |
| title | string | "Three days of talks, studio visits..." | Sentence under the word. Hidden when empty. |
| facts | { label: string; value: string }[] | When, Where, Who | Facts along the bottom rule. Three fit best. |
| cta | { label: string; href: string } | null | { label: "Get your ticket", href: "#" } | Accent ticket button. null hides it. |
| accent | string | "#c6f432" | 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. |