I make instrumental electronic music, mostly ambient, and I have never been happy with what an artist site is supposed to look like even if i’ve been working with web since 1994. A grid of covers and a Spotify embed says very little about music that is mostly atmosphere. I wanted something that felt the way the records sound, and this is where it ended up.
It opens on a street in Gävle, Sweden, where I live. One unbroken camera move lifts you off the rooftops and out to Earth, and from there the solar system is the navigation: every section of the site parks at another planet.
The part I care most about is that almost none of it is faked. The planets run a VSOP87 ephemeris in the browser (astronomy-engine), so they sit where they actually are at the moment you load the page. The light comes from the real sun, which is why city lights on the night side fade in past civil twilight rather than at the geometric terminator. The stars are the Yale Bright Star Catalogue. The ISS follows its live orbit. Gävle is Lantmäteriet’s 0.16 m orthophoto laid over OpenStreetMap building footprints, and the weather in the opening descent is the real weather here right now via SMHI, so an overcast morning genuinely mutes the light.
Leave the mouse alone for two minutes and the camera lets go and tours the system on its own.
A few technical things that might be useful to others here:
- three.js 0.180, TypeScript, Vite. No framework.
- Hand written GLSL for the atmosphere, the sun, the sky and the post chain.
- I just moved every colour texture to KTX2 / Basis ETC1S. GPU texture memory went from roughly 993 MB to 202 MB on desktop, and 183 MB to 44 MB on phones, with the download essentially unchanged. The trap that cost me an evening: the GPU cannot flip a compressed block format, so KTX2Loader forces flipY = false and you have to flip the source image before encoding. Earth stood on its head, and the night map looked pitch black because the city lights had landed over the southern oceans.
- Three device tiers instead of two. The old split handed an iPhone SE exactly the same textures as an iPhone 16 Pro Max, which is how a scene ends up over the line where iOS takes the WebGL context away.