A map that runs backwards. Scrub three hundred million years and the scattered continents slide home along their spreading ridges into one supercontinent.
Pangaea is a fictional exhibit piece for a natural-history museum's deep-time gallery — a single interactive map whose one job is to make continental drift felt rather than diagrammed. The audience is a curious visitor who has seen the jigsaw fit of South America and Africa in a textbook and wants to watch it happen. There is one control, one gesture: move time, and the world reassembles.
At rest the dial sits at 150 Ma — the Jurassic, mid-breakup — so the landmasses are caught halfway between the supercontinent and the coastlines we know, never blank and never finished.
An old survey chart: parchment land on an inked sea, with a single hot line reserved for the mid-ocean ridges where new crust is born.
A warm, high-contrast old-style serif with the ink-trap character of engraved cartography. Carries the wordmark and captions.
Tabular figures for the age readout, era label and dial ticks — the instrument voice against the parchment.
Real plate reconstructions move continents as rigid bodies — a plate doesn't stretch, it rotates about a pole and translates. So rather than morphing arbitrary SVG paths (which needs matched point counts and produces rubbery in-betweens), each continent is a fixed silhouette with its modern position baked into its coordinates and a single rigid Pangaea offset: a translation and a rotation about its own centroid.
Scrubbing the dial produces a fraction f — a smoothstep of age over 300 Ma — and every plate is set to translate(dx·f, dy·f) rotate(rot·f). At f = 0 the map is today; at f = 1 the plates converge into the supercontinent. The spreading ridges — the Mid-Atlantic Ridge, the East Pacific Rise, the Indian ridges — are drawn in their modern ocean positions and their opacity is tied to (1 − f): as the continents disperse, the ridges that drove them apart fade up between the widening gaps, dashes crawling to suggest sea-floor spreading.
Everything is inline SVG and hand-rolled JavaScript — no framework, no canvas, no external library. A single requestAnimationFrame loop runs the entrance tween and the ridge shimmer, pausing on document.hidden.
Set the type scale (56px tabular age readout against 12px mono era labels) and locked the ink/line token split: coastline ink #4A3B22 for all text, ridge red kept strictly for the ridge marks. Gave every continent a soft drop-shadow so parchment reads above the sea, and graded the ocean gradient darker toward the poles so the flat equirectangular map gains depth. Rewrote the era captions as concrete, dated observations rather than labels.
Drove the dial end to end and enriched the signature: added the crawling dashed ridges with a faint second glow line so the spreading centres read as active, not decorative; added the staged entrance that starts fully assembled at 300 Ma and drifts to 150 over five seconds, then hands control to the cursor. Made the whole map draggable — grab the ocean and pull time left or right — as a second, tactile way into the same gesture. The era caption swaps only on a real boundary crossing, so scrubbing feels like turning geological pages.
Collapsed two animation loops into one rAF with a visibility pause. Confirmed the reduced-motion path renders a settled 150 Ma frame with static ridges and no entrance. Checked the 375px layout — the caption hides below 560px, the panel reflows, nav and wordmark stay inside the viewport. Verified keyboard focus on the dial and that arrow keys scrub. Removed an over-busy third ridge-glow ornament (Chanel rule) and re-read every caption.