🌟 The Last Light
"Even the smallest light can restart the universe."
🔗 Project Links
🌐 Live Demo
https://the-last-light-experience.thegrumpyjourno.workers.dev
💻 GitHub Repository
https://github.com/zubairchowdhury888-art/the-last-light-experience
Inspiration
...
🌟 The Last Light
"Even the smallest light can restart the universe."
Inspiration
Most websites are designed to inform, entertain, or sell something. I wanted to explore a different question:
Can a website tell an emotional story?
That idea became The Last Light a cinematic, interactive 3D experience set in a dying universe where the final star is fading. Instead of navigating traditional pages, visitors become part of the story by travelling through collapsing galaxies, ancient ruins, mysterious cosmic landscapes, and collecting fragments of light to restore the last remaining star.
The project was inspired by science fiction, space exploration, cinematic storytelling, and the belief that hope can exist even in complete darkness.
What it Does
The Last Light transforms scrolling into an interactive cinematic journey.
Visitors experience eight interconnected scenes:
🌌 Void 🪐 Journey ✨ First Light 🏛 Lost Civilization 🕳 Black Hole ⭐ Final Star 💥 Rebirth 🌠 Epilogue
Throughout the experience, users collect glowing fragments of light, interact with the environment, and progress through a story told entirely through visuals, animation, lighting, sound, and atmosphere rather than dialogue.
Rather than functioning like a traditional website, the project is designed as an interactive short film built for the browser.
How I Built It
The project was developed using a modern web graphics stack focused on real-time rendering and smooth interaction.
Technologies used include:
React Vite React Three Fiber Three.js Drei GSAP Lenis smooth scrolling Web Audio API Custom GLSL shaders Post-processing effects
The experience combines scroll-driven camera animation, procedural particle systems, custom shader effects, bloom, dynamic lighting, cinematic transitions, and responsive rendering to create a seamless interactive journey.
Challenges
The biggest challenge was balancing visual quality with browser performance.
Rendering multiple particle systems, animated environments, custom shaders, lighting, and post-processing simultaneously required careful optimisation to maintain smooth frame rates across modern browsers.
Another challenge was creating a narrative without dialogue. Every scene had to communicate emotion using only movement, colour, sound, lighting, pacing, and environmental storytelling.
Finally, preparing the project for production involved optimising assets, improving accessibility, adding deployment metadata, and deploying the experience as a live web application while preserving the original artistic vision.
What I Learned
Building The Last Light helped me improve my understanding of:
Interactive 3D web development Custom GLSL shader programming Real-time rendering optimisation Performance engineering Cinematic camera design Browser-based graphics pipelines Immersive user experience design Storytelling through interactive media Future Improvements
Future versions of the project may include:
Voice narration Procedural galaxy generation Additional explorable worlds Interactive puzzles Spatial audio VR compatibility Hidden story paths Final Thoughts
The Last Light is more than a website.
It is an experiment in using modern web technology to create an emotional, cinematic experience inside a browser.
My goal was to build something that encourages visitors to slow down, explore, and experience the web as a medium for storytelling rather than simply consuming information.
If someone finishes the journey thinking,
"I've never experienced a website like that before."
then The Last Light has achieved exactly what I set out to create.
Log in or sign up for Devpost to join the conversation.