Kay FacherОбратно к озеру

Colophon.

Эта страница доступна на английском и немецком.

How this site is built, where its live data comes from, and the people and projects it stands on.

01One continuous object

The page is real, accessible HTML: every word you read is text, readable by screen readers, search engines and the zero-JavaScript version of the site. Behind it runs a single WebGPU scene that never reloads. As you scroll, a few hundred thousand particles travel through it: they spell my name, rain into Lake Lucerne, become tonight's Milky Way, a contrail over Pilatus, a globe of everyone here, and back.

Nothing on the page is a video or a stock image. Everything moving is computed in your browser from real data, the moment you look at it.

02The engine

  • three.js r186 with its WebGPU renderer and TSL, its shader language. Particle physics, curl noise, the lake's shallow-water ripples and the campfire's embers are GPU compute shaders; the glacier, the flames and the terrain are shaders written in TSL.
  • The whole engine runs in a Web Worker on an OffscreenCanvas. The page shares pointer, scroll and audio with it through a SharedArrayBuffer (the site is cross-origin isolated for this), so the main thread stays free for you. If the GPU device is ever lost, the engine restarts itself and replays the scene.
  • Satellites: every active one, more than ten thousand orbits, propagated with SGP4 compiled to WebAssembly (satellite.js) inside the render worker, and interpolated on the GPU between updates.
  • Real terrain from elevation tiles, real sun, moon, planets and 5,000 stars positioned for Lucerne at this second (astronomy-engine), and real weather driving rain, snow, fog, wind streamlines and the glider game's thermals.
  • Press X anywhere for X-ray mode: every element labelled with the technology behind it, live GPU timings, and a WGSL shader you can edit while it runs.
  • The page's light is the sky over Lucerne. One palette, from the sun's real altitude and the cloud cover, colours the 3D sky, the terrain, the lake and the page itself, blended in OKLab from noon through golden hour and blue hour to night. Every chapter has its hour, and the sky control in the bar scrubs the whole day. In the full-screen labs the panels are real glass: the GPU bends the live scene through each one.
  • Deep time runs on one chronology for the valley's last 20,000 years: the Reuss glacier's front and thickness, how far down the snow reaches, tundra, pioneer birch and pine, then forest down to the shore until farmers clear it, the young lake milky with glacial flour, the towns growing from their cores, and each building from the year it was built. The model is deliberately simple; the dates follow the published outline (glacial maximum, the ice gone from the basin by about 16,000 years ago, the Younger Dryas, the first farmers about 6,000 years ago).
  • The 3D models come from the site's own model library, baked into compact quantized meshes a few dozen kilobytes each: paddle steamers sailing today's timetable, the Wasserturm, the KKL and the Hofkirche, a camp with its tent, horse and gear, a jetty with a synthesizer and headphones, a 12U homelab whose sockets light with this page's requests, the ISS on its real orbit. The paraglider, the jet and the lakeside towns are built in code. The same sun and sky light them all, and their windows glow after dark.
  • Every chapter with a world has a full-screen lab at its own address. The engine lives in a layout that outlasts the navigation, so opening a lab is a camera move rather than a page load, while the title morphs across with a React view transition. A lab's link can carry the moment: the hour, the weather, how many thousand years ago.

03The web platform

  • Next.js 16 (App Router, React 19 with the React Compiler, typed routes, subresource integrity) and Tailwind CSS 4, hosted on Vercel.
  • Twelve languages, picked from your browser's language with no switcher: German, French, Italian, Romansh, English, Chinese, Russian, Polish, Hindi, Hebrew, Spanish and Arabic, with right-to-left layout for Hebrew and Arabic.
  • CSS doing real work: scroll-driven animations, container-query typography that fits every headline in every script, view transitions, @starting-style and logical properties.
  • Web Audio with an AudioWorklet string model, an HRTF-positioned campfire and a score generated from the weather; WebMIDI; the Gamepad API with rumble; Document Picture-in-Picture; Web Speech for the AI twin's voice.
  • Presence (Liveblocks), a guestbook of hand-drawn signatures (perfect-freehand) moderated by Claude, daily leaderboards for both of Föhn's aircraft (Vercel Blob), Vercel BotID, and posters typeset with Satori.

04The AI twin and agents

The twin runs on Anthropic's Claude. It speaks as me, but always with an AI badge, and it knows only what I wrote in one file on this site. Rather than describing the site, it can steer it: it changes the weather, turns back time to the glacier, opens X-ray mode or plays you a tune, and it draws live cards into the conversation. Its conversation history is signed, so nobody can put words in its mouth. Without the API it falls back to your browser's built-in model, then to prepared answers.

For other AI agents there is a read-only MCP server, llms.txt, WebMCP tools for in-browser agents, and structured data.

05Live data

Weather and wind
Open-Meteo, licensed CC BY 4.0. Current conditions and a wind grid over the lake, every few minutes.
Lake temperature and level
Swiss Federal Office for the Environment (FOEN / BAFU) hydrological stations, via Eawag's Alplakes API or the Existenz API.
Lake steamers
Swiss public transport timetable via transport.opendata.ch (data: opentransportdata.swiss).
Satellites
General perturbations orbital data from CelesTrak (Dr T.S. Kelso).
Free / busy
My own calendar, reduced on the server to a single word. No event ever leaves it.

06Credits

Elevation
Terrain Tiles on the AWS Registry of Open Data, originally by Mapzen; compiled from SRTM, EU-DEM, GMTED2010 and other sources (attribution).
Stars and constellations
d3-celestial data by Olaf Frohn (BSD 3-Clause), from the Hipparcos and Yale Bright Star catalogues.
Sun, moon and planets
Astronomy Engine by Don Cross (MIT).
Orbit propagation
satellite.js (MIT), after the SGP4 work of Vallado et al.
Countries and seas
Natural Earth, public domain.
The dragon
The Lucerne dragon stone and the legend of Pontius Pilate on Pilatus are Lucerne folklore, retold here in my own words.
Type
Mona Sans by GitHub, Geist and Geist Mono by Vercel, and Noto Sans SC, Devanagari, Hebrew and Arabic by Google — all under the SIL Open Font License.

07Access

The 3D scene is decoration; everything it shows is also written down. The site works with a keyboard, with a screen reader and without JavaScript. Motion is part of the experience, but nothing flashes more than three times a second.

Found something that doesn't work for you? Write to hello@facher.ch.