Cronotopo

When you study history, the map and the timeline usually live apart: one book tells you the year something happened and another shows you where. I wanted to see them together. The globe is space, the line at the bottom is time, and you choose where and when to look.

Hence the name. Cronotopo comes from the Greek chrónos (time) and tópos (place). It starts with the first Homo sapiens at Omo Kibish and goes all the way to the contemporary world without leaving the screen.

A history atlas that makes up dates is useless. Each place has five elements, one per category: a landmark, a person, a technology, a cultural expression and an event. Every one has a year, coordinates, a confidence level and a link to its source.

Zod validates all 300 elements on every build: unique ids, years consistent with their era, coordinates in range and https sources. Then I ran the content through an adversarial audit that caught four factual errors and several misplaced coordinates. Dates marked "c." were dropped to medium confidence, even if that makes the content look less sure of itself.

Motion follows one rule: what matters moves first and most. The camera before the markers, the markers before the arcs, the arcs before the UI. It all comes from a single file with four GSAP timelines (intro, era change, selection and close), and any of them can be interrupted halfway without anything jumping.

When the era changes, a band of light sweeps the globe from pole to pole and the whole interface takes on the color of the period. The 3D scene and the UI only talk through a Zustand store. Three.js and GSAP load separately, so the initial JavaScript went from 363 to 273 KB gzipped.

Six cards have a "Watch scene" button. It isn't a video: it's a procedural 3D scene with no downloaded models or textures, and every caption describes what's on screen at that moment. There are scenes on the birth of writing in Uruk, the Great Pyramid, the Parthenon, the Mainz printing press, the Manchester mills and the eruption of Vesuvius.

Each scene's visual state depends only on time: a paused timeline driven by seek and seeded random numbers. That lets you scrub forward, rewind or send someone a link to an exact second, and it always looks the same.

The scenes were built by six Claude agents in parallel, each in its own git worktree. I set the technical contract, the script's facts and the editorial rules, and left them free on shots and pacing. To keep them from colliding, each scene registers its own metadata file and nobody touches shared files.

What I learned: parallelism pays off when the contract is clear from the start. The scenes still need polish, especially the endings, and that's written down in the repo.

On desktop a place opens in a side panel and on a phone in a bottom sheet, with no horizontal scroll from 360 px up. Everything works with the keyboard, focus is managed on every transition, and reduced-motion mode swaps the camera flights for fades. State lives in the URL, so any era or place can be shared and the back and forward buttons work.

Fourteen Playwright e2e tests cover the full flow, and a separate harness records the four transitions on video to review them frame by frame.