Error 404 · Apolo 8
Hemos llegado hasta aquí. La página, no.
Desde la Luna se ve toda la Tierra, pero esta dirección no aparece por ningún lado.
Volver a casaHTML + CSS404
404 Earthrise
La Tierra asoma por el horizonte de la Luna, como en la foto del Apolo 8, delante de un 404 enorme.
Ajustes
1x
Código
<!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 · Página no encontrada</title>
<style>
body { margin: 0; background: #000; }
.n4-earthrise {
--accent: #4aa3ff;
--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-earthrise *,.n4-earthrise *::before,.n4-earthrise *::after {
box-sizing: border-box;
}
.n4-earthrise .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-earthrise .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-earthrise .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-earthrise .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-earthrise .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-earthrise .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-earthrise .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-earthrise .n4-stars,.n4-earthrise .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-earthrise .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-earthrise-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-earthrise .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-earthrise-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-earthrise [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-earthrise-tw {
from {
opacity: .3;
}
}
@keyframes n4-earthrise-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-earthrise-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-earthrise *,.n4-earthrise *::before,.n4-earthrise *::after {
animation: none!important;
transition: none!important;
}
}
.n4-earthrise .n4-ghost {
position: absolute;
top: 6%;
left: 0;
right: 0;
margin: 0;
font-size: 36cqmin;
font-weight: 700;
letter-spacing: -.05em;
line-height: 1;
color: transparent;
-webkit-text-stroke: 1px rgba(255,255,255,.16);
}
.n4-earthrise .n4-earth {
position: absolute;
left: 50%;
top: 21%;
z-index: 1;
width: 30cqmin;
aspect-ratio: 1;
margin-left: -15cqmin;
overflow: hidden;
border-radius: 50%;
background: radial-gradient(circle at 32% 30%,#a8dbff 0,#2f7fe0 30%,#123f8c 62%,#061a3f 100%);
box-shadow: 0 0 5cqmin color-mix(in srgb,var(--accent) 45%,transparent),0 0 16cqmin color-mix(in srgb,var(--accent) 16%,transparent);
animation: n4-earthrise-rise calc(3.2s / var(--k)) cubic-bezier(.16,.84,.3,1) both;
}
.n4-earthrise .n4-earth::before {
content: "";
position: absolute;
inset: 0 -50%;
background: radial-gradient(ellipse 9% 5% at 22% 30%,rgba(255,255,255,.85),transparent 70%),radial-gradient(ellipse 14% 3.5% at 48% 20%,rgba(255,255,255,.7),transparent 70%),radial-gradient(ellipse 12% 4% at 66% 58%,rgba(255,255,255,.7),transparent 70%),radial-gradient(ellipse 7% 3% at 36% 76%,rgba(255,255,255,.6),transparent 70%),radial-gradient(ellipse 9% 12% at 30% 45%,#4e8f3a 40%,transparent 72%),radial-gradient(ellipse 6% 9% at 36% 60%,#7a8f3a 35%,transparent 70%),radial-gradient(ellipse 10% 14% at 58% 38%,#3f7d34 40%,transparent 72%),radial-gradient(ellipse 5% 7% at 63% 26%,#8a7a45 30%,transparent 70%),radial-gradient(ellipse 8% 10% at 76% 62%,#4a8a3a 40%,transparent 72%);
animation: n4-earthrise-drift calc(40s / var(--k)) linear infinite alternate;
}
.n4-earthrise .n4-earth::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
box-shadow: inset -7cqmin -4cqmin 7cqmin rgba(0,0,0,.92),inset 1cqmin 1cqmin 3cqmin rgba(255,255,255,.25);
}
.n4-earthrise .n4-ground {
position: absolute;
left: -50%;
top: 54%;
z-index: 2;
width: 200%;
height: 100%;
border-radius: 50% 50% 0 0/12% 12% 0 0;
background: radial-gradient(circle at 30% 10%,rgba(0,0,0,.35) 0 1.2cqmin,transparent 1.5cqmin),radial-gradient(circle at 62% 7%,rgba(0,0,0,.3) 0 2cqmin,transparent 2.4cqmin),radial-gradient(ellipse 4% 1.6% at 45% 18%,rgba(0,0,0,.35),transparent),radial-gradient(ellipse 7% 2.4% at 70% 24%,rgba(0,0,0,.3),transparent),radial-gradient(ellipse 3% 1.2% at 20% 28%,rgba(0,0,0,.35),transparent),linear-gradient(#a1a1a6,#48484a 16%,#1c1c1e 42%,#050505);
box-shadow: 0 -1px 0 rgba(255,255,255,.4),0 -3cqmin 8cqmin rgba(0,0,0,.6);
}
.n4-earthrise .n4-copy {
position: absolute;
left: 0;
right: 0;
bottom: 7cqh;
margin: 0 auto;
}
.n4-earthrise .n4-copy>* {
animation: n4-earthrise-fade calc(1s / var(--k)) calc(1.4s / var(--k)) cubic-bezier(.2,.7,.2,1) both;
}
@keyframes n4-earthrise-rise {
from {
transform: translateY(42cqmin);
}
}
@keyframes n4-earthrise-drift {
to {
transform: translateX(25%);
}
}
</style>
</head>
<body>
<main class="n4-earthrise">
<div class="n4-stars" aria-hidden="true"></div>
<p class="n4-ghost" aria-hidden="true">404</p>
<div class="n4-earth" aria-hidden="true"></div>
<div class="n4-ground" aria-hidden="true"></div>
<div class="n4-copy">
<span class="n4-tag">Error 404 · Apolo 8</span>
<h1 class="n4-title">Hemos llegado hasta aquí. La página, no.</h1>
<p class="n4-sub">Desde la Luna se ve toda la Tierra, pero esta dirección no aparece por ningún lado.</p>
<a class="n4-cta" href="/">Volver a casa</a>
</div>
</main>
</body>
</html>
Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en 404
Dónde usarlo
A una página de error se llega más de lo que parece: un enlace viejo en una newsletter, una errata en la URL o una página que moviste al rediseñar. Esta escena de Earthrise convierte ese tropiezo en algo tranquilo. Encaja en una agencia de viajes, un museo de ciencia o un proyecto medioambiental que quiera una página 404 personalizada.
Puedes pegar el 404.html tal cual, o cambiar el azul y bajar la velocidad si lo quieres más contemplativo. Deja el texto del botón corto, algo como «Volver a casa», para que nadie tenga que pensar a dónde ir.