Waitlist · Free

Earlybird

A playful waitlist page: bouncing mascot dot, live countdown, position-in-line reveal and a confetti burst on signup.

Earlybird — the waitlist design this prompt generates
Nunito + InterPlayful countdown, confetti signup
prompt.txt — paste as your first message
You are launching something people should be excited about. Build a complete one-page waitlist site for a fictional app called Earlybird ("The good stuff, before everyone else."). Copy is playful but not childish — no lorem ipsum.

ART DIRECTION — sunrise playful. Cream background #FFF9EC, ink #26221B, sunrise orange #FF8A00 as primary, cornflower #4C6FFF as the secondary accent. Soft 20px-radius cards with 2px ink borders and a slight hand-drawn feel (borders subtly uneven via border-radius variations). A small round mascot — an orange dot with two eyes (pure CSS) — appears in the nav and hops. Fonts via Google Fonts: "Nunito" 800 for headings (rounded, friendly), "Inter" for body. Mood: launch-day breakfast.

LAYOUT, top to bottom:
1. Mini nav — mascot dot + wordmark left; a small "launching soon" pill right.
2. Hero — centered: big rounded headline with one word underlined in a hand-drawn-style SVG squiggle, one fun sentence, then THE COUNTDOWN: four flip-style tiles (days/hours/mins/secs) ticking to a launch date 30 days from now.
3. The signup card — a single email field with a big orange "Save my spot" button. On submit (front-end only): the card flips to "You're #214 in line 🎉" (pick a believable number), a CONFETTI BURST of 40 CSS particles in orange/blue/cream fires once, and a "move up the line" note appears with a fake referral link and a copy button.
4. What's coming — three teaser cards, each with an inline-SVG doodle icon, a feature name, and one intriguing line (written as a secret, e.g. "The thing with the maps. You'll see.").
5. Social proof strip — three short fictional tweets in bordered cards with tiny avatar dots.
6. FAQ — four items, native details/summary, playful answers ("When do you launch?" — "30 days. The countdown isn't decorative.").
7. Footer — mascot waves (one-time wiggle on reveal), three links.

MOTION: countdown ticks every second with a small flip on change; mascot hops twice on load then rests; the squiggle underline draws itself 600ms after load; confetti particles burst with randomized vectors and fall with gravity over 1.2s then clean up; teaser cards tilt ±1.5deg alternately on reveal. Respect prefers-reduced-motion: no confetti (show a simple "🎉 You're in!"), no hops, countdown updates without flips.

RULES: responsive at 375 / 768 / 1280. The email field must be a real labeled input with validation styling; make clear in a tiny note that this is a demo signup unless connected. Semantic HTML, focus states, body contrast at least 4.5:1. All art is CSS and inline SVG — no images, no libraries. Countdown target is computed in JS from "today + 30 days" so it never expires; with JavaScript off, tiles show "30d 00:00:00" statically.

Why these prompts work

Every template follows the same five-part structure, so the result is consistent every time:

01
Role + output contract

What to build and the quality bar — no lorem ipsum, real copy.

02
Art direction

Exact hex palette, Google-Fonts pairing, and mood keywords.

03
Layout spec

Section by section, top to bottom — nothing left to chance.

04
Motion spec

Entrances, scroll reveals, hovers, and timing curves.

05
Rules

Responsive breakpoints, accessibility, and what the AI must not do.

More one-shot designs

Keep going