Muster
Waitlist section block: an email capsule that spring-morphs into a confirmation card with your queue number rolling on Tally digit drums, a copyable referral link, and a seeded avatar stack the joiner drops into. Async onJoin with pending/error states, shake-on-invalid validation, and a contact variant.
motionpro
Pro
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/musterManual — install dependencies, then copy the source
npm install motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| title | React.ReactNode | "Get early access" (waitlist) / "Get in touch" (contact) | Section headline (<h2>). |
| description | React.ReactNode | depend on variant | Supporting copy under the headline. |
| count | number | 2481 | People already waiting. The joiner becomes #count + 1, and the stack counter ticks +1 on success. |
| onJoin | (email: string, details?: MusterDetails) => void | Promise<unknown> | Called with the submitted email (plus name/message in the contact variant). Return a Promise to hold the button in its pending state — resolve morphs to the confirmation card, reject returns to the form with the rejection's message (or a generic one) as the inline error. | |
| referralBase | string | "https://example.com/?ref=" | URL base for the referral link; a short code seeded from the email is appended. |
| variant | MusterVariant | "waitlist" | "waitlist" — email capsule → "You're #N" card with referral link. "contact" — name/email/message panel → "Message sent" card (no position). |
| avatars | string[] | Image URLs for the avatar stack (first 5 used). Omit for seeded gradient avatars. The joiner's own avatar is always a seeded gradient. | |
| accentColor | string | "#7dd3fc" | Accent hex for the submit control, focus rings and card highlights. |
| ref | React.Ref<MusterHandle> | Imperative handle (reset(), focus()). React 19 ref-as-prop. | |
| className | string | Extra classes for the <section> root. | |
Also accepts all props of Omit<React.ComponentPropsWithoutRef<"section">, "children" | "title"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, and passes className through.