Webforging XP — Showcase-Website in CSS-3D

Unsere Kundenprojekte entstehen white-label und bleiben deshalb ohne Namen und ohne Link. Diese Referenz ist anders: Sie gehört uns, sie ist öffentlich unter xp.webforging.de erreichbar, und jede Aussage auf dieser Seite lässt sich mit einem Blick in den Quelltext prüfen. Webforging XP ist eine Showcase-Website, die zeigt, was im Browser technisch geht. Ohne Video, ohne Canvas, ohne Bibliothek.

Die Idee

Eine Agenturseite behauptet viel: schnell, sauber, modern. Wir wollten etwas bauen, das man nicht behaupten muss. Also haben wir eine Szene aus dem Jahr 2003 in den Browser geholt: eine dunkle Wand mit einer Blaupause, eine Holzplatte, ein beiger Röhrenmonitor mit dem Rechner daneben. Wer scrollt, fährt mit der Kamera durch diesen Raum. Wer den Rechner einschaltet, sieht ihn wirklich starten, bis zu einem Desktop mit Startmenü, Fenstern und Programmen.

Die Ästhetik ist bewusst gewählt. Die Blaupause ist unser Erkennungszeichen auf webforging.de, das Betriebssystem der Nullerjahre kennt jeder, und der Bruch zwischen beidem macht neugierig. Der eigentliche Inhalt steckt aber in der Technik dahinter.

Die Kamerafahrt

Der Raum ist eine echte CSS-3D-Szene mit Perspektive: Wand, Tischplatte und Monitor stehen als Ebenen im Raum und bewegen sich nie. Bewegt wird ausschließlich die Kamera, und zwar mit einem einzigen Transform auf der ganzen Welt: Z ist der Dolly, X der Schwenk. Die Parallaxe zwischen Wand, Platte und Rechner entsteht aus der Perspektive selbst, nicht aus einzeln animierten Elementen.

Die Fahrt hat drei Stationen: der Hero mit dem ausgerollten Konzeptblatt, das Plakat an der Wand und schließlich der Rechner, bildfüllend. Dazwischen wird der Scrollfortschritt zeitbasiert geglättet, damit sich die Fahrt nicht ruckartig anfühlt, egal wie hastig jemand scrollt. Wer im Betriebssystem reduzierte Bewegung eingestellt hat, bekommt die Stationen ohne Trägheit, direkt und ohne Nachlauf.

Station 2 der Fahrt: das Plakat an der Wand, mit der Anleitung zum Einschalten.

Der Rechner

Der Monitor zeigt kein Video und kein Bild eines Desktops. Er zeigt ein Betriebssystem, das aus DOM-Elementen besteht und mit 1152 × 864 virtuellen Pixeln pixelscharf in die Röhre skaliert wird. Zwei Schalter gehören dazu: der Knopf am Rechner und der am Monitor. Ohne Rechner meldet der Monitor NO SIGNAL, so wie damals.

Sind beide an, läuft die Startsequenz ab: POST-Meldungen mit Speichertest, Startbild mit Fortschrittsbalken, Anmeldung, Desktop. Darauf ein Fenstermanager mit Titelleisten, Kontextmenüs, Startmenü und Taskleiste, dazu Programme: ein Web Explorer, ein Editor, Minesweeper, Systeminformationen und ein Programm, das man besser nicht anklickt. Alle Klänge, vom Entmagnetisieren der Röhre bis zum Startsound, werden zur Laufzeit mit der Web Audio API erzeugt. Audiodateien gibt es keine.

Nach dem Speichertest: Der Rechner bootet wirklich, Schritt für Schritt.

Desktop mit Startmenü, Minesweeper und dem Programm „Web Forging“. Alles DOM, nichts gerendert.

Stückliste

Die Zahlen stammen aus dem Quelltext der Live-Seite und lassen sich dort nachzählen.

Was das für dein Projekt heißt

Ehrlich gesagt: Eine Kamerafahrt durch einen 3D-Raum gehört auf keine Unternehmensseite, die Anfragen bringen soll. Dort zählen Klarheit, Tempo und ein kurzer Weg zum Kontakt. Webforging XP ist ein Schaufenster, kein Vorbild für deine Startseite.

Was du daraus mitnehmen kannst, ist die Arbeitsweise dahinter. Wir bauen mit den Mitteln des Browsers statt mit Bibliotheken, die niemand braucht. Wir hosten Schriften und Assets selbst. Wir denken Bewegung von der Barrierefreiheit her, mit Fallbacks für reduzierte Bewegung. Und wir liefern Details, die keiner verlangt hat, weil sie den Unterschied machen. Genau so gehen wir an Websites und Web-Apps für dich heran.