Earth 2100: Shape the Future

Inspiration

Earth 2100: Shape the Future was inspired by the growing challenges our planet faces, including climate change, rapid urbanization, resource depletion, and the rise of artificial intelligence. We wanted to create an immersive experience that allows people to visualize how today's decisions could shape tomorrow's world. Instead of presenting facts through reports or statistics, we transformed them into a cinematic, interactive 3D journey that encourages users to think about sustainability, innovation, and the future of humanity.

What it does

Earth 2100 is a mobile-first, scroll-driven 3D web experience that takes users on a journey from 2025 to 2100. As users progress through different decades, they witness the evolution of cities, transportation, energy systems, and the environment. An interactive Decision Simulator allows users to make choices related to renewable energy, transportation, water management, climate action, and urban development. Every decision instantly transforms the virtual world, demonstrating how different policies can create vastly different futures for Earth.

How we built it

We developed Earth 2100 using Next.js, React, TypeScript, Tailwind CSS, Three.js, and React Three Fiber to create a smooth, cinematic 3D experience. GSAP and Framer Motion power seamless animations and scroll-driven transitions. The backend is built with FastAPI (Python). The project is optimized for portrait-mode mobile devices while maintaining excellent desktop performance.

Challenges we ran into

One of the biggest challenges was optimizing high-quality 3D scenes for mobile devices while maintaining smooth performance and responsive interactions. Creating seamless transitions between different timelines without loading interruptions required careful optimization of assets, lighting, and animations. We also focused on making complex sustainability concepts easy to understand through intuitive visual storytelling rather than traditional data-heavy interfaces.

Accomplishments that we're proud of

We're proud of building a visually immersive 3D experience that combines storytelling, simulation, and modern web technologies into a single platform. The project successfully demonstrates how user decisions can dynamically influence the future of the environment through real-time visual transformations. We also achieved a responsive, mobile-first design that delivers a cinematic experience across devices while keeping interactions simple and engaging.

What we learned

Throughout this project, we learned how to combine real-time 3D graphics, modern frontend frameworks, backend simulation logic, and responsive UI design into a cohesive experience. We gained valuable insights into performance optimization, interactive storytelling, user-centered design, and building scalable full-stack applications that are both educational and visually compelling.

What's next for Earth 2100: Shape the Future

In the future, we plan to integrate live environmental datasets, AI-powered prediction models, and more advanced simulation algorithms to make the experience even more realistic. We also aim to expand the project with additional global regions, multiplayer collaboration, personalized sustainability reports, educational content, and support for AR and VR,