Error 404 · Mar de la Tranquilidad
The Eagle has landed… on the wrong page.
One small step for a user, one giant 404 for mankind.
Lift off to homeHTML + CSS404
Moon landing 404
The lunar module comes down with its engine lit, kicks up dust as it lands, and only then shows the message.
Settings
1x
Code
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex" />
<title>404 · Page not found</title>
<style>
body { margin: 0; background: #000; }
.n4-landing {
--accent: #ffcc4d;
--k: 1;
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
container-type: size;
display: grid;
place-items: center;
background: #000;
color: #f5f5f7;
font-family: -apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",system-ui,sans-serif;
-webkit-font-smoothing: antialiased;
text-align: center;
line-height: 1.4;
}
.n4-landing *,.n4-landing *::before,.n4-landing *::after {
box-sizing: border-box;
}
.n4-landing .n4-copy {
position: relative;
z-index: 5;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.6cqmin;
width: 100%;
max-width: 680px;
padding: 0 6cqw;
}
.n4-landing .n4-title {
margin: 0;
font-size: clamp(17px,4.2cqmin,36px);
font-weight: 600;
letter-spacing: -.02em;
line-height: 1.15;
text-wrap: balance;
}
.n4-landing .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-landing .n4-tag {
font: 600 clamp(10px,1.9cqmin,13px)/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--accent);
}
.n4-landing .n4-cta {
margin-top: 1.8cqmin;
display: inline-flex;
align-items: center;
gap: .5em;
padding: .85em 1.5em;
border-radius: 999px;
background: #f5f5f7;
color: #000;
font-size: clamp(13px,2.2cqmin,16px);
font-weight: 600;
text-decoration: none;
transition: transform .3s cubic-bezier(.25,.1,.25,1),box-shadow .3s cubic-bezier(.25,.1,.25,1);
}
.n4-landing .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-landing .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-landing .n4-stars,.n4-landing .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-landing .n4-stars {
background-image: radial-gradient(1px 1px at 8% 12%,#fff 60%,transparent),radial-gradient(1px 1px at 22% 68%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 35% 24%,#fff 60%,transparent),radial-gradient(1px 1px at 48% 82%,#fff 60%,transparent),radial-gradient(1px 1px at 57% 9%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 66% 44%,#fff 60%,transparent),radial-gradient(1px 1px at 74% 72%,#fff 60%,transparent),radial-gradient(1px 1px at 86% 18%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 93% 58%,#fff 60%,transparent),radial-gradient(1px 1px at 14% 42%,#fff 60%,transparent),radial-gradient(1px 1px at 40% 55%,#fff 60%,transparent),radial-gradient(1px 1px at 81% 90%,#fff 60%,transparent),radial-gradient(1px 1px at 4% 88%,#fff 60%,transparent),radial-gradient(1px 1px at 62% 30%,#fff 60%,transparent);
opacity: .75;
animation: n4-landing-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-landing .n4-stars2 {
background-image: radial-gradient(2px 2px at 18% 30%,rgba(255,255,255,.9) 50%,transparent),radial-gradient(1.5px 1.5px at 72% 20%,rgba(255,255,255,.8) 50%,transparent),radial-gradient(2px 2px at 30% 85%,rgba(255,255,255,.7) 50%,transparent),radial-gradient(1.5px 1.5px at 88% 70%,rgba(255,255,255,.8) 50%,transparent),radial-gradient(2px 2px at 52% 60%,rgba(255,255,255,.6) 50%,transparent),radial-gradient(1.5px 1.5px at 6% 55%,rgba(255,255,255,.8) 50%,transparent);
opacity: .55;
animation: n4-landing-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-landing [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-landing-tw {
from {
opacity: .3;
}
}
@keyframes n4-landing-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-landing-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-landing *,.n4-landing *::before,.n4-landing *::after {
animation: none!important;
transition: none!important;
}
}
.n4-landing .n4-ghost {
position: absolute;
top: 5%;
left: 0;
right: 0;
margin: 0;
font-size: 34cqmin;
font-weight: 700;
letter-spacing: -.05em;
line-height: 1;
background: linear-gradient(180deg,color-mix(in srgb,var(--accent) 22%,transparent),transparent 85%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.n4-landing .n4-ground {
position: absolute;
left: -50%;
top: 62%;
z-index: 1;
width: 200%;
height: 100%;
border-radius: 50% 50% 0 0/8% 8% 0 0;
background: radial-gradient(ellipse 3% 1% at 38% 6%,rgba(0,0,0,.4),transparent),radial-gradient(ellipse 5% 1.4% at 63% 9%,rgba(0,0,0,.35),transparent),radial-gradient(ellipse 2% .8% at 55% 14%,rgba(0,0,0,.4),transparent),linear-gradient(#9a9aa0,#3a3a3c 12%,#141416 34%,#050505);
box-shadow: 0 -1px 0 rgba(255,255,255,.35);
}
.n4-landing .n4-lm {
position: absolute;
left: 50%;
bottom: 37.5%;
z-index: 2;
width: 26cqmin;
height: auto;
margin-left: -13cqmin;
overflow: visible;
margin-bottom: -.6cqmin;
filter: drop-shadow(0 1.5cqmin 2cqmin rgba(0,0,0,.6));
animation: n4-landing-land calc(3.4s / var(--k)) cubic-bezier(.22,.9,.3,1) both;
}
.n4-landing .n4-flame {
transform-box: fill-box;
transform-origin: 50% 0;
opacity: 0;
animation: n4-landing-flick .12s steps(2) infinite,n4-landing-off calc(3.4s / var(--k)) ease-in both;
}
.n4-landing .n4-dust {
position: absolute;
left: 50%;
bottom: 34%;
z-index: 3;
width: 60cqmin;
height: 9cqmin;
margin-left: -30cqmin;
border-radius: 50%;
background: radial-gradient(ellipse at 50% 60%,rgba(210,210,215,.55),transparent 65%);
filter: blur(1cqmin);
opacity: 0;
animation: n4-landing-dust calc(2.2s / var(--k)) calc(2.9s / var(--k)) ease-out both;
}
.n4-landing .n4-copy {
position: absolute;
left: 0;
right: 0;
bottom: 5cqh;
margin: 0 auto;
}
.n4-landing .n4-copy>* {
animation: n4-landing-fade calc(1s / var(--k)) calc(3.3s / var(--k)) cubic-bezier(.2,.7,.2,1) both;
}
@keyframes n4-landing-land {
from {
transform: translateY(-80cqh);
}
88% {
transform: translateY(.5cqmin) scaleY(.96);
}
}
@keyframes n4-landing-flick {
50% {
transform: scaleY(.8);
}
}
@keyframes n4-landing-off {
from,85% {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes n4-landing-dust {
from {
opacity: 0;
transform: scale(.25);
}
30% {
opacity: .9;
}
to {
opacity: 0;
transform: scale(1.5);
}
}
</style>
</head>
<body>
<main class="n4-landing">
<div class="n4-stars" aria-hidden="true"></div>
<p class="n4-ghost" aria-hidden="true">404</p>
<div class="n4-ground" aria-hidden="true"></div>
<svg class="n4-lm" viewBox="0 0 120 112" aria-hidden="true">
<defs>
<linearGradient id="n4ld-gold" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ffe89a"/><stop offset=".5" stop-color="#d9a51c"/><stop offset="1" stop-color="#8a6508"/></linearGradient>
<linearGradient id="n4ld-silver" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#f2f2f7"/><stop offset=".6" stop-color="#aeaeb2"/><stop offset="1" stop-color="#636366"/></linearGradient>
<radialGradient id="n4ld-fire" cx=".5" cy="0" r="1"><stop offset="0" stop-color="#fff"/><stop offset=".3" stop-color="#ffe28a"/><stop offset=".7" stop-color="#ff7a18"/><stop offset="1" stop-color="#ff7a18" stop-opacity="0"/></radialGradient>
</defs>
<polygon class="n4-flame" points="52,88 68,88 60,118" fill="url(#n4ld-fire)"/>
<g stroke="#c7c7cc" stroke-width="2.2" stroke-linecap="round">
<line x1="34" y1="70" x2="12" y2="102"/><line x1="86" y1="70" x2="108" y2="102"/>
<line x1="40" y1="80" x2="16" y2="100"/><line x1="80" y1="80" x2="104" y2="100"/>
</g>
<ellipse cx="12" cy="103" rx="8" ry="2.4" fill="#d1d1d6"/><ellipse cx="108" cy="103" rx="8" ry="2.4" fill="#d1d1d6"/>
<polygon points="55,82 65,82 69,89 51,89" fill="#636366"/>
<polygon points="34,50 86,50 94,58 94,74 86,82 34,82 26,74 26,58" fill="url(#n4ld-gold)"/>
<path d="M34 56h52M30 66h60M34 76h52" stroke="#fff" stroke-opacity=".22" stroke-width="1"/>
<polygon points="42,22 78,22 88,34 88,50 32,50 32,34" fill="url(#n4ld-silver)"/>
<polygon points="45,29 56,29 54,40 45,40" fill="#1c1c1e"/>
<line x1="68" y1="22" x2="68" y2="11" stroke="#aeaeb2" stroke-width="1.6"/>
<circle cx="68" cy="10" r="3" fill="#d1d1d6"/>
</svg>
<div class="n4-dust" aria-hidden="true"></div>
<div class="n4-copy">
<span class="n4-tag">Error 404 · Sea of Tranquility</span>
<h1 class="n4-title">The Eagle has landed… on the wrong page.</h1>
<p class="n4-sub">One small step for a user, one giant 404 for mankind.</p>
<a class="n4-cta" href="/">Lift off to home</a>
</div>
</main>
</body>
</html>
Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in 404
Where to use it
This one tells a tiny story before it says anything: descent, touchdown, a puff of dust, then the text. That short wait makes people stay and watch instead of closing the tab. A creative agency, an animation studio or a portfolio with a sense of humor will get the most out of this animated 404 page.
The default line plays on “one small step”, so keep the idea if your crowd will catch the reference. If the landing feels slow, push the speed up a little. For a support site where people are in a hurry, pick a quieter design.