A light, centered waitlist with an email field, a rolling counter that ticks up live and on signup, an avatar stack and a road-to-launch bar. After signup it shows the spot number and a referral link to copy.
The calendar that plans your week around deep work. We are letting people in from the waitlist in batches of 500.
npx shadcn@latest add https://hyperblur.dev/r/waitlist-counter.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/waitlist-counter.tsx.
import { WaitlistCounter } from "@/components/hyperblur/waitlist-counter"
<WaitlistCounter count={2431} onSubmit={(email, spot) => fetch("/api/waitlist", { method: "POST", body: JSON.stringify({ email, spot }) })} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Private beta opens March 2027" | Pill above the headline. Empty string hides it. |
| title | string | "Be first in line for Orbit" | Headline. Its last word gets the accent gradient. |
| subtitle | string | sample text | Paragraph under the headline. Empty string hides it. |
| count | number | 2431 | People already on the list when the section mounts. |
| live | boolean | true | Tick the counter up every few seconds with a fixed sequence of small steps. |
| avatars | string[] | 5 sample names | Names for the initials avatar stack. The first five are shown. |
| placeholder | string | "you@company.com" | Email field placeholder. |
| ctaLabel | string | "Join the waitlist" | Submit button text. |
| progress | number | 72 | Road to launch percentage from 0 to 100. |
| progressLabel | string | "Road to launch" | Label above the progress bar. |
| milestones | string[] | ["Alpha", "Private beta", "Public beta", "Launch"] | Labels spread under the bar. Ones at or below progress are marked done. |
| referralBase | string | "https://orbit.so/r/" | Referral URL prefix. A short code derived from the email is appended. |
| referralBonus | string | sample text | Line explaining the referral reward in the success state. |
| onSubmit | (email: string, position: number) => void | Called with a valid email and the assigned spot. | |
| onReferralCopy | (url: string) => void | Called when the referral link is copied. | |
| accent | string | "#6d4aff" | Color of the gradient word, progress bar and success state. |
| className | string | Extra class names on the section root. | |
| style | CSSProperties | Inline styles on the section root, merged after the accent variable. |