404 Page · Free
Lost in Space
A 404 page people screenshot: a drifting CSS astronaut that follows the cursor, layered star parallax, and a way back home.

Space Grotesk + InterInteractive astronaut, drifting star field
prompt.txt — paste as your first message
You are designing the best 404 page your product will ever ship. Build a complete standalone 404 page (index.html + styles.css + script.js) for a fictional product called Meridian. Copy is witty in one line, useful in the next — no lorem ipsum.
ART DIRECTION — adrift. Background #060714 with three layered CSS star fields (box-shadow dot fields at different sizes/opacities) that PARALLAX subtly against cursor movement. Text #F4F6FF, muted #9BA3C7, warm accent #FFB86B (the visor glow). The astronaut is pure CSS/SVG: a rounded white suit, dark visor with a warm reflection streak, a curled tether line (SVG path) trailing off-screen. Fonts via Google Fonts: "Space Grotesk" 700 for the giant 404, "Inter" for body. Mood: calm cosmic humor.
LAYOUT, centered viewport (100vh, no scroll on desktop):
1. A giant "404" set at clamp(120px, 30vw, 280px) with a soft radial glow behind it, the zero replaced by a thin ring like a porthole.
2. The astronaut floats near the 404, gently bobbing; it DRIFTS a few pixels toward the cursor (lerped, requestAnimationFrame) and its visor reflection shifts with movement direction. On touch devices it just bobs.
3. One witty line ("This page drifted out of orbit.") and one useful line ("The link may be old, or the page moved.").
4. Two actions: a solid "Back to base" button (links to /) and a ghost "Report the broken link" mailto.
5. A tiny status line at the bottom: "error code: 404 — oxygen levels: fine".
MOTION: astronaut bobs on a 4s ease-in-out loop with a slight rotation (±3deg); cursor drift is a slow lerp (the astronaut never keeps up — that's the joke); star layers move at 3 different parallax rates against the cursor; the 404 glow pulses once every 6s; the tether sways. If the visitor is idle 10s, the astronaut slowly somersaults once. Respect prefers-reduced-motion: everything static except a gentle 8s bob.
RULES: works as a standalone page; on mobile it may scroll if needed but should fit most viewports. Semantic HTML (main, h1 "404"), focus-visible states on both actions, body contrast at least 4.5:1. All art is CSS and inline SVG — no images, no libraries. Fully presentable with JavaScript off (astronaut rests in place).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.