Control de misión · Canal 404
Pérdida de señal
El módulo no responde en esta dirección. Recomendamos abortar y volver a la base.
Abortar misiónHTML + CSS404
404 Control de misión
Una terminal verde de control de misión con radar, un 404 que parpadea y un registro que se escribe solo.
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-mission {
--accent: #30d158;
--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-mission *,.n4-mission *::before,.n4-mission *::after {
box-sizing: border-box;
}
.n4-mission .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-mission .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-mission .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-mission .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-mission .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-mission .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-mission .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-mission .n4-stars,.n4-mission .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-mission .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-mission-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-mission .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-mission-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-mission [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-mission-tw {
from {
opacity: .3;
}
}
@keyframes n4-mission-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-mission-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-mission *,.n4-mission *::before,.n4-mission *::after {
animation: none!important;
transition: none!important;
}
}
.n4-mission {
font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
background: radial-gradient(80% 70% at 50% 45%,#04140a,#000 75%);
}
.n4-mission::after {
content: "";
position: absolute;
inset: 0;
z-index: 6;
pointer-events: none;
background: repeating-linear-gradient(transparent 0 2px,rgba(0,0,0,.28) 2px 3px);
}
.n4-mission .n4-grid {
position: absolute;
inset: 0;
background-image: linear-gradient(color-mix(in srgb,var(--accent) 9%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--accent) 9%,transparent) 1px,transparent 1px);
background-size: 5cqmin 5cqmin;
-webkit-mask: radial-gradient(circle at 50% 45%,#000,transparent 72%);
mask: radial-gradient(circle at 50% 45%,#000,transparent 72%);
}
.n4-mission .n4-copy {
gap: 2cqmin;
}
.n4-mission .n4-head {
display: flex;
align-items: center;
gap: 1.4cqmin;
}
.n4-mission .n4-radar {
position: relative;
width: clamp(18px,4cqmin,30px);
aspect-ratio: 1;
border-radius: 50%;
border: 1px solid color-mix(in srgb,var(--accent) 60%,transparent);
background: conic-gradient(from 0deg,color-mix(in srgb,var(--accent) 70%,transparent),transparent 30%);
animation: n4-mission-spin calc(2.4s / var(--k)) linear infinite;
}
.n4-mission .n4-num {
margin: 0;
font-size: clamp(76px,24cqmin,240px);
font-weight: 700;
line-height: 1;
letter-spacing: .02em;
color: var(--accent);
text-shadow: 0 0 .06em color-mix(in srgb,var(--accent) 80%,#fff),0 0 .3em color-mix(in srgb,var(--accent) 40%,transparent);
animation: n4-mission-flicker calc(5s / var(--k)) steps(1) infinite;
}
.n4-mission .n4-title {
font-size: clamp(16px,3.6cqmin,30px);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em;
color: #eafff0;
}
.n4-mission .n4-log {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .35em;
font-size: clamp(11px,2cqmin,15px);
color: color-mix(in srgb,var(--accent) 85%,#fff);
}
.n4-mission .n4-log li {
overflow: hidden;
white-space: nowrap;
animation: n4-mission-type calc(1.1s / var(--k)) steps(34,end) both;
}
.n4-mission .n4-log li:nth-child(2) {
animation-delay: calc(1.2s / var(--k));
}
.n4-mission .n4-log li:nth-child(3) {
animation-delay: calc(2.4s / var(--k));
}
.n4-mission .n4-log li:last-child::after {
content: "▌";
margin-left: .2em;
animation: n4-mission-blink 1s steps(1) infinite;
}
.n4-mission .n4-sub {
color: #7c8c80;
}
.n4-mission .n4-cta {
background: var(--accent);
color: #00160a;
font-family: inherit;
letter-spacing: .04em;
}
@keyframes n4-mission-flicker {
0%,100% {
opacity: 1;
}
42% {
opacity: .55;
}
43% {
opacity: 1;
}
78% {
opacity: .8;
}
79% {
opacity: 1;
}
}
@keyframes n4-mission-type {
from {
max-width: 0;
}
to {
max-width: 48ch;
}
}
@keyframes n4-mission-blink {
50% {
opacity: 0;
}
}
</style>
</head>
<body>
<main class="n4-mission">
<div class="n4-grid" aria-hidden="true"></div>
<div class="n4-copy">
<div class="n4-head"><span class="n4-radar" aria-hidden="true"></span><span class="n4-tag">Control de misión · Canal 404</span></div>
<p class="n4-num" aria-hidden="true">404</p>
<h1 class="n4-title">Pérdida de señal</h1>
<ol class="n4-log" aria-hidden="true">
<li>> Buscando la ruta solicitada…</li>
<li>> Telemetría: 0 paquetes recibidos</li>
<li>> Estado: página fuera de órbita</li>
</ol>
<p class="n4-sub">El módulo no responde en esta dirección. Recomendamos abortar y volver a la base.</p>
<a class="n4-cta" href="/">Abortar misión</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 quien programa le suele hacer gracia una 404 que habla su idioma. Parece un monitor antiguo de sala de control, con líneas de barrido, y el registro se lee como la telemetría de un módulo perdido. Esta página 404 estilo terminal encaja en una empresa de hosting, una startup de herramientas para desarrolladores o un blog técnico.
El verde sobre negro es parte del encanto, pero puedes pasarlo a ámbar o cian si tu marca tira por ahí. Deja el mensaje corto: el registro ya pone la escena y un párrafo largo debajo rompe el efecto.