How this site is built — Astro, Three.js, GLSL & GSAP
Back to selected work
Studio / Technical case — This site

The proof is the page you're on.

Every claim here is testable by scrolling it. No template, no page builder — a hand-built Astro site with five bespoke real-time scenes, two languages, and an ambience that stays off the wire until you ask for it.

37production routes
02languages, zero routing hacks
05bespoke real-time scenes
03audio files, none fetched until you turn sound on
01 - What is actually running

Six systems, none of them decoration.

01

The sculpture

The dark-glass form behind the type is raymarched in hand-written GLSL — refraction with per-channel dispersion, a brass fresnel rim, driven by scroll and an inertial cursor.

02

The warp

Going to the archive isn't a page load, it's a flight. A hyperspace tunnel accelerates into black, navigates, then decelerates out of it on the other side — so the trip reads as one continuous move.

03

The archive

Onyx-glass portal frames at increasing depth. Scroll flies the camera through them; each project is refracted through the glass until you fly into it and land inside its own world.

04

The case worlds

Opening Bridge Consult assembles a bridge — deck slabs, pylons and cables in sequence. Opening FIDIC unfolds a contract atlas and turns its pages. Neither one is a modal.

05

The ambience

The drone and the interface ticks run through the Web Audio API rather than <audio> elements, so the loop closes without the gap HTMLAudioElement leaves. Three files, about a megabyte — and not one byte is fetched until you turn sound on, which is why the page weighs nothing if you never do.

06

The language system

Two languages, one home. Copy swaps in place from a dictionary; only genuinely localized content earns its own URL. No locale roots, no redirect traps, no duplicate homepages.

02 - Engineering notes

The parts that were wrong first.

Anyone can show the finished surface. These are the failures underneath it — because knowing why something broke is the actual skill being sold.

01

Mobile pays a different price

The archive rendered every frame twice: the scene into a render target, then a fullscreen composite for grain and vignette.

02

Reduce Motion is not an off switch

The preloader froze its object with animation-play-state: paused.

03

The locale trap

Localized clones of the homepage lived at /en/ and /de/, and the wordmark pointed at them.

Read the full engineering log