Waitlist Hero Page
One line in, one self-contained index.html out: a full-viewport waitlist hero — a glass navbar, one headline, an email field with a join button that turns into a thank-you, and a quiet proof row.
We made two examples: an early-access page for Vibary in violet on black, and a first-pressing list for a record label in amber on deep brown. Both share the floating glass nav, one field and one button in a pill, and the proof row underneath.
The headline, the placeholder, the button and the thank-you message come from your fields. The screenshot shows the sign-up form; on submit the field is replaced in place by the thank-you, with no page reload. The call that would send the address to a real list is left as a clear stub for you to connect. You always get the glass nav, a single email field, the in-place success message and the staggered entrance.
Generated for this library
Input Brief an early-access waitlist for Vibary Nav VIBARY · Sign in Headline Design by saying it. / Be first in line. Support Early access to the studio, one paste at a time. Capture [email protected] · Join the waitlist · You're in — watch your inbox. Proof Joining now · makers, teams, tinkerers Palette --ground #0a0a0b · --ink #f2f2f3 · --muted #a3a3ad · --accent #7c7cf0 · --panel #131316 Returned 1 file · index.html · full-viewport · no page scroll nav a floating glass pill: VIBARY left, one action right hero headline, support line, then the capture centred capture an email field and a join button on one pill success on submit the field becomes the thank-you in place, no reload; the send-to-list call is left as a stub proof a small label over a few text marks entrance nav settles, then headline → support → field → proof rise; reduced motion drops the travel
You fill in 7 fields — the braced lines at the top. Everything below them is fixed.
- 1The brief (one line)
- 2The wordmark + action
- 3The headline (one or two short lines)
- 4The support line
- 5The capture
- 6The proof row
- 7The palette (one :root block)
Waitlist Hero Page
What this makes
One line in, one self-contained index.html out: a full-viewport waitlist hero — a glass navbar, one headline, an email field with a join button that turns into a thank-you, and a quiet proof row.
The whole template, in one piece. The steps below are the entire workflow.
How to use it
- Copy the whole template with the button above.
- Replace the seven slot lines — the headline sets the promise; the capture line names the placeholder, the button and the thank-you.
- Paste it into any coding agent or model in one message. It returns one index.html.
- Save the file and open it in a browser; type an address and submit to see the field become the thank-you.
- Wire the submit to your own list later — the template leaves one function to fill.
What you swap
- The brief (one line)
- an early-access waitlist for Vibary — AI design, in the browser
- The wordmark + action
- VIBARY · action: Sign in
- The headline (one or two short lines)
- Design by saying it. / Be first in line.
- The support line
- Early access to the studio, one paste at a time.
- The capture
- placeholder: [email protected] · button: Join the waitlist · thanks: You're in — watch your inbox.
- The proof row
- label: Joining now · marks: makers, teams, tinkerers
- The palette (one :root block)
- --ground #0a0a0b · --ink #f2f2f3 · --muted #a3a3ad · --accent #7c7cf0 · --panel #131316
Before it runs
- One ask: an email, and nothing else — a waitlist that also wants a name and a company is a form, not a door.
- A headline short enough to sit above one field; this screen is the field, framed.
- A palette of five values — the ground, the glass and the button are drawn from them.
When to reach for it
When the whole point of the screen is one email — a launch waitlist, an early-access door, a coming-soon page. The capture, the success state and the entrance are fixed; the words and palette are yours.
What changes
- A single index.html with no build step and no outside request: one full-viewport hero built around a single email field.
- A glass navbar with a wordmark and one action, floating over a ground drawn entirely in CSS.
- A centred headline and one support line, then an inline email field and a join button on one pill.
- On submit the field gives way to a thank-you in place — no page reload, no second screen — so the reward is immediate.
- A quiet proof row underneath, and one staggered entrance; with reduced motion the travel is dropped and the screen arrives composed.
Pairs with
- 404 Error PageOne line in, one self-contained index.html out: a full-viewport 404 screen — a giant code numeral over a drawn ground, one line of apology, and a single way back home.
- Count-Up StatsOne line in, one self-contained index.html out: a wall of figures that count up from zero the moment they scroll into view — each a number, a label and a small bar that fills, on a dark ground.
- Mobile Profile PageOne line in, one self-contained index.html out: a single mobile screen inside a phone frame — a drawn media header, an identity block, a grid of glass stat cards, and a half-card that teases the scroll.