Rendering four billion years of continental drift in the browser

Scrub a timeline and watch the planet rebuild itself. That’s the whole idea: a 3D Earth you can drag backwards through geological time, with the continents drifting apart and the entire look of the world — oceans, land, atmosphere, ice — changing to match the era you’re standing in.

It’s a Wildlab experiment, built with React Three Fiber and three.js. Not a product; a place to keep our creative-technology muscles warm. It uses the same WebGL and shader techniques that drive the morphing animals on this very site.

Three ways to draw a planet

The sphere is drawn by a custom GLSL shader that runs in one of three modes depending on how far back you are. The oldest eras have no real paleogeography data, so they’re generated procedurally: a molten mode for the Hadean — a glowing, barely-solid surface — and a noise mode for the Archean, where simplex noise stands in for land that no map remembers. Once real reconstructed coastlines exist, it switches to a mapped mode and drapes the actual data over the globe.

Moving between eras isn’t a cut. The globe interpolates — colours, terrain and the amount of glow all lerp from one slice to the next — so dragging the timeline reads as continuous drift rather than a slideshow.

Colour as a clock

Every era carries its own palette, and it isn’t arbitrary — it’s tuned to that epoch’s actual climate and atmosphere. The Hadean is orange and violent, full volcanism, no ice. The early Archean is a hazy, iron-tinted ocean under a green-grey sky. Later eras cool into the blues you’d recognise, with volcanism dialled down and a touch of ice creeping in. Each of those is a set of shader uniforms — ocean, land, highland, atmosphere, plus volcanism, ice and molten amounts — so the planet’s whole mood is data, not a texture.

None of this is client work. It’s the kind of thing we build to stay sharp on real-time 3D — and it’s exactly the capability we bring when a client wants an experience, not a page.