CHRONOS

CHRONOS isn't a website you visit. It's a universe you travel through.

Comment

CHRONOS — A Universe You Travel Through

CHRONOS isn't a website you visit. It's a universe you travel through.

Inspiration

Traditional websites are flat, static, and transactional. I wanted to challenge the status quo by turning web navigation into an immersive, continuous 3D movie experience.

Inspired by deep space exploration, gravitational physics, and the majesty of our Solar System, CHRONOS was born as a scroll-driven voyage across time, space, and singularities. Every scroll tick advances the viewer like a camera moving along an interstellar trajectory—from Earth’s atmosphere past revolving planets and orbiting moons, through hyperspace wormholes, and directly into the heart of a cosmic singularity.

🚀 What It Does

CHRONOS is a scroll-triggered, beat-reactive 3D web experience built with Three.js and custom GLSL shaders.

Key Features:

  • Continuous 4-Chapter Journey:
  1. Atmosphere (0%–25%): Earth rotation with procedural clouds, time-lapse day/night illumination, and trajectory nodes.
  2. Exosphere (25%–50%): Orbiting space station telemetry, space debris fields, and satellite telemetry.
  3. Nebula (50%–75%): 30,000 volumetric additive nebula particles, asteroids, and revolving Solar System planets.
  4. Singularity (75%–100%): Event horizon accretion ring, sub-bass rumble, and a 3D Black Hole Implosion.
  • Realistic 3D Solar System: 8 revolving planets (Mercury, Venus, Earth with orbiting Moon, Mars, Jupiter, Saturn with double ring disks, Uranus, and Neptune) featuring custom Fresnel atmospheric rim lighting shaders.
  • Beat-Reactive Web Audio Engine: space.mp3 streams through a Web Audio API 128-FFT spectrum analyzer. Bass drops dynamically pulse terrain heightmaps and trigger particle explosions.
  • Kinetic 3D Particle Text ("CHRONOS"): Letters react to cursor proximity with elastic spring physics and pentatonic audio plucks.
  • Comet Tail Cursor Emitters: Real-time celestial particle tails following mouse movement.
  • Cosmic Explosion Finale: At 97%+ scroll, the black hole implodes into 4,500 starlight particles orbiting in a logarithmic galaxy spiral, settling into a serene starfield before revealing the finale title card.

🛠️ How I Built It

I crafted CHRONOS using pure vanilla JavaScript, Three.js, and GLSL shaders to ensure maximum performance and zero dependency overhead.

  • 3D Graphics & Shaders: Three.js, Custom GLSL ShaderMaterial (Fresnel Rim Lighting & Accretion Shaders), BufferGeometry particle systems.
  • Audio Engineering: Web Audio API (AudioContext, AnalyserNode, MediaElementSource) connected to space.mp3.
  • Animation & Physics: GSAP for smooth scroll interpolation, custom Perlin noise generator for procedural terrain elevation, and spring-damper physics for particle text.
  • Build System: Vite static asset bundler.

🧠 Challenges I Faced

  1. GPU Performance & Frame-Rate Budget: Rendering 45,000+ total particles, 48 3D planetary meshes, volumetric nebulae, and procedural heightmaps at 60 FPS required aggressive geometry reuse, BufferGeometry instancing, and additive blending modes.

  2. Web Audio Autoplay & Spectrum Sync: Modern browsers restrict un-muted audio playback until user interaction. We engineered a seamless split-screen hero landing portal that initializes the AudioContext and connects space.mp3 directly to an AnalyserNode upon the user clicking "Begin Odyssey".

  3. Black Hole Implosion Animation Timing: Synchronizing the 3D black hole mesh scale collapse (scale -> 0.001), the galaxy particle swarm expansion, and the UI title card fade-in required precise multi-phase timeline scripting.

🎓 What I Learned

  • GLSL Shader Crafting: Building custom vertex and fragment shaders for atmospheric rim lighting taught us how to leverage GPU vector math to achieve AAA visual effects.

  • Audio-Visual Frequency Mapping: Mapping specific Web Audio FFT frequency bins (bass vs. treble) to Three.js vertex positions created a truly organic audio-reactive environment.

  • Cinematic UI/UX Design: Designing split-screen hero portals, orbital trajectory badges, and glassmorphic UI controls that complement rather than obscure 3D graphics.

📐 Mathematical & Shader Foundations

CHRONOS leverages mathematical equations for procedural generation and GPU lighting:

  1. Logarithmic Galaxy Spiral Swarm The 3D starlight particle explosion at the Event Horizon follows logarithmic spiral kinematics: \( r(\theta) = a \cdot e^{b\theta} \) where a = 0.5 and b = 0.2. Particle positions are computed via parametric transformation: \( x(\theta) = r(\theta)\cos(\theta + \phi_{\text{arm}}), \quad z(\theta) = r(\theta)\sin(\theta + \phi_{\text{arm}}) \)

  2. Fresnel Atmospheric Rim Lighting Shader The atmospheric glow surrounding Earth, Venus, and Neptune is calculated per-vertex using the dot product between the surface normal vector N^ and the camera view vector V^: \( I_{\text{Fresnel}} = \max!\left(0.0,\; \left(0.7 - (N \cdot V)\right)^{2.5}\right) \)

  3. Magnetic Spring-Damping Cursor Physics Interactive celestial artifacts react to 3D cursor position using Hooke's Law with velocity damping: \( F_{\text{spring}} = -k_{\text{spring}} \,(x - x_0), \quad v_{t+1} = (v_t + F_{\text{spring}} + F_{\text{magnet}})\,\gamma_{\text{damping}} \)

Built With

Share this project:

Updates

Submission history