Ohne Schwerkraft schweben Seiten davon.
Wir haben die ganze Station abgesucht: Diese hier ist durch die Luke entwischt.
Zurück zur StationHTML + CSS404
Schwerelos-404
Die 4, die 0 und die 4 schweben im eigenen Rhythmus zwischen Trümmern der Station, die Maus sorgt für Tiefe.
Einstellungen
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 · Seite nicht gefunden</title>
<style>
body { margin: 0; background: #000; }
.n4-zerog {
--accent: #bf5af2;
--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-zerog *,.n4-zerog *::before,.n4-zerog *::after {
box-sizing: border-box;
}
.n4-zerog .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-zerog .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-zerog .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-zerog .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-zerog .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-zerog .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-zerog .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-zerog .n4-stars,.n4-zerog .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-zerog .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-zerog-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-zerog .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-zerog-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-zerog [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-zerog-tw {
from {
opacity: .3;
}
}
@keyframes n4-zerog-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-zerog-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-zerog *,.n4-zerog *::before,.n4-zerog *::after {
animation: none!important;
transition: none!important;
}
}
.n4-zerog {
background: radial-gradient(80% 60% at 50% 40%,#140a1f,#000 72%);
}
.n4-zerog .n4-num {
margin: 0 0 1cqmin;
display: flex;
gap: .04em;
font-size: clamp(84px,28cqmin,280px);
font-weight: 800;
letter-spacing: -.04em;
line-height: 1;
}
.n4-zerog .n4-num span {
display: block;
}
.n4-zerog .n4-num b {
display: block;
background: linear-gradient(160deg,#fff 20%,color-mix(in srgb,var(--accent) 80%,#fff) 60%,color-mix(in srgb,var(--accent) 60%,#000));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 .06em .12em color-mix(in srgb,var(--accent) 35%,transparent));
}
.n4-zerog .n4-f1 {
animation: n4-zerog-f1 calc(7s / var(--k)) ease-in-out infinite;
}
.n4-zerog .n4-f2 {
animation: n4-zerog-f2 calc(9s / var(--k)) ease-in-out infinite;
}
.n4-zerog .n4-f3 {
animation: n4-zerog-f3 calc(8s / var(--k)) ease-in-out infinite;
}
.n4-zerog .n4-deb {
position: absolute;
left: 0;
top: var(--t);
width: calc(var(--z) * 1cqmin);
height: calc(var(--z) * .6cqmin);
border-radius: .3cqmin;
background: linear-gradient(135deg,#d1d1d6,#636366);
box-shadow: 0 0 1cqmin rgba(255,255,255,.12);
animation: n4-zerog-cross calc(var(--w) / var(--k)) var(--dl) linear infinite;
}
.n4-zerog .n4-copy>:not(.n4-num) {
animation: n4-zerog-fade calc(1s / var(--k)) calc(.4s / var(--k)) cubic-bezier(.2,.7,.2,1) both;
}
@keyframes n4-zerog-f1 {
50% {
transform: translate(-1.5cqmin,-3cqmin) rotate(-8deg);
}
}
@keyframes n4-zerog-f2 {
50% {
transform: translate(1cqmin,2.5cqmin) rotate(6deg);
}
}
@keyframes n4-zerog-f3 {
50% {
transform: translate(2cqmin,-2cqmin) rotate(10deg);
}
}
@keyframes n4-zerog-cross {
from {
transform: translateX(-10cqw) rotate(0);
}
to {
transform: translateX(110cqw) rotate(2turn);
}
}
</style>
</head>
<body>
<main class="n4-zerog">
<div class="n4-stars" data-depth="8" aria-hidden="true"></div>
<div class="n4-stars2" data-depth="20" aria-hidden="true"></div>
<i class="n4-deb" style="--t:18%;--z:2.4;--w:18s;--dl:0s" aria-hidden="true"></i>
<i class="n4-deb" style="--t:72%;--z:1.4;--w:26s;--dl:-9s" aria-hidden="true"></i>
<i class="n4-deb" style="--t:40%;--z:3.2;--w:22s;--dl:-15s" aria-hidden="true"></i>
<i class="n4-deb" style="--t:86%;--z:2;--w:30s;--dl:-4s" aria-hidden="true"></i>
<div class="n4-copy">
<p class="n4-num" aria-hidden="true">
<span data-depth="-30"><b class="n4-f1">4</b></span>
<span data-depth="-18"><b class="n4-f2">0</b></span>
<span data-depth="-40"><b class="n4-f3">4</b></span>
</p>
<h1 class="n4-title">Ohne Schwerkraft schweben Seiten davon.</h1>
<p class="n4-sub">Wir haben die ganze Station abgesucht: Diese hier ist durch die Luke entwischt.</p>
<a class="n4-cta" href="/">Zurück zur Station</a>
</div>
</main>
<script>
document.querySelectorAll(".n4-zerog").forEach((el) => {
const layers = el.querySelectorAll("[data-depth]");
const move = (e) => {
const r = el.getBoundingClientRect();
const x = (e.clientX - r.left) / r.width - 0.5;
const y = (e.clientY - r.top) / r.height - 0.5;
layers.forEach((l) => {
const d = Number(l.dataset.depth);
l.style.transform = `translate3d(${-x * d}px, ${-y * d}px, 0)`;
});
};
el.addEventListener("pointermove", move);
});
</script>
</body>
</html>
Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus 404
Wofür du ihn nutzen kannst
Schwebende Ziffern wirken leicht und ein bisschen albern, genau die Stimmung, die du brauchst, wenn jemand gerade auf einen toten Link geklickt hat. Der Besucher fühlt sich nicht ertappt. Ein Produktstudio, eine App oder ein Onlineshop mit verspielter Marke kann diese schwerelose 404-Seite nutzen, ohne dass sie fehl am Platz wirkt.
Standardmäßig ist sie violett, funktioniert aber mit fast jeder Akzentfarbe. Nimm am besten die deines Haupt-Buttons. Lenkt das Schweben vom Text ab, senk das Tempo etwas. Wichtig ist hier vor allem der Button zurück.