making-of / guide

Wie KERN/OS entstand

Eine Produktseite, die man nicht liest, sondern bedient: Bootsequenz, tippbare Kommandozeile, generatives ASCII-Terrain. Dieser Guide dokumentiert Konzept, Technik und die drei Iterationen.

1 — Das Konzept

Die dritte KI-Zukunfts-Studie der Serie sollte der maximale Kontrast zu den polierten Welten sein: Interaktion statt Politur. Ein fiktives Agenten-Betriebssystem wird als Maschine erzählt, die man anfasst — die Marketing-Inhalte sind Antworten des Systems auf echte Befehle. Bernstein-Phosphor statt Hacker-Grün: wärmer, eigenständiger, näher an echten CRT-Terminals der 80er.

Ehrlichkeit gehört zum Konzept: Die Seite kennzeichnet sich selbst mehrfach als fiktive Studie („lizenz: fiktiv — dieses produkt existiert nicht, die idee schon“).

2 — Die Technik

Die Mini-CLI (der Kern des Kerns)

Ein Objekt bildet Befehle auf Funktionen ab, ein Alias-Verzeichnis fängt Varianten wie hilfe oder ls ab. Jeder Befehl schreibt in einen role="log"-Container mit aria-live. Der Typewriter-Effekt ist eine rekursive setTimeout-Schleife — bei prefers-reduced-motion erscheint Text sofort.

var cmds = { help: ..., agents: ..., demo: ..., specs: ...,
             changelog: ..., guide: ..., connect: ..., clear: ... };
var aliases = { hilfe: 'help', ls: 'help', start: 'demo' };

CRT-Ästhetik ohne Bilder

Scanlines: ein fixiertes Overlay mit repeating-linear-gradient im Multiply-Blend.
Röhren-Vignette: radialer Verlauf als ::after auf dem Terminal.
Phosphor-Glühen: text-shadow plus langsam pulsierender box-shadow.

Generatives ASCII-Terrain

Zwei Oktaven Wertrauschen (handgeschriebene smoothNoise-Funktion, ~15 Zeilen) werden auf die Zeichenrampe ' .:-=+*#%@' abgebildet. Der Seed ist zufällig — keine zwei Seitenaufrufe zeigen dieselbe Karte.

3 — Die drei Iterationen

iteration 1 · crt-feinschliff

Die Röhre wird glaubwürdig

Browser-Test: Der graue Standard-Scrollbalken zerstörte die Illusion → schmaler Amber-Scrollbalken.
Vignette und pulsierendes Röhren-Glühen ergänzt.
Bootsequenz lässt sich per Enter oder Klick überspringen — Respekt vor wiederkehrenden Besuchern.

iteration 2 · cli-komfort

Das Terminal lernt Manieren

Befehls-History mit ↑/↓ wie in einer echten Shell.
Tab-Vervollständigung (ag + Tab → agents).
Klickbare Befehls-Chips unter der Eingabe — auf dem Smartphone ist Tippen im Terminal mühsam.

iteration 3 · robustheit

Auch Maschinen brauchen Empathie

Open-Graph-Meta, >_-Favicon, Font-Preload.
role="log" + aria-live für Screenreader; sichtbare Fokus-Zustände.
No-JS-Fallback: Ohne JavaScript erklärt das Terminal die Lage, alle Inhalte darunter bleiben lesbar.

4 — Den Prozess reproduzieren

Interface als Erzählung: Erst entscheiden, was die Seite ist (hier: eine Maschine), dann jedes Element dieser Fiktion unterordnen — bis zur Fehlermeldung („der wächter hat den vorfall protokolliert“).
Eine Farbe, drei Helligkeiten: Amber, gedimmtes Amber, Papierweiß. Hierarchie ohne zweite Schriftart, ohne zweite Farbfamilie.
Interaktion zuerst bauen, Politur danach: CLI → Boot → Sektionen → CRT-Effekte.
Iterieren nach Benutzung, nicht nach Gefühl: Scrollbalken, Boot-Skip und Mobile-Chips kamen alle aus dem Selbsttest.
Werkzeuge: Claude Code (Fable 5), reines HTML/CSS/JS ohne Dependencies, JetBrains Mono (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ück zu KERN/OS