Error 404 · Apolo 8
Nous sommes allés jusqu’ici. La page, non.
Depuis la Lune, on voit toute la Terre, mais cette adresse reste introuvable.
Rentrer à la maisonHTML + CSS404
404 Earthrise
La Terre se lève sur l’horizon lunaire, comme sur la photo d’Apollo 8, devant un 404 géant.
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-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">Erreur 404 · Apollo 8</span>
<h1 class="n4-title">Nous sommes allés jusqu’ici. La page, non.</h1>
<p class="n4-sub">Depuis la Lune, on voit toute la Terre, mais cette adresse reste introuvable.</p>
<a class="n4-cta" href="/">Rentrer à la maison</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
On tombe sur une page d’erreur plus souvent qu’on ne le croit : un vieux lien dans une newsletter, une faute de frappe, une page déplacée après une refonte. Cette scène d’Earthrise transforme ce moment en quelque chose de calme. Elle convient à une agence de voyages, un musée scientifique ou un projet environnemental qui veut une page 404 personnalisée.
Vous pouvez coller le 404.html tel quel, ou changer le bleu et ralentir l’animation pour un rendu plus contemplatif. Gardez un texte de bouton court, comme « Retour à l’accueil », pour que personne n’ait à chercher où aller.