CHRONOS — The Living Timeline

13.8 billion years. 12 eras. One swipe at a time — a cinematic 3D journey you steer with your mouse, your finger, or the tilt of your phone.

Comment

Inspiration

Awards sites treat the web like cinema. Most timelines treat history like a list. We asked: what if a history timeline felt like the opening titles of a film — one you could steer?

CHRONOS is our answer: a mobile-first, film-grade journey from the molten birth of Earth to a future we haven't built yet. Every era is an AI-painted world, and floating inside each one is a bespoke 3D artifact that is the story of that age.

What it does

You begin in darkness. A clock forms from stardust. Time shatters. The portal opens — and you travel:

  • 12 hand-directed eras, each with a full-bleed AI-generated backdrop, an era-specific color grade, a cinematic title card, and a quote written for that age.
  • A different real-time 3D artifact in every era — a molten icosahedron planetoid at the Birth of Earth, a pyramid for Egypt, a Platonic dodecahedron for Ancient Greece (the "ideal form" — a nod to Plato), a column for Rome, a flowing torus-knot for the Renaissance, a spinning gear for the Industrial Revolution, a wireframe network lattice for the Digital Age, and a star-orb wrapped in constellations for the cosmic finale. All react to pointer movement on desktop and the gyroscope on phones.
  • Warp-pulse transitions — moving to the next era punches the camera forward, star-streaks rush past, and the artifact bursts and reassembles into the next era's shape.
  • Procedural Web Audio — a soft C-major ambient pad, a chime chord, and band-passed whooshes, all synthesized live in the browser. Zero audio files.
  • Steer it your way — arrow keys, swipe, tap, or click the timeline dots to jump to any era.
  • Ends with a multicolor finale sequence and a credits galaxy: "The future is created by those who understand the past."

How I built it

  • React 18 + TypeScript + Vite 6 — a phase-state-machine drives boot → menu → intro → 12 eras → finale → credits.
  • Three.js + React Three Fiber — one persistent WebGL canvas (never remounted: no hitches) holds the per-era artifact (12 distinct geometries, emissive material lerped to the era's accent color), a spinning portal ring, ~330 GPU-blended star/gold-dust particles, and accent-reactive point lights.
  • Parallax rig — pointer position (desktop) and deviceorientation gyroscope (mobile, with iOS permission flow) feed a critically-damped camera drift, so the scene leans with you.
  • AI-generated imagery — all 16 backdrops AI-painted
  • Canvas 2D starfield behind boot/menu, CSS glassmorphism HUD, letterboxing on wide screens, safe-area-aware iOS layout, prefers-reduced-motion support.
  • Resilience engineering — an error boundary isolates WebGL: if a device can't create a GL context, the site degrades to the full cinematic experience instead of a black screen. Boot preloads only the 3 critical images and streams the rest in the background.
  • Total JavaScript: ~276 KB gzipped including all of Three.js — Awwwards-weight performance.

Challenges I ran into

  • The invisible 3D bug — our stacking contexts trapped the opaque backdrop above the WebGL canvas, hiding all 3D content even though it rendered. Restructuring the z-axis (backdrop → 3D layer → UI) fixed it without touching visuals.
  • WebGL isn't guaranteed — we discovered that when Three.js can't create a context, React unmounted the entire app (black screen). An error boundary now turns a crash into graceful degradation — the site works on every device, GPU or not.
  • 4 MB of preloads froze mobile — gating the menu on all 16 images made phones wait 10–20s. Re-gating on 3 critical images + background warm-up cut start time dramatically on 3G.

Accomplishments that I'm proud of

  • Every era has its own 3D identity, not a reused spinner.
  • The whole thing runs at 60fps on a phone with zero layout jank, surviving iOS Safari quirks, GPU blocklists, and slow networks.
  • It feels like steering a movie.

What I learned

Layering is semantics: where a canvas sits in the stacking context is a design decision, not plumbing. And "progressive enhancement" applies to GPUs too — build the experience so that losing WebGL loses a garnish, not the meal.

What's next for CHRONOS — The Living Timeline

Branching alternate timelines ("what if Rome never fell?"), WebGPU volumetric fog between eras, haptic pulses on era changes via the Vibration API, and a shareable "your personal year stamp" card generator.

Share this project:

Updates

Submission history