Zoomable Timeline
Scroll from this century out to the age of the universe.
AdvancedWeb appEducation14–28hAI-buildable 3/5no setup
A timeline that stays legible across wildly different scales — decades, millennia, geological eras — with events and labels that appear and disappear as you zoom. The scale handling is the entire project, and getting it smooth feels like magic.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- Zoom continuously across many orders of magnitude of time
- Axis tick marks and labels adapt to the current scale
- Events render at their position with labels that avoid overlapping
- Events fade in and out as they become relevant to the scale
- Clicking an event opens its detail
- Pan by drag as well as zoom
- The current view encodes into a shareable URL
The interesting part
- Floating point precision breaking down at extreme zoom ranges
- Label collision detection that stays fast while panning
- Choosing tick intervals that read naturally at every scale
Once it works
- Add multiple event tracks by category
- Add a search that zooms to a matched event
- Add duration bars for eras as well as point events
Suggested stack
reacttypescripttailwindd3-scalecanvas-api