Waitlist Hero

Build a waitlist hero for a pre-launch page. Structure, centered: a dashed-border "COMING SOON" chip with a small accent dot that pulses (scale 1 to 1.5 and back with opacity dip, 1.6s loop); a big headline ("Be first in line"); an email capture pill (monospace placeholder + a dark Join button nested inside); and a muted monospace line beneath ("347 people ahead of you"). Join: the input pill swaps in place for a full-width accent pill reading "You're #348 on the list" with a check - it lands on a spring (scale from 0.9, stiffness ~380, damping ~24). The line below swaps to "we'll email you at launch". No layout shift: both states share one fixed-height slot. The number is the emotional hook: incrementing the count you showed before (347 ahead -> you're #348) proves the claim was live. Details: Join button presses to 0.92; state text swaps are announced (aria-live="polite"). Accessibility: a real email input with a hidden label; the pulsing dot is decorative and aria-hidden; under prefers-reduced-motion the dot holds still and swaps are instant. Colors as tokens: paper, ink, muted, one accent. Keep the whole thing to four elements - scarcity likes silence. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.