Japan: An Archipelago Chronicle
Two thousand years of Japanese history on one ink-and-washi relief map, with a camera flight for every era.
- eras, from Yayoi to Reiwa
- 18
- events as pins, routes and museum-label cards
- 90
- named massifs added so the relief reads as Japan
- 12
- events marked contested or legend in the UI
- 5
Overview
The site treats the Japanese islands as a museum object. One relief map in washi and sumi ink carries history from the Yayoi period to Reiwa; each era gets one camera flight to wherever power sat, and its events appear as ink pins, routes and museum-label cards. It's a static Next.js export, so the chronicle is pre-rendered HTML that reads without JavaScript or WebGL, and the 3D lives in its own lazily loaded chunk so text paints first.
Problem → built → result
- Problem
- A history site that looks authoritative has to say how sure it is.
- Built
- A static Next.js export, a relief map built in the browser, a camera that's a pure function of scroll.
- Result
- 18 eras · 90 events · contested and legendary events marked as such
Features
- DOM-first: every era and event is server-rendered HTML; the WebGL map is a lazily loaded layer on top
- A washi-and-sumi shader with hillshade, contours and an ink coastline kept crisp in close-ups by a 2048 px mask
- Lenis and GSAP ScrollTrigger on one shared ticker; long jumps between capitals pull up mid-flight so they read as flights
- Reduced-motion and no-WebGL fallbacks, and a content note at the start of the Shōwa chapters
Decisions
- 1
The camera is a function of scroll.
Instead of scrubbing one long timeline, the camera samples a pure function of the measured section offsets. Frames are identical scrolling forwards or backwards, a reload lands on the same composition, and card heights changing can't knock it out of sync.
- 2
Build the map, don't stream it.
Natural Earth coastlines are rasterised and blurred into a heightmap in the browser, with twelve named massifs added. No tiles, no pop-in, and every frame is deterministic.
- 3
Say how sure you are.
Contested events get a dashed “Debated” badge and two pins, legends get a dashed card, and period works and modern illustrations are labelled differently, so the design carries the uncertainty.
- 4
No image without a licence.
Images come from a fetcher that keeps only public-domain or openly licensed items from the Met and Wikimedia Commons and writes an attribution manifest. Until one is checked, the slot stays a labelled placeholder.
Why it's shaped this way
On a site this confident-looking, content accuracy matters more than polish, so the honesty is built into the design instead of left to a footnote.