Esta página cruzó el horizonte de sucesos.
Nada vuelve de ahí, ni siquiera la luz. Pero tú sí puedes volver al inicio.
Escapar al inicioHTML + CSS404
404 Agujero negro
Un agujero negro con el disco de acreción girando y un anillo de fotones, muy al estilo Interstellar.
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-blackhole {
--accent: #ff9f0a;
--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-blackhole *,.n4-blackhole *::before,.n4-blackhole *::after {
box-sizing: border-box;
}
.n4-blackhole .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-blackhole .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-blackhole .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-blackhole .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-blackhole .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-blackhole .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-blackhole .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-blackhole .n4-stars,.n4-blackhole .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-blackhole .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-blackhole-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-blackhole .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-blackhole-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-blackhole [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-blackhole-tw {
from {
opacity: .3;
}
}
@keyframes n4-blackhole-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-blackhole-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-blackhole *,.n4-blackhole *::before,.n4-blackhole *::after {
animation: none!important;
transition: none!important;
}
}
.n4-blackhole {
background: radial-gradient(70% 55% at 50% 34%,#140a02,#000 70%);
}
.n4-blackhole .n4-sys {
position: relative;
width: min(80cqmin,560px);
height: min(40cqmin,280px);
margin-bottom: 1cqmin;
}
.n4-blackhole .n4-sys>span {
position: absolute;
left: 50%;
top: 50%;
}
.n4-blackhole .n4-hole {
z-index: 2;
width: 28%;
aspect-ratio: 1;
translate: -50% -50%;
border-radius: 50%;
background: #000;
box-shadow: 0 0 0 .3cqmin color-mix(in srgb,var(--accent) 50%,#fff),0 0 3cqmin 1cqmin color-mix(in srgb,var(--accent) 45%,transparent);
animation: n4-blackhole-breathe calc(6s / var(--k)) ease-in-out infinite;
}
.n4-blackhole .n4-lens {
z-index: 1;
width: 42%;
aspect-ratio: 1;
translate: -50% -50%;
border-radius: 50%;
background: conic-gradient(from 90deg,#fff3d6,var(--accent),#7a2a00,var(--accent),#ffe2a8,#b54700,#fff3d6);
-webkit-mask: radial-gradient(circle,transparent 58%,#000 62%,transparent 71%);
mask: radial-gradient(circle,transparent 58%,#000 62%,transparent 71%);
filter: blur(.5cqmin);
opacity: .9;
animation: n4-blackhole-spin calc(20s / var(--k)) linear infinite reverse;
}
.n4-blackhole .n4-disk {
width: 100%;
aspect-ratio: 1;
translate: -50% -50%;
transform: scaleY(.2);
}
.n4-blackhole .n4-disk i {
position: absolute;
inset: 0;
border-radius: 50%;
background: conic-gradient(from 0deg,#fff3d6,var(--accent),#7a2a00,color-mix(in srgb,var(--accent) 70%,#fff),#ffe2a8,#b54700,#fff3d6);
-webkit-mask: radial-gradient(circle,transparent 22%,#000 26%,#000 52%,transparent 70%);
mask: radial-gradient(circle,transparent 22%,#000 26%,#000 52%,transparent 70%);
filter: blur(.6cqmin);
animation: n4-blackhole-spin calc(8s / var(--k)) linear infinite;
}
.n4-blackhole .n4-back {
z-index: 0;
}
.n4-blackhole .n4-front {
z-index: 3;
-webkit-mask: linear-gradient(transparent 47%,#000 53%);
mask: linear-gradient(transparent 47%,#000 53%);
}
.n4-blackhole .n4-num {
font-size: clamp(28px,8cqmin,64px);
font-weight: 200;
letter-spacing: .35em;
margin-right: -.35em;
color: color-mix(in srgb,var(--accent) 45%,#fff);
}
@keyframes n4-blackhole-breathe {
50% {
box-shadow: 0 0 0 .35cqmin color-mix(in srgb,var(--accent) 60%,#fff),0 0 5cqmin 1.5cqmin color-mix(in srgb,var(--accent) 55%,transparent);
}
}
</style>
</head>
<body>
<main class="n4-blackhole">
<div class="n4-stars" aria-hidden="true"></div>
<div class="n4-copy">
<div class="n4-sys" aria-hidden="true">
<span class="n4-lens"></span>
<span class="n4-disk n4-back"><i></i></span>
<span class="n4-hole"></span>
<span class="n4-disk n4-front"><i></i></span>
</div>
<span class="n4-num" aria-hidden="true">404</span>
<h1 class="n4-title">Esta página cruzó el horizonte de sucesos.</h1>
<p class="n4-sub">Nada vuelve de ahí, ni siquiera la luz. Pero tú sí puedes volver al inicio.</p>
<a class="n4-cta" href="/">Escapar al inicio</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
Un enlace roto es un callejón sin salida, y esta página se lo toma con algo de dramatismo: la página «cruzó el horizonte de sucesos». Una 404 así da motivos para hacer captura en vez de irse sin más. Le va a un estudio de videojuegos, una productora de cine o un sello musical con estética oscura y cinematográfica.
El naranja luce mucho sobre el negro, pero prueba un azul frío o un violeta si tu marca es menos cálida. Asegúrate de que tu servidor devuelve un código 404 real con esta página, así Google deja de indexar la URL que ya no existe.