Future Worlds

• 

  Sea Level Rise

Inspiration Climate stats are everywhere but nobody reacts to them. You can tell someone 680 million people live in coastal flood zones and they'll nod and move on. We wanted to build something that makes you actually see what those numbers mean. Not a chart. Not an infographic. A world you can look at and explore that shows what happens if nothing changes by 2100.

What it does Future Worlds lets you pick an environmental crisis, pollution, sea level rise, or deforestation, and generates a full 3D world showing what that future looks like. You get a panoramic view you can drag around and zoom into and a link to explore the environment in 3D through World Labs Marble. Each scenario is paired with real statistics and a breakdown of consequences so you understand what you're looking at and why it matters.

How we built it We built the frontend in React with Vite. The core of the app sends a detailed text prompt to the World Labs Marble API, which generates a 3D world from that prompt. We poll the API for the result, then display the panorama with a custom drag-and-zoom viewer. We added localStorage caching so once a world is generated, it loads instantly on revisit without burning another API call. The UI uses a particle background, animated loading states with scenario-specific messages, and a side panel showing real data alongside the generated world.

Challenges we ran into The biggest challenge was the API response time. World generation takes a while, so we had to build a robust polling system with abort support so users can navigate away without leaving orphaned requests. We also originally tried embedding the 3D viewer in an iframe, but that was unreliable; it kept failing to load. We pivoted to a panorama viewer with a direct link to the full 3D experience instead, which ended up being a better UX anyway.

Accomplishments that we're proud of The caching system works well. Once you've generated a world, it's instant on reload. The panorama viewer with drag and zoom feels responsive and works on both desktop and mobile. And honestly, the worlds that come back from the API are striking; seeing a flooded skyline or a smog-choked city actually hits the way we wanted it to.

What we learned Working with a generative 3D API was new for us. Prompt engineering matters a lot here — small changes in the text prompt produce very different worlds, so we spent time crafting prompts that consistently gave us the dystopian results we needed. We also learned a lot about async state management in React, especially handling long-running operations with cancellation and caching cleanly.

What's next for Future Worlds We want to add more scenarios: extreme heat, biodiversity collapse, and water scarcity. We're also looking at adding a comparison mode where you can see a "business as usual" future next to a "best-case" future side by side. Longer term, we'd like to let users write their own prompts and generate custom scenarios, turning it into an open-ended tool for climate education.

Built With

• css
• html
• javascript
• react
• vite
• world-labs-marble-api