Design Atlas
한국어
▭ Landing page patterns

Waitlist hero

대기 명단 히어로

A pre-launch hero that captures interest via email and uses the growing signup count to build anticipation.

Also known as: Pre-launch heroComing soon hero
···
html
<div class="wl">
  <span class="badge">COMING SOON</span>
  <h1>Be first to try it</h1>
  <p>Join the waitlist — we're onboarding in small batches.</p>
  <div class="row">
    <div class="input">you@example.com</div>
    <button>Join waitlist</button>
  </div>
  <div class="proof"><div class="avatars"><i></i><i></i><i></i><i></i></div><span id="count">1,247 people waiting</span></div>
</div>
css
.wl{width:min(90%,560px);display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(6px,1.4vmin,10px)}
.badge{font-size:clamp(7px,1.3vmin,10px);font-weight:700;letter-spacing:.08em;padding:.3em .9em;border-radius:999px;
  background:color-mix(in oklab,var(--accent-2) 16%,var(--surface));color:var(--accent-2);
  border:1px solid color-mix(in oklab,var(--accent-2) 35%,var(--line))}
.wl h1{margin:0;font-size:clamp(14px,3.6vmin,26px);font-weight:800;letter-spacing:-.01em}
.wl p{margin:0;font-size:clamp(7px,1.4vmin,11px);color:var(--muted)}
.row{display:flex;gap:clamp(4px,1vmin,8px);width:100%;max-width:360px;margin-top:clamp(4px,1vmin,6px)}
.input{flex:1;text-align:left;border:1px solid var(--line);border-radius:8px;background:var(--surface);
  padding:clamp(6px,1.5vmin,10px) clamp(8px,1.8vmin,12px);font-size:clamp(7px,1.4vmin,11px);color:var(--muted)}
.row button{font-size:clamp(7px,1.4vmin,11px);font-weight:700;padding:0 1.2em;border-radius:8px;border:none;
  background:var(--accent);color:#fff}
.proof{display:flex;align-items:center;gap:8px;margin-top:clamp(2px,.8vmin,4px)}
.avatars{display:flex}
.avatars i{width:clamp(12px,2.4vmin,18px);height:clamp(12px,2.4vmin,18px);border-radius:50%;
  border:2px solid var(--bg);margin-left:-6px;background:var(--accent-3)}
.avatars i:first-child{margin-left:0;background:var(--accent)}
.avatars i:nth-child(3){background:var(--accent-2)}
#count{font-size:clamp(6.5px,1.2vmin,9px);color:var(--muted);font-variant-numeric:tabular-nums}
js
const el = document.getElementById('count');
let n = 1247;
setInterval(function () {
  n += Math.floor(Math.random() * 3) + 1;
  el.textContent = n.toLocaleString() + ' people waiting';
}, 1500);

A hero used when the product doesn't exist yet, or is invite-only. Unlike a normal hero, the CTA isn't "Get started" — it's "Join the waitlist," usually a single email field sitting right in the hero next to the button.

The number is the whole point: a live-updating counter ("1,247 people waiting") or a stack of overlapping avatar circles turns "we don't have a product yet" into visible social proof, adding scarcity and anticipation before there's anything to try.

Not telling people their position or an expected invite window after signing up means they register and forget. And calling it a "waitlist" while actually letting anyone in immediately (fake scarcity) burns trust hard the moment it's noticed.

When to use

Use when the product doesn't exist yet or must roll out gradually due to capacity limits. If anyone can already use the product, a waitlist is a needless barrier — use a plain `hero-section` instead.