A dark launch panel with a rolling four-unit countdown, a striped capacity bar that fills toward the seat limit, a spots-left counter that ticks as people join and an email form that reserves a numbered seat.
Northstar onboards in small cohorts so every team gets a real setup call. When the bar fills, the next cohort opens in January.
npx shadcn@latest add https://hyperblur.dev/r/waitlist-capacity-countdown.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/waitlist-capacity-countdown.tsx.
import { WaitlistCapacityCountdown } from "@/components/hyperblur/waitlist-capacity-countdown"
<WaitlistCapacityCountdown launchAt="2026-12-01T16:00:00Z" capacity={500} claimed={412} />| Prop | Type | Default | Description |
|---|---|---|---|
| cohort | string | "Cohort 03 · Founding batch" | Blinking mono label above the title. |
| title | string | "Two weeks until doors open. 500 seats." | Section heading. |
| subtitle | string | Paragraph beside the heading. | |
| launchAt | string | ISO date of the launch. When set, the clock counts down to it on the client. | |
| initialSeconds | number | 1150938 | Seconds shown on first render and counted down when launchAt is not set. |
| capacity | number | 500 | Total seats in the cohort. |
| claimed | number | 412 | Seats already claimed. |
| liveSignups | boolean | true | Simulate other people joining every few seconds. |
| ctaLabel | string | "Reserve my seat" | Submit button label. |
| onSubmit | (values: { email: string }) => void | Promise<void> | Called with the email after validation. Nothing is posted by the component. | |
| accent | string | "#fbbf24" | Bar, label and button color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |