Cette page a franchi l’horizon des événements.
Rien n’en revient, pas même la lumière. Vous, en revanche, pouvez revenir à l’accueil.
S’échapper vers l’accueilHTML + CSS404
404 Trou noir
Un trou noir avec son disque d’accrétion en rotation et un anneau de photons, dans l’esprit d’Interstellar.
Réglages
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 introuvable</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">Cette page a franchi l’horizon des événements.</h1>
<p class="n4-sub">Rien n’en revient, pas même la lumière. Vous, en revanche, pouvez revenir à l’accueil.</p>
<a class="n4-cta" href="/">S’échapper vers l’accueil</a>
</div>
</main>
</body>
</html>
Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans 404
Où l’utiliser
Un lien cassé est une impasse, et cette page l’assume avec un peu de dramaturgie : la page « a franchi l’horizon des événements ». Une 404 de ce genre donne envie de faire une capture d’écran plutôt que de partir. Elle va bien à un studio de jeux vidéo, une société de production ou un label à l’univers sombre et cinématographique.
L’orange ressort très bien sur le noir, mais essayez un bleu froid ou un violet si votre marque est moins chaleureuse. Vérifiez que votre serveur renvoie bien un vrai code 404 avec cette page, pour que Google n’indexe pas l’adresse disparue.