DEV Community

Cover image for 🌍 Earth Replies to Your Future β€” What If the Planet Answered Back?
Pawar Shivam
Pawar Shivam

Posted on

🌍 Earth Replies to Your Future β€” What If the Planet Answered Back?

DEV Weekend Challenge: Earth Day

This is a submission for Weekend Challenge: Earth Day Edition


🌌 What I Built

Most climate apps show numbers.

This one talks back.

Earth Replies to Your Future is an immersive, cinematic web experience where users send a message to Earth… and Earth replies.

Not with data β€” but with emotion.

The goal was simple:
πŸ‘‰ turn awareness into feeling

Instead of dashboards and statistics, this project creates a personal conversation between the user and the planet.

After receiving Earth’s response, users make a choice β€” and the experience transforms into a visual future based on that decision.


πŸŽ₯ Demo

πŸ‘‰ Live Experience: [https://earth-day-dev-weekend-challenge.vercel.app/]
πŸ‘‰ GitHub Repo: [https://github.com/pawarshivamd/earth-day-dev-weekend-challenge

What to expect:

  • 🌍 AI-generated poetic responses (typed in real-time)
  • 🎧 Earth speaking using voice synthesis
  • 🌫️ Bad future β†’ red tones, shake, smoke
  • 🌿 Good future β†’ glow, particles, calm atmosphere

(Tip: Use sound for full experience)


πŸ’» Code

The full source code is available here:
πŸ‘‰ [Add GitHub Repo Link]


βš™οΈ How I Built It

🧠 AI Layer (Core Experience)

I used Google Gemini API (gemini-1.5-flash) as the emotional brain of the project.

Instead of basic prompts, I designed structured instructions:

  • Assign a role β†’ β€œYou are Earth…”
  • Control tone β†’ poetic, reflective, human-like
  • Limit length β†’ short, meaningful responses
  • Avoid robotic language

This ensures:
πŸ‘‰ every response feels alive
πŸ‘‰ every interaction is unique


🎨 Frontend Experience

  • React + Vite β†’ fast and modular UI
  • Tailwind CSS β†’ glassmorphism + responsive design
  • Framer Motion β†’ cinematic transitions between scenes

Instead of pages, I built scene-based flow to make the app feel like an interactive film.


🎧 Immersion Layer

  • SpeechSynthesis API β†’ Earth literally speaks
  • Ambient background audio β†’ triggered after user interaction
  • Subtle particles + gradients β†’ depth and atmosphere

⚑ Performance & UX Decisions

  • Used Page Visibility API to pause heavy video/audio when tab inactive
  • Avoided heavy video-first approach β†’ used optimized visuals + motion
  • Built a β€œDice Roll” suggestion system for users who don’t know what to write

🧩 Key Challenges

1. Making AI feel human

Early outputs felt robotic.

βœ… Solved using:

  • strict prompt engineering
  • role-based storytelling
  • tone constraints

2. Balancing design vs performance

Heavy video backgrounds caused lag.

βœ… Solution:

  • lightweight visuals
  • motion-based immersion instead of raw media

3. Creating emotion without data

No charts. No dashboards.

Focus was on:

  • pacing
  • storytelling
  • user decisions

πŸ† Prize Categories

βœ… Best Use of Google Gemini

Gemini powers the entire experience:

  • generates emotional responses
  • adapts to user input
  • creates a different journey every time

πŸ’­ Why This Matters

We don’t lack information about climate change.

We lack connection.

This project is an attempt to make people pause β€”
not to analyze…

…but to feel.


πŸ•ŠοΈ Final Thought

β€œThe future was never written. It was always yours to choose.”

🌍 If Earth could reply to you… what would you say?

Top comments (0)