Deep-Time Zoom Timeline

Concept

A single full-viewport interactive timeline at /timeline spanning 100,000 BP → today, where every dated attestation in the vault is a clickable event that links to its note. The deep past is log-compressed — the Paleolithic's 90,000 years and the last 5,000 years of writing each get the screen room their evidence density deserves — and the user can zoom continuously from "all of human symbolic behavior on one screen" down to a single century, the axis re-labeling itself as the scale changes (10,000-year ticks → millennia → centuries → decades).

Horizontal bands stack the nine domains (01_prehistoric … 09_comparative) as parallel lanes, each washed with an era-appropriate photorealistic backdrop that cross-fades as you pan: ochre-handprint cave dark for the Paleolithic, firelit megalith dusk around Göbekli Tepe, mud-brick ziggurat haze for early Mesopotamia, papyrus-gold for Egypt, manuscript candlelight approaching the common era. Events render as evidence-class-coded markers (amber ◆ = 1-archaeology, blue ▮ = 2-text, dashed ○ = speculative), motif notes draw faint transmission threads between their dated occurrences — green for descent, blue for contact, purple dotted for convergence — so the vault's core verdicts become literally visible as lines through time.

This is the vault's missing spine: every note already carries attestation_earliest or date_of_evidence; the timeline is the one view where all of them coexist and their relative depth becomes felt knowledge.

Why it takes you back in time

The single most misunderstood fact about religious history is proportion. Everyone "knows" religion is old; nobody feels that the gap between the Qafzeh ochre burials (~92,000 BP) and the Eridu temple (~5500 BCE) is seventeen times longer than the gap between Eridu and us. A log-compressed zoomable axis makes that proportion a physical experience: you start zoomed out, the whole written record — Sumer, the Pyramid Texts, the Rigveda, Christ, Muhammad, today — is a thin bright sliver crowded at the right edge, and the rest of the screen is a vast, nearly empty darkness punctuated by a handful of amber archaeology markers. Zooming in feels like descending toward the present; panning left feels like walking backwards out of the city lights into the Paleolithic night.

The era-imagery bands do the atmospheric work the axis can't: as you pan from 3000 BCE to 40,000 BP the backdrop visibly loses architecture, loses writing, loses agriculture, until only firelight, ochre, and burials remain. Time travel is exactly this — watching the familiar furniture of civilization disappear piece by piece — and the timeline stages it as a continuous, user-controlled descent rather than a static chart.

Experience walkthrough

1. Arrival. The user clicks "Timeline" in the top nav (or the hero card on /). The screen fills with a dark horizontal expanse: nine thin domain lanes, a glowing axis along the bottom reading 100,000 BP ——— 10,000 BP ——— 1,000 BCE ——— today. A two-second intro animation pans from the present leftward into the dark, then settles on the full view. A caption fades in: "Everything this vault has dated, in one place. Scroll to zoom. Drag to travel."

2. The first shock. Zoomed all the way out, the right 25% of the screen holds ~90% of the markers — a dense bright braid of text-attestation blues. The left 75% holds maybe a dozen amber diamonds: Qafzeh ochre (~92,000 BP), Sunghir (~34,000 BP), cave art, Göbekli Tepe. The emptiness is the point, and the legend says so: "Amber = archaeology. Blue = text. The dark is real — that's how little we can date."

3. Travel. The user scrolls to zoom (cursor-anchored, like a map), drags to pan. As the viewport crosses ~12,000 BP heading right, the cave-dark backdrop cross-fades to the megalith-dusk band; at ~3500 BCE the first city haze appears behind lane 02. Axis ticks re-label live: at full zoom-out they read in tens of millennia; by the Bronze Age view they read in centuries.

4. Touch an event. Hovering a marker pops a card: note title, attestation_earliest verbatim, evidence-class badge, confidence badge, domain. Clicking navigates to the note's existing page (/02_mesopotamian/2_notes/eridu-temple-level-xviii-earliest-cult-building.md). Back-button returns to the timeline with viewport state restored from the URL hash (/timeline#z=4.2&c=-3500).

