A light split waitlist with a blurred product preview behind a lock badge and a scanning shimmer. Joining with email and team size sharpens the preview into focus and swaps the form for a confirmation.
Ledgerly reconciles every bank, card and payout account in real time. Join the waitlist to unlock the live preview right now.
npx shadcn@latest add https://hyperblur.dev/r/waitlist-teaser-unlock.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/waitlist-teaser-unlock.tsx.
import { WaitlistTeaserUnlock } from "@/components/hyperblur/waitlist-teaser-unlock"
<WaitlistTeaserUnlock onSubmit={(values) => console.log(values)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Coming this fall" | Pill label above the title. |
| title | string | "See the dashboard before anyone else" | Section heading. |
| subtitle | string | Paragraph under the heading. | |
| bullets | string[] | 3 bullets | Checked benefits under the paragraph. |
| teamSizes | string[] | ["Just me", "2 to 10", "11 to 50", "51 to 200", "200+"] | Options of the team size select. |
| ctaLabel | string | "Join and unlock preview" | Submit button label. |
| productName | string | "app.ledgerly.com" | Text in the preview window bar. |
| defaultUnlocked | boolean | false | Start with the preview already unlocked. |
| onSubmit | (values: { email: string; teamSize: string }) => void | Promise<void> | Called with the form values after validation. Nothing is posted by the component. | |
| accent | string | "#7c3aed" | Chart, focus and badge color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |