𝕏
Sign in
← All sections

Waitlist Signup with Success Morph

FormsDark SaaSWorks in Claude Code · Cursor · v0
Build prompt
Build a waitlist section: dark radial-glow background, headline, social-proof subline, and a pill email form (input + lime button). On submit, validate the email, then the whole pill morphs (width + colour transition) into a lime 'You're in' confirmation. Wire the form to POST to a configurable endpoint.
Code
<style>*{box-sizing:border-box;margin:0}body{font-family:Inter,system-ui,sans-serif;overflow:hidden}</style><style>body{background:radial-gradient(circle at 50% 0,#1d1840,#07070c 60%);color:#fff;height:100vh;display:grid;place-items:center;text-align:center}h2{font-size:38px;letter-spacing:-.04em}p{color:#999;margin:8px 0 18px}
form{display:flex;background:#ffffff10;border:1px solid #ffffff22;border-radius:999px;padding:5px;width:360px;margin:auto;transition:all .4s}input{flex:1;background:none;border:0;color:#fff;padding:0 14px;outline:0}button{background:#c6ff3d;border:0;border-radius:999px;padding:10px 16px;font-weight:700}form.ok{width:220px;justify-content:center;padding:14px;background:#c6ff3d;color:#111;font-weight:700}</style>
<div><h2>Get early access</h2><p>Join 4,000 builders on the list.</p><form onsubmit="event.preventDefault();this.className='ok';this.innerHTML='✓ You\'re in'"><input placeholder="you@email.com"><button>Join</button></form></div>

More sections

Free

Aurora Hero

Hero · Dark SaaS
Preview
Free

Infinite Logo Marquee

Social proof · Minimal
Preview
Free

Bento Feature Grid

Features · Dark SaaS
Preview