Eine 404-Seite, die wirklich Spaß macht

Am Wochenende habe ich eine eigene 404-Seite gebaut. Nicht weil mir Analytics rote Lampen blinken — auf einem fünfseitigen Portfolio läuft quasi niemand in tote Links — sondern weil mir das Standard-”Seite nicht gefunden” schon beim eigenen Klicken auf die Nerven ging.

Warum überhaupt

Wer auf einer 404 landet, ist eh schon mies drauf. Vertippt, alten Link erwischt, von einer KI-Antwort auf einen Pfad geschickt, den es nie gab. Da hat man eigentlich nur einen Job: nicht noch eins draufsetzen, und einen Weg raus anbieten.

Was ich an den meisten “lustigen” 404s nicht mag: entweder eine Wand aus Corporate-Entschuldigungen, oder ein riesiges Illu-Bild ohne Button. Ich wollte den Mittelweg — kurzer Witz, dann zwei klare Türen zurück.

Der Text

Die Tonalität ist die vom Rest der Seite. Das Portfolio ist direkt, ein bisschen verspielt, keine Bank — also klingt die 404 auch so:

• Augenbraue: VERBINDUNG VERLOREN · FEHLER 404
• Headline: Diese Seite wurde von Aliens entführt.
• Body: Wir haben jede Route durchsucht. Sogar bei /api/geheime-kekse nachgesehen.
• Abschluss: Entweder gab es diese URL nie, oder du hast gerade ein Wurmloch entdeckt. Beides irgendwie cool, ehrlich gesagt.

Für die englische Version musste ich nicht wörtlich übersetzen, sondern die gleiche Energie treffen. This page got abducted by aliens. passt. Aus /api/geheime-kekse wurde /api/secret-cookies, und aus Zurück zur Erde wurde Beam me home — etwas mehr Star Trek auf der EN-Seite, etwas bodenständiger auf der DE-Seite.

Beide Texte liegen unter notfound.* in en.json / de.json, wie jeder andere String auf der Site. Den data-scramble-Effekt aus der Navigation bekommen sie umsonst dazu.

Die Animation

Reines CSS. Kein JS, kein GSAP. Die Seite hängt eh am PortfolioLayout, das die Webflow-IX2-Runtime bewusst nicht lädt, und das wollte ich nicht für eine Seite kaputtmachen, die im besten Fall niemand sieht.

Was zusammen das Bild ergibt:

• Ein großes 404 in Archivo Black. Die beiden 4er kippen in Gegenrichtung und atmen über fünf Sekunden hoch und runter.
• Die 0 ist gar keine Ziffer mehr, sondern ein Div mit Radial- Gradient von Amber über Rot in dunkles Oxid, ein paar Atmosphären- Bändern als zweiter Layer und einem leichten Hell/Dunkel-Atmen obendrauf — sieht aus wie ein winziger Planet.
• Ein 2-px-Ring liegt bei -18° auf der Null, leicht gestaucht. Reicht als Saturn-Andeutung.
• Ein SVG-Astronaut (Helm, Visier-Reflex, Brust-Patch mit “404”, rote Antennenlampe) umkreist die Szene. Der Orbit-Container dreht sich im Uhrzeigersinn, der Astronaut counter-rotiert, damit sein Kopf immer oben bleibt. Eine zweite Bob-Animation gibt ihm das Zero-G-Schweben.
• Zwei Sternenfelder über radial-gradient mit versetzten Funkel- Timings (4s und 7s). Kostet kein einziges Asset.

@keyframes nf-orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes nf-counter-spin {
  from { transform: translateX(-50%) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(-360deg); }
}

Alles davon liegt hinter einem prefers-reduced-motion-Guard. Wer das im OS reduziert hat, sieht das gleiche Layout, einfach eingefroren. Niemand soll von einer 404 motion sick werden.

Astro und die 404-Eigenheit

Eine Sache, die mich beim Setup kurz aufgehalten hat: src/pages/404.astro wird von Astro als dist/404.html (flach) exportiert, auch wenn build.format für den Rest der Seite auf directory steht. Cloudflare Pages, Netlify, Vercel picken diese Datei automatisch als seitenweite 404.

src/pages/de/404.astro greift wieder die Directory-Regel und landet als dist/de/404/index.html. Wie die einzelnen Plattformen verschachtelte 404s behandeln, ist unterschiedlich — den deutschen Fallback verdrahte ich bei Gelegenheit über eine _redirects-Regel. Bis dahin landet eine unbekannte URL auf der englischen 404, was für v1 völlig okay ist.

Was hängen geblieben ist

Eine kleine CSS-Szene wirkt am Ende durchdachter als ein riesiges Lottie und kostet ungefähr 4 KB Stylesheet. Den Witz so kurz wie möglich halten — eine Headline, ein Body-Satz, ein Abschluss, fertig. Und immer die zwei Buttons zurück, sonst nervt der Joke beim dritten Lesen.

Falls du es selbst sehen willst: einfach einen Pfad ausdenken. Probier /abducted-by-aliens — genau dafür ist sie da.