Scroll from the Big Bang to this afternoon on one continuous canvas — no page breaks, no scale switches, no reloading.
The Cambrian explosion, the Roman Empire and the invention of paper sit eight orders of magnitude apart. That one fact breaks most timelines.
- They pick a band and stay in it — geological, historical, or personal. Cross the boundary and you change tool, unit, and mental model.
- The fix is the camera, not the data. The whole view is two numbers: the year at the centre of the screen, and the log of pixels-per-year.
- Log space is the trick. One flick of the wheel crosses nine orders of magnitude — no mode switch, no broken layout, no "which era?" prompt.
- Everything else falls out of it — ticks re-derive their unit as you fall, events cluster and unfold, rings name the scale you're standing in.
| Great at | Where it stops | |
|---|---|---|
| Histography | A gorgeous WebGL wall of Wikipedia events, Big Bang to today | Fixed era buckets; read-only — none of it is your data |
| TimelineJS | Storytelling: rich media, one slide at a time, driven by a spreadsheet | Slides, not a continuous axis; comparing distant eras isn't the goal |
| Tiki-Toki, Preceden | Polished hosted builders, sharing and teams handled for you | Account required, data lives on their servers, tiered plans |
| vis-timeline | A solid library for scheduling-scale ranges | It's a library, not an atlas; one DOM node per event |
| Time Horizon | One continuous log-zoom axis, layered collections, your data stays yours | No collaboration, no media-rich slides — deliberately |
- Fly across 13.8 billion years — wheel, drag, pinch, or jump straight to a date.
- Layer collections — cosmology, empires, inventions, art, religion, Vietnamese school history. Stack them and compare, or keep one at a time.
- Put history on a map — spatial mode anchors events to coordinates and drifts the map as you travel.
- Bring your own — create, import JSON/CSV, edit, sync to your Google Drive (
drive.filescope: the app only ever sees files it made). No server to trust. - Share the exact view — year, zoom, layers and focused event live in the URL.
- Vietnamese and English — for the interface and the event content.
Collection data lives in a separate repository, mounted here as a submodule.
git clone https://github.com/HoangTran0410/time-horizon.git
cd time-horizon
npm install
git submodule update --init # populates data/
node data/server.cjs # CORS static server for the data, on :5500
npm run dev # app on :3000Both must run — without :5500 the catalog comes up empty. Then: npm run lint (tsc), npm test (vitest), npm run build.
No backend, no database, no accounts — everything runs in the browser and persists to localStorage.
| UI | React 19 · TypeScript · Tailwind v4 · motion |
| Build | Vite 6 → GitHub Pages and Cloudflare Pages |
| State | one Zustand store, immer + persist, every rehydrated field re-validated — payloads arrive from share links, CSVs and Drive |
| Rendering | the timeline is a single <canvas>; React DOM handles only the panels around it |
| Camera | focusYear + logZoom as motion values; ticks, layout and clustering run in rAF, outside React rendering |
| Maps | maplibre-gl, lazily loaded so it stays off the main chunk |
Touching the code? CLAUDE.md is the architecture guide — store layout, event identity rules, viewport engine, and the traps worth knowing first.
Collections live in time-horizon-data as plain JSON, one file per collection plus an index. Adding history is a pull request against that repo — no build step, no code change here.
MIT
EN: Find this app and many more free tools & games in AIO Desktop, a Windows/macOS-style web desktop by Social AIO. ▶ Open AIO Desktop
VI: Xem app này cùng nhiều công cụ, trò chơi miễn phí khác trong AIO Desktop, màn kiểu Windows/macOS của Social AIO. ▶ Mở AIO Desktop