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)