🌟 Inspiration
What remains of our stories when we are gone? The Last Human was born from a desire to push the boundaries of 3D WebGL storytelling. We wanted to move beyond static websites and create a visceral, cinematic experience that transports visitors 500 years into the future on Earth (Sol-3). Our goal was to blend high-fidelity real-time 3D graphics, responsive spatial sound synthesis, and an emotionally resonant narrative exploring memory, extinction, and human legacy.
🚀 What it does
The Last Human is a continuous, 60+ FPS interactive 3D WebGL web application that dynamically binds real-time camera flight and spatial lighting to smooth scroll progress across 7 distinct story chapters:
- 01 // The Orbital Descent: Telemetry HUD monitoring orbital altitude and atmospheric re-entry from 480 km above Earth.
- 02 // Megalopolis Ruins: Flythrough of an overgrown cyber-city featuring procedural instanced skyscrapers, volumetric fog, and interactive sector scanners.
- 03 // Apartment 2247 Memories: An emotional core uncovering preserved everyday human artifacts (unsent text messages, childhood plushies, family photographs) via an interactive decryption terminal.
- 04 // Subterranean Reliquary Museum: Holographic archival vaults with interactive 3D inspectable models (DNA Double Helix, Voyager Golden Record, Quantum Devices).
- 05 // Extinction Chronology: An interactive 500-year timeline charting humanity's rise, ecological tipping points, and the final silence of 2526.
- 06 // Subterranean Monolith Signal: Deep abyss exploration with a quantum resonance wave scanner.
- 07 // Epilogue & Visitor 1,247 Twist: A non-linear temporal twist revealing that you are Visitor 1,247, culminating in transmitting the final archive beacon into the cosmos.
🛠️ How we built it
- Core 3D Engine: Built with React Three Fiber (R3F) and Three.js, implementing instanced mesh rendering (
InstancedMesh) for maximum performance and buttery-smooth 60+ FPS. - Camera Choreography: A zero-garbage-collection direct spline camera flight algorithm synchronized seamlessly with Lenis Smooth Scroll.
- UI & Kinetic Typography: Designed with Framer Motion and Tailwind CSS, featuring frosted glassmorphic HUD components, reactive sci-fi cursors, scanline overlays, and responsive kinetic typography.
- Audio Engine: Developed a pure Web Audio API procedural sound synthesizer with zero external audio assets—generating dynamic sub-bass ambient drones, hover clicks, memory unlock arpeggios, and resonant monolith frequencies in real time.
💡 Challenges we ran into
- Synchronizing 3D Camera Flight with Scroll: Achieving seamless camera positioning without frame stutter or input lag required avoiding React re-renders inside frame loops, using single mutable vector allocations and direct spline interpolation.
- Cross-Platform Performance: Balancing instanced city geometry, real-time lighting, and volumetric fog to maintain 60 FPS across both desktop and mobile devices.
🏆 Accomplishments that we're proud of
- Delivering a continuous, un-paginated 3D universe where 3D scenes and narrative UI coexist in total visual harmony.
- Creating an emotionally evocative narrative that engages users both visually and intellectually.
- Zero audio asset load times thanks to real-time procedural Web Audio synthesis.
📚 What we learned
- Mastered advanced spline camera math and smooth scroll interpolation in Three.js and React Three Fiber.
- Learned how to effectively combine narrative pacing with interactive WebGL shaders and audio cues to heighten emotional immersion.
🔮 What's next for The Last Human
- Adding WebXR support for full Virtual Reality (VR) headset exploration.
- Procedural multi-branching story logs where visitors can leave encrypted messages for future explorers.
Log in or sign up for Devpost to join the conversation.