Wie diese Website gebaut ist, woher ihre Live-Daten kommen und auf wessen Arbeit sie steht.
01Ein durchgehendes Objekt
Die Seite ist echtes, zugängliches HTML: Jedes Wort ist Text, lesbar für Screenreader, Suchmaschinen und die Version der Website ohne JavaScript. Dahinter läuft eine einzige WebGPU-Szene, die nie neu lädt. Beim Scrollen reisen ein paar hunderttausend Partikel durch sie hindurch: Sie schreiben meinen Namen, regnen in den Vierwaldstättersee, werden zur Milchstrasse von heute Nacht, zu einem Kondensstreifen über dem Pilatus, zu einem Globus aller, die gerade hier sind — und wieder zurück.
Nichts auf dieser Seite ist ein Video oder ein Stockbild. Alles, was sich bewegt, wird in deinem Browser aus echten Daten berechnet, genau in dem Moment, in dem du hinschaust.
02Die Engine
- three.js r186 mit WebGPU-Renderer und TSL, der Shader-Sprache von three.js. Partikelphysik, Curl-Noise, die Flachwasserwellen des Sees und die Glut des Lagerfeuers sind Compute-Shader auf der GPU; Gletscher, Flammen und Gelände sind Shader in TSL.
- Die ganze Engine läuft in einem Web Worker auf einem OffscreenCanvas. Zeiger, Scrollposition und Audio teilt die Seite über einen SharedArrayBuffer mit ihr (dafür ist die Website cross-origin-isoliert), damit der Hauptthread frei bleibt. Geht das GPU-Gerät verloren, startet sich die Engine selbst neu und stellt die Szene wieder her.
- Satelliten: alle aktiven, mehr als zehntausend Umlaufbahnen, mit SGP4 als WebAssembly (satellite.js) im Render-Worker berechnet und zwischen den Updates auf der GPU interpoliert.
- Echtes Gelände aus Höhendaten, echte Sonne, echter Mond, echte Planeten und 5000 Sterne, für Luzern auf die Sekunde berechnet (astronomy-engine), und echtes Wetter, das Regen, Schnee, Nebel, Windlinien und die Thermik im Gleitschirmspiel antreibt.
- Drück irgendwo X für den Röntgenblick: Jedes Element zeigt die Technik dahinter, dazu Live-GPU-Zeiten und ein WGSL-Shader, den du im laufenden Betrieb bearbeiten kannst.
- Das Licht der Seite ist der Himmel über Luzern. Eine Palette aus dem echten Sonnenstand und der Bewölkung färbt den 3D-Himmel, das Gelände, den See und die Seite selbst, in OKLab gemischt vom Mittag über die goldene und die blaue Stunde bis in die Nacht. Jedes Kapitel hat seine Stunde, und der Himmelsregler in der Leiste spult durch den ganzen Tag. In den Vollbild-Labs sind die Panels echtes Glas: Die GPU bricht die Live-Szene durch jedes hindurch.
- Die Tiefenzeit folgt einer einzigen Chronologie der letzten 20 000 Jahre im Tal: Front und Mächtigkeit des Reussgletschers, wie weit der Schnee hinunterreicht, Tundra, erste Birken und Föhren, dann Wald bis ans Ufer, bis die Bauern ihn roden, der junge See milchig vom Gletschermehl, Dörfer, die von ihrem Kern aus wachsen, und jedes Bauwerk ab seinem Baujahr. Das Modell ist bewusst einfach; die Daten folgen dem publizierten Ablauf (Eiszeitmaximum, Becken eisfrei vor rund 16 000 Jahren, Jüngere Dryaszeit, erste Bauern vor rund 6000 Jahren).
- Die 3D-Modelle stammen aus der eigenen Modellbibliothek der Website, verdichtet zu kompakten Netzen von je ein paar Dutzend Kilobyte: Raddampfer nach dem heutigen Fahrplan, der Wasserturm, das KKL und die Hofkirche, ein Lager mit Zelt, Pferd und Ausrüstung, ein Steg mit einem Synthesizer und Kopfhörern, ein 12-HE-Homelab, dessen Buchsen mit den Anfragen dieser Seite aufleuchten, die ISS auf ihrer echten Bahn. Gleitschirm, Jet und die Dörfer am See sind im Code gebaut. Dieselbe Sonne und derselbe Himmel beleuchten sie alle, und nach Einbruch der Dunkelheit leuchten ihre Fenster.
- Jedes Kapitel mit einer Welt hat ein Vollbild-Labor unter eigener Adresse. Die Engine lebt in einem Layout, das die Navigation überdauert: Ein Labor zu öffnen ist eine Kamerafahrt statt eines Seitenwechsels, und der Titel gleitet per React-View-Transition hinüber. Der Link eines Labors kann den Moment mitnehmen: Uhrzeit, Wetter, wie viele tausend Jahre zurück.
03Die Webplattform
- Next.js 16 (App Router, React 19 mit React Compiler, typisierte Routen, Subresource Integrity) und Tailwind CSS 4, gehostet bei Vercel.
- Zwölf Sprachen, ohne Umschalter aus der Spracheinstellung deines Browsers gewählt: Deutsch, Französisch, Italienisch, Rätoromanisch, Englisch, Chinesisch, Russisch, Polnisch, Hindi, Hebräisch, Spanisch und Arabisch, mit Rechts-nach-links-Layout für Hebräisch und Arabisch.
- CSS, das echte Arbeit leistet: scrollgesteuerte Animationen, Typografie mit Container Queries, die jede Überschrift in jeder Schrift passend setzt, View Transitions, @starting-style und logische Eigenschaften.
- Web Audio mit einem Saitenmodell als AudioWorklet, einem per HRTF räumlich platzierten Lagerfeuer und einer Partitur aus dem Wetter; WebMIDI; die Gamepad API mit Vibration; Document Picture-in-Picture; Web Speech für die Stimme des KI-Zwillings.
- Präsenz (Liveblocks), ein Gästebuch aus handgezeichneten Unterschriften (perfect-freehand), moderiert von Claude, Tagesranglisten für beide Fluggeräte von Föhn (Vercel Blob), Vercel BotID und Plakate, gesetzt mit Satori.
04Der KI-Zwilling und Agenten
Der Zwilling läuft mit Claude von Anthropic. Er spricht als ich, aber immer mit KI-Kennzeichnung, und er weiss nur, was ich in einer einzigen Datei auf dieser Website aufgeschrieben habe. Statt die Website nur zu beschreiben, kann er sie steuern: Er ändert das Wetter, dreht die Zeit zurück bis zum Gletscher, öffnet den Röntgenblick oder spielt dir eine Melodie vor, und er zeichnet Live-Karten ins Gespräch. Sein Gesprächsverlauf ist signiert, damit ihm niemand Worte in den Mund legen kann. Ohne API weicht er auf das eingebaute Modell deines Browsers aus, danach auf vorbereitete Antworten.
Für andere KI-Agenten gibt es einen schreibgeschützten MCP-Server, llms.txt, WebMCP-Werkzeuge für Agenten im Browser und strukturierte Daten.
05Live-Daten
- Wetter und Wind
- Open-Meteo, lizenziert unter CC BY 4.0. Aktuelle Werte und ein Windraster über dem See, alle paar Minuten.
- Seetemperatur und Pegel
- Hydrologische Messstationen des Bundesamts für Umwelt (BAFU), über die Alplakes-API der Eawag oder die Existenz-API.
- Schiffe auf dem See
- Fahrplan des öffentlichen Verkehrs über transport.opendata.ch (Daten: opentransportdata.swiss).
- Satelliten
- Bahndaten (General Perturbations) von CelesTrak (Dr. T. S. Kelso).
- Frei / besetzt
- Mein eigener Kalender, auf dem Server auf ein einziges Wort reduziert. Kein Termin verlässt ihn je.
06Dank
- Höhendaten
- Terrain Tiles in der AWS Registry of Open Data, ursprünglich von Mapzen; zusammengestellt aus SRTM, EU-DEM, GMTED2010 und weiteren Quellen (Nachweis).
- Sterne und Sternbilder
- Daten von d3-celestial von Olaf Frohn (BSD 3-Clause), aus dem Hipparcos- und dem Yale-Bright-Star-Katalog.
- Sonne, Mond und Planeten
- Astronomy Engine von Don Cross (MIT).
- Bahnberechnung
- satellite.js (MIT), nach den SGP4-Arbeiten von Vallado et al.
- Länder und Meere
- Natural Earth, gemeinfrei.
- Der Drache
- Der Luzerner Drachenstein und die Sage von Pontius Pilatus auf dem Pilatus sind Luzerner Volksgut, hier in eigenen Worten nacherzählt.
- Schrift
- Mona Sans von GitHub, Geist und Geist Mono von Vercel sowie Noto Sans SC, Devanagari, Hebrew und Arabic von Google — alle unter der SIL Open Font License.
- Software
- three.js, Next.js, React, Tailwind CSS, Liveblocks, Claude, perfect-freehand, Satori, sharp, Zod, web-vitals und mcp-handler.
07Zugänglichkeit
Die 3D-Szene ist Dekoration; alles, was sie zeigt, steht auch im Text. Die Website funktioniert mit Tastatur, mit Screenreader und ohne JavaScript. Bewegung gehört zum Erlebnis, aber nichts blinkt öfter als dreimal pro Sekunde.
Funktioniert etwas für dich nicht? Schreib an hello@facher.ch.