5. Follow a thread. The user toggles "Motif threads" in the legend. The great-flood motif's dated occurrences (Sumerian King List allusion → Atra-ḫasīs → Ugarit fragment → Gilgamesh XI → Genesis) light up connected by a blue contact line arcing across lanes 02 → 05; sky-father and dying-god threads draw in their own verdict colors. The trichotomy stops being a table and becomes geography.

6. Century mode. Fully zoomed in on, say, 800–700 BCE, the lane backdrops sharpen, markers spread out with full inline labels (Kuntillet Ajrud, Homeric fixation, Śatapatha Brāhmaṇa window…), and an "uncertainty whisker" renders behind each marker showing its date range rather than a false point-precision.

7. Leaving. A small "today" button animates the viewport back to the present at speed — 100,000 years in two seconds — which lands as the inverse gut-punch of step 2.

Data from the vault

No new authoring burden — the timeline is a pure derived view of frontmatter that already exists under the template contract:

Date parsing is the only real work: strings like c. 92,000 BP, c. 5500 BCE, c. 1900–1800 BCE, 7th–5th c. BCE, 1464 CE must normalize to {yearStart, yearEnd} on a single astronomical-year axis (BP anchored to 1950). Unparseable dates fall into a visible "undated" tray rather than silently vanishing — same ethic as the vault: no data loss, no false precision.

Implementation sketch

Fits tools/server.ts exactly as built — bun, zero npm deps, one new HTML page with inline vanilla JS + canvas, served by the existing Bun.serve fetch handler.

New routes (two if blocks in the fetch handler, mirroring /api/version):

• GET /api/timeline.json — walks ROOT (reusing the existing readdirSync walk pattern from vaultVersion()/countFiles()), runs parseFrontmatter() (already exists) on every .md, applies parseDeepDate() to attestation_earliest / date_of_evidence, and returns { events: [{ path, title, type, domain, yearStart, yearEnd, evClass, confidence, transmission }], undated: [...] }. Cached with the same 1-second mtime cache pattern as vaultVersion().
• GET /timeline — returns one self-contained HTML page: the existing nav() + CSS for chrome, plus a <canvas> filling the viewport and ~300 lines of inline vanilla JS.

New module-level code (~150 lines):

• parseDeepDate(s: string): {a: number, b: number} | null — regex cascade over the observed corpus formats: ([\d,]+)\sBP, ([\d,]+)(?:–([\d,]+))?\sBCE, (\d+)(?:th|st|nd|rd)(?:–(\d+)\w+)?\sc(?:ent)?\.?\sBCE, CE variants. Returns astronomical years (BCE n → −n+1, BP n → 1950−n). Ranges kept as {a,b} for uncertainty whiskers.
• Evidence-class extraction: /1-archaeology/, /2-text/, /speculative/i tested against the date string + evidence_class field.

Client JS (inline, vanilla, canvas 2D):

• Coordinate core: xOf(year) = W * (asinh((year - TODAY) / S) - asinhMin) / (asinhMax - asinhMin) — arcsinh scaling (smooth log-compression that handles the sign change at year 0 without a singularity), with S interpolating toward linear as zoom deepens. Wheel = zoom anchored at cursor; drag = pan; pinch for touch. Viewport (zoom, centerYear) serialized to location.hash on idle.
• Render loop: domain lanes → era backdrop images (drawn from /assets/illustrations/timeline-era-*.png via the existing static-file branch, cross-faded by viewport center-year) → axis with magnitude-aware tick labeling → uncertainty whiskers → event markers → motif threads (quadratic curves between thread anchors) → hover hit-testing against a retained screen-space index.
• Popup card is a positioned <div> reusing the existing .cardlink/.badge CSS classes; click sets location.href to the note path.

