A dark glass card over drifting color with a four-tile flip countdown to a launch date, an email form and a perks column.
Halcyon batches email into two quiet deliveries a day and drafts the replies that can wait. Join the list to get in first.
One email on launch day. No spam, unsubscribe anytime.
npx shadcn@latest add https://hyperblur.dev/r/waitlist-launch-card.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/waitlist-launch-card.tsx.
import { WaitlistLaunchCard } from "@/components/hyperblur/waitlist-launch-card"
<WaitlistLaunchCard launchAt="2027-01-15T17:00:00Z" onSubmit={(email) => console.log(email)} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Halcyon" | Product name next to the logo mark. |
| badge | string | "Launching January 15" | Pill in the top right of the card. Empty string hides it. |
| title | string | "Something calm is coming to your inbox" | Card headline. |
| subtitle | string | sample text | Paragraph under the headline. Empty string hides it. |
| launchAt | string | "2027-01-15T17:00:00Z" | Launch moment as an ISO date string. The countdown is computed in the browser after mount. |
| liveLabel | string | "We are live. Check your inbox for your invite." | Text shown above the tiles once the launch time has passed. |
| placeholder | string | "Your work email" | Email field placeholder. |
| ctaLabel | string | "Get early access" | Submit button text. |
| perksTitle | string | "Waitlist perks" | Heading of the perks column. |
| perks | { title: string; detail: string }[] | 3 sample perks | Perks on the right. Empty array hides the column. |
| note | string | sample text | Fine print under the form. Empty string hides it. |
| onSubmit | (email: string) => void | Called with a valid email. The form then shows a confirmation. | |
| accent | string | "#ff7a59" | Color of the logo, glow, button and perk icons. |
| className | string | Extra class names on the section root. | |
| style | CSSProperties | Inline styles on the section root, merged after the accent variable. |