Waitlist Hero

Live demo

Live, from the library itself, at full size: scroll, hover, navigate away and back. The demo is never gated.

Install Pro

The demo above is never gated; the source is. With a key in components.json (see account), the registry serves it like any other item:

npx shadcn@latest add @moonarc-pro/hero-waitlist

---
import HeroWaitlist from '@/components/moonarc/pro/HeroWaitlist.astro';
// a real launch comes from your config or CMS: an ISO date with a time and an offset ('…T09:00:00+01:00'). This one is
// next 1 January, so the example never runs out
const launch = new Date(Date.UTC(new Date().getUTCFullYear() + 1, 0, 1)).toISOString();
---
<!-- Without JavaScript the form posts to action and your endpoint answers with a page (or a 303 to /thanks/). With it,
     the section's script (bindForms() from the core form lib) sends the same fields with fetch. Because it
     handled the submit, the typed text vanishes while the request is out. -->
<HeroWaitlist
  eyebrow="Private beta"
  headline="Join the waitlist for the launch"
  copy="We send one email, on the day it opens, and nothing else."
  launch={launch}
  timeZone="Europe/Berlin"
  done="We're open. Come in."
  units={['days', 'hours', 'minutes']}
  label="Email address"
  placeholders={['you@studio.example', 'your work email']}
  action="/api/waitlist"
  encode="json"
  success="/thanks/"
  carry={['position', 'referral']}
  refParam="ref"
  honeypot="website"
  privacy="/privacy/"
  count={2400}
  people={[{ name: 'Ana Lima' }, { name: 'Bo Chen' }, { name: 'Cleo Park' }, { name: 'Dev Rao' }]}
/>

<!-- A service that reads its own attributes and hidden inputs gets them passed through: action="/thanks/" endpoint="/"
     encode="urlencoded" formAttrs={{ name: 'waitlist', 'data-netlify': 'true' }}, and in the fields slot
     <input slot="fields" type="hidden" name="form-name" value="waitlist" />.
     While no service is set up, demo instead of action: nothing is sent, and a note under the form says so. -->

Without a key the registry answers 401 with an upgrade message. Everything this section composes is free: retro-grid, countdown-flip, vanish-input, shimmer-button, check-draw, avatar-stack.

Props

Theming and overrides

The section reads the theme contract (shadcn's variable names with the base tokens as fallback), so a pasted theme or one --ma-brand recolours it. Its class names are the override surface and stay stable; a named slot replaces the matching prop with your own markup.

Why it is built this way

• The first Pro section with a script of its own: two lines, a named import of bindForms from the core form lib (so the registry adds /r/form.json as a dependency) and the call. Everything that moves is a free primitive.
• The email never goes in the URL, the storage or a log: method is post or the build fails, the lib reads the FormData before the vanish empties the field, and only numbers and short tokens are carried to the thanks page.
• The vanish is the proof the lib took the submit: its listener sits on the form (target phase), prevents the navigation synchronously, and VanishInput's listener on document sees defaultPrevented and blurs the text away while the request is out. A failure waits for the vanish, puts the text back and focuses the field.
• The status line exists at load, is never hidden, and reserves one line (min-block-size: 1lh): a live region that appears with its text is not announced, and a line that appears pushes the proof down. The button goes aria-disabled while pending, because disabled would drop the focus to the page.
• A demo form never pretends to collect addresses: method="dialog" goes nowhere outside a <dialog> even with JavaScript off, the lib answers with demoResponse once the vanish has finished, and a visible note says nothing is sent.
• The countdown's numbers are frozen at build; the <time datetime> under it is the date without JavaScript. After the launch a rebuild prints done in the server HTML; in the browser at zero the countdown's name becomes done, and the headline is not swapped. Swapping it takes a rebuild.
• The grid floor starts at 55 % of the height and every text below it sits on the plate, so no text is read over a grid line. The plate is the card colour on an unset section and the tone's own ground under a tone (the StatsRow rule). It re-points the primitives' base tokens (--ma-ink, --ma-panel) at each tone's concrete text and plate colours. It never uses currentColor, which a custom property resolves where it is used. The avatar chip and tooltip keep their text readable, and these reach 3 : 1 on every tone, as browser.mjs measures: the field's border, including its :user-invalid red (the theme's destructive mixed half and half with the tone's text through VanishInput's --ma-vanish-invalid), the checkbox's border, and every focus ring (the submit's through ShimmerButton's --ma-shimmer-ring, the privacy link's its own).

Replaces: Waitlist heroes (shadcnblocks) · Coming-soon countdown pages (Framer / Webflow templates) · PlaceholdersAndVanishInput over a RetroGrid (Aceternity / Magic UI compositions). See the migration table.

Related