Nav integration: add ["/timeline", "Timeline"] to the links array in nav(). Link from INDEX.md once live (AGENTS.md §6: linked from INDEX or it doesn't exist). Read-only throughout — no write paths, consistent with the server's contract.

Images needed

Era backdrop bands, 2400×600, very dark and desaturated at the top fading to near-black (markers must stay legible over them). All via GPT-5.5 / codex CLI per AGENTS.md §5; saved as assets/illustrations/timeline-era-<slug>.png. No text, no devotional framing, no recognizable people's faces.

1. timeline-era-paleolithic — "Photorealistic cinematic wide shot, deep interior of a Paleolithic limestone cave lit only by a single tallow flame, red ochre handprints and faint aurochs outlines on the rock wall, smoke haze, profound darkness at the edges of the frame, archaeologically grounded Upper Paleolithic detail, no text, no faces, 2400x600 panoramic, very dark moody color grade"

2. timeline-era-epipaleolithic — "Photorealistic cinematic dusk panorama of carved T-shaped megalithic pillars on a dry Anatolian hilltop, pre-pottery Neolithic enclosure under a deep indigo sky, distant cooking fires, wild einkorn grass in the foreground wind, archaeologically accurate Göbekli Tepe-like detail, no text, no people's faces, 2400x600, dark cinematic grade"

3. timeline-era-early-cities — "Photorealistic cinematic panorama of an early Mesopotamian mud-brick temple platform at dawn, Ubaid-Uruk period reed houses and irrigation canals in haze, date palms, river mist, warm clay tones fading into darkness at top of frame, archaeologically grounded, no text, no faces, 2400x600, muted dark grade"

4. timeline-era-bronze-age — "Photorealistic cinematic panorama blending a ziggurat under construction and distant Egyptian pyramid scaffolding across a hazy river plain, Bronze Age workers as small distant silhouettes, papyrus-gold and clay light, dust and heat shimmer, archaeologically grounded c. 2500 BCE detail, no text, no recognizable faces, 2400x600, dark desaturated grade"

5. timeline-era-axial — "Photorealistic cinematic night panorama of an Iron Age Near Eastern city wall with oil lamps in windows, a scribe's lamplit room visible through one opening with clay tablets and a reed stylus on a table, starfield above, c. 700 BCE archaeological detail, contemplative mood, no text legible, no faces, 2400x600, very dark grade"

6. timeline-era-common-era — "Photorealistic cinematic interior panorama, candlelit scriptorium meeting incense-hazed temple hall, manuscript codices and oil lamps, columns receding into darkness, late antique Mediterranean and Asian architectural elements merged subtly, no legible text on pages, no faces, 2400x600, dark amber grade"

7. timeline-era-modern — "Photorealistic cinematic twilight panorama of a city skyline where a minaret, a church spire, a pagoda roof and glass towers share the horizon, last light on low clouds, quiet and slightly melancholy, no text, no people, 2400x600, cool dark grade"

8. timeline-hero (INDEX/idea card) — "Photorealistic cinematic image of a single human figure seen from behind holding a torch, standing at the mouth of a dark cave looking out over an immense night landscape where, far away on the horizon, the faint lights of a modern city glow, visual metaphor of walking out of deep time toward the present, no text, no face visible, 16:9, very dark cinematic grade"

Effort

M (medium). The server-side half is small because server.ts already provides frontmatter parsing, tree walking, caching patterns, CSS, and nav; the genuinely new work is parseDeepDate() (corpus is messy but finite — ~30 distinct date strings today) and the canvas zoom/pan core (~300 lines, no deps).

Ships first (v0, one session): /api/timeline.json + /timeline with arcsinh zoom/pan, axis re-labeling, evidence-class-colored markers from attestation_earliest/date_of_evidence, hover cards, click-through to notes, URL-hash viewport, and a flat dark gradient instead of imagery. That alone delivers the proportion gut-punch.

v1: the eight era backdrop images with cross-fade, uncertainty whiskers, the "undated" tray, intro/exit animations.

v2: motif transmission threads (requires parsing the dated-occurrence tables inside motif bodies), touch gestures, "today" fly-back button.