A velvet stage curtain printed with a gold title gathers to both sides as you scroll, its folds bunching and hems lifting. Behind it the spotlight comes up on the season, the buttons and three show cards.
Twelve productions, three world premieres and a season pass that pays for itself by the fourth show.
npx shadcn@latest add https://hyperblur.dev/r/hero-scroll-curtain.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-scroll-curtain.tsx.
import { HeroScrollCurtain } from "@/components/hyperblur/hero-scroll-curtain"
<HeroScrollCurtain marquee="Tonight" title="The winter season starts here" curtainColor="#1f3a8a" />| Prop | Type | Default | Description |
|---|---|---|---|
| marquee | string | "Opening night" | Gold title printed across both curtain halves. |
| eyebrow | string | "The Aldridge Theatre · Spring Season 2027" | Mono label above the revealed headline. |
| title | string | "The house lights are going down" | Headline behind the curtain. |
| subtitle | string | "Twelve productions, three world premieres..." | Paragraph under the headline. Hidden when empty. |
| primaryCta | { label: string; href: string } | null | { label: "Get a season pass", href: "#" } | Gold button. null hides it. |
| secondaryCta | { label: string; href: string } | null | { label: "See the program", href: "#" } | Outlined button. null hides it. |
| shows | { date: string; title: string; tag: string }[] | 3 shows | Small program cards under the buttons. Empty array hides them. |
| curtainColor | string | "#b3122e" | Base color of the velvet. Folds, shadows and highlights are mixed from it. |
| accent | string | "#e8c27a" | 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. |