← Zurück zur Zeitreise

Making-of / Guide

Wie EPOCHE entstand

EPOCHE ist ein Film, den man scrollt: vier KI-Zukunftskapitel, jedes mit eigenem Licht. Dieser Guide dokumentiert Konzept, Technik und die drei Iterationen — reproduzierbar für eigene Projekte.

1 — Das Konzept

Die Erzählung über 24 Jahre KI-Zukunft braucht keinen Text-Teppich, sondern Dramaturgie. Der Träger ist Farbe: Aufbruch (warmes Papier) → Beschleunigung (Neonviolett) → Umbruch (Signalrot) → offener Horizont (Tiefsee mit Cyan-Linie). Die Jahreszahlen sind die Architektur der Seite — monumental, variabel, in Bewegung. Wichtig: Das Essay ist als Spekulation gekennzeichnet, nicht als Prognose.

DIE FARBREISE: 2026 → 2032 → 2040 → 2050

2 — Die Technik

WebGL-Himmel ohne Frameworks

Der gesamte Hintergrund ist ein einziges Fullscreen-Dreieck mit einem handgeschriebenen Fragment-Shader: fraktales Rauschen (fBm), das sich selbst verzerrt („domain warping“) und so wolkige, fließende Strukturen erzeugt. Kein Three.js, keine Bibliothek — rund 30 Zeilen GLSL.

float warp = fbm(q * 1.4 + vec2(t, -t*.6));
float n = fbm(q * 2.1 + warp * 1.6);
vec3 col = mix(uC1, uC2, smoothstep(.25, .85, n));

Farbdramaturgie als Datenstruktur

Fünf Farb-Stationen (Scrollposition + drei Farben + Horizont-Intensität) liegen als Array im JavaScript. Beim Scrollen wird zwischen den Stationen mit smoothstep interpoliert und als Uniform an den Shader übergeben. Ohne WebGL fällt die Seite auf eine interpolierte background-color zurück — die Dramaturgie bleibt erhalten.

Jahreszahlen als variable Architektur

Archivo ist als variabler Font mit Breiten-Achse eingebunden. Pro Frame wird die Nähe jedes Kapitels zur Viewport-Mitte gemessen und in font-variation-settings übersetzt: Die Jahreszahl wird breiter und schwerer, je näher sie dem Betrachter kommt (wdth 62→125, wght 300→900) — Typografie als Kamerabewegung.

3 — Die drei Iterationen

4 — Den Prozess reproduzieren

1. Dramaturgie vor Layout: Erst die emotionale Kurve festlegen (hier: hell → grell → dunkel → offen), dann Farben je Station wählen, dann erst Sektionen bauen.
2. Ein Effekt, konsequent: Ein einziger Shader trägt die ganze Seite. Lieber einen Effekt beherrschen als fünf stapeln.
3. Variable Fonts als Motion-Werkzeug: Breiten-/Gewichtsachsen an Scrollposition koppeln — das wirkt teurer als jede Keyframe-Animation.
4. Iterieren nach Sichtprüfung: Jede Iteration beantwortet ein beobachtetes Problem (Lesbarkeit → Komposition → Robustheit), kein Neubau.
5. Werkzeuge: Claude Code (Fable 5), handgeschriebenes GLSL/JS ohne Dependencies, Archivo (SIL OFL) self-hosted, Netlify-Deploy.

---

Teil der Serie „5 Websites, 5 Welten“ — fünf grundlegend unterschiedliche, technisch anspruchsvolle Websites, jede mit eigenem Guide.

← Zur Zeitreise EPOCHE