Inspiration
Most websites are designed to deliver information as quickly as possible. I wanted to create something different—a website that tells a story and evokes emotion.
The idea behind GENESIS: The Last Tree came from imagining a future where humanity has exhausted Earth's natural resources, leaving behind a silent, lifeless world. In the middle of that emptiness stands a single ancient tree—the last symbol of hope.
Rather than presenting environmental restoration through facts or statistics, I wanted visitors to experience it firsthand. Every interaction is designed to show that even the smallest action can inspire change.
My goal was not simply to build a website, but to create an interactive cinematic journey that people would remember long after they closed the browser.
What it does
GENESIS is an immersive 3D web experience that guides users through the transformation of a dying planet into a thriving ecosystem.
Visitors begin in a dark, abandoned world filled with cracked terrain, fog, and silence. As they discover and awaken the Last Tree, the environment gradually comes back to life through dynamic lighting, flowing water, growing vegetation, wildlife, and atmospheric effects.
The experience combines storytelling, interactive exploration, cinematic camera movement, and modern web technologies to create an engaging digital journey.
How we built it
The project was built using a modern web development stack focused on performance and immersive graphics.
Challenges I ran into
One of the biggest challenges was balancing visual quality with browser performance.
Creating an immersive environment while maintaining smooth frame rates required careful optimization of models, textures, lighting, and animations.
Another challenge was designing a transformation sequence that felt meaningful rather than simply changing colors. We wanted every animation, sound, and lighting effect to contribute to the story and create a memorable emotional moment.
Accomplishments that we're proud of
- Building a fully interactive cinematic experience in the browser.
- Creating a story-driven website instead of a traditional webpage.
- Combining storytelling, animation, and 3D graphics into one cohesive experience.
- Designing a transformation sequence that rewards exploration and interaction.
- Delivering an immersive experience using modern web technologies.
What I learned
This project taught us much more than 3D graphics. I learned how storytelling can enhance user experience, how lighting and sound dramatically influence emotion, and how thoughtful interaction design can make a website feel alive.
I also gained practical experience working with React Three Fiber, Three.js, animation libraries, and performance optimization techniques for real-time 3D applications.
What's next for GENESIS: THE LAST TREE
This project is only the beginning.
Future plans include:
- Expanding the world with additional environments and hidden areas.
- Introducing interactive wildlife and dynamic ecosystems.
- Adding a complete day and night cycle.
- Incorporating spatial audio for greater immersion.
- Supporting VR and WebXR experiences.
- Creating seasonal environments and procedural weather systems.
- Enhancing accessibility and mobile performance. My long-term vision is to continue evolving GENESIS into a showcase of what immersive storytelling on the web can become.
Built With
- drei
- framer
- gsp
- html
- javascript
- motion
- react-icon
- splne
- vite
Log in or sign up for Devpost to join the conversation.