A film leader countdown with a sweeping dial, crosshairs and frame labels that ticks down once per second, pops a white frame and gives way to the event details. It can be skipped and replayed.
Premiere night
npx shadcn@latest add https://hyperblur.dev/r/cinema-countdown-leader.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/cinema-countdown-leader.tsx.
import { CinemaCountdownLeader } from "@/components/hyperblur/cinema-countdown-leader"
<CinemaCountdownLeader from={3} to={1} loop={false} title="Doors open" />| Prop | Type | Default | Description |
|---|---|---|---|
| from | number | 5 | First number on the dial. |
| to | number | 2 | Last number before the flash frame. |
| loop | boolean | true | Runs the countdown again after the hold. |
| hold | number | 4200 | Milliseconds the content stays before the leader restarts when loop is on. |
| eyebrow | string | "Premiere night" | Pill above the title. Empty hides it. |
| title | string | "Lights down at eight" | Title of the revealed content. |
| details | string[] | ["Thursday, March 12", "Rialto Hall, Screen 1", "Q&A with the director"] | Facts under the title separated by dots. |
| cta | { label: string; href: string } | null | { label: "Claim your seat", href: "#" } | Accent button next to Replay leader. null hides it. |
| accent | string | "#e8ff5a" | Color of the pill, the glow and the main button. |
| onComplete | () => void | undefined | Called when the countdown reaches the flash frame. |
| headingAs | "h1" | "h2" | "h1" | Heading level of the title. Use h2 when the page already has an h1. |