ChronoVerse — The Museum of Time

What's next for ChronoVerse — The Museum of Time

Inspiration

Museums freeze time behind glass. We wanted a museum you move through instead — where scrolling itself is the exhibit, and the line between "ancient" and "future" is a color you travel across rather than a wall between rooms.

What it does

ChronoVerse is a single-page, scroll-driven 3D experience. As you scroll, a Three.js camera travels down a particle-filled tunnel through seven eras — a torchlit ancient past, a neutral present, a violet unfinished future, deep space, and a final "Time Nexus." Color, fog, particle motion, a HUD compass, and the copy all shift together, driven by one continuous scroll-progress value.

How we built it

Three.js renders the 3D layer: dust particles, a starfield, and one wireframe "monument" per era.
Lenis replaces native scrolling with an inertial feel and reports scroll position into GSAP ScrollTrigger every frame.
A single master ScrollTrigger produces one 0–1 progress number that drives the camera, the era accent color, monument rotation, the nav label, the Chrono Compass HUD, and the progress bar — all from one source of truth.
Section panels get their own lightweight fade/lift reveal so the pacing feels intentional.
A custom cursor, animated loading screen, and a keyboard easter egg (press T) round out the polish.
Vanilla HTML/CSS/JS, zero build step — open index.html and it runs.

Challenges we ran into

Syncing two render clocks (Lenis's RAF and Three's RAF) onto one gsap.ticker so scroll and camera never drift apart. Choosing a color language (warm → cool) that could carry "time travel" without literal dates on every scene. Keeping the scene cinematic while staying dependency-light — no HDRI or textures, just fog, additive particles, and wireframes.

What we learned

One well-designed scroll-progress value can drive an entire experience — 3D camera, HUD, copy, and color — more convincingly than triggering each piece separately.

What's next for ChronoVerse

Swap procedural wireframes for lightly detailed GLTF models, add ambient audio that crossfades per era, and a "visitor log" easter egg at the Time Nexus.