Earth’s Breath: An Interactive Journey from Seed to Restoration

This is a submission for Weekend Challenge: Earth Day Edition

What I Built

I built Earth’s Breath, an immersive, scroll-driven storytelling experience that personifies nature to highlight the fragility of our planet.

The project follows the lifecycle of a single Rose through 12 interactive scenes. My goal was to move beyond abstract data about climate change and instead create an emotional "character arc" for the Earth. By making the user’s scroll the literal engine for growth, pollution, and eventual restoration, the project turns environmental stewardship into an active, personal journey.

Demo

Earth-Day-DEV-Weekend-Challenge

Code

Github

How I Built It

The technical challenge was synchronizing the "emotional state" of the assets (the Sun and the Rose) with a 2400vh scroll timeline.

1. The "Living" Component Architecture

Unlike static SVGs, I built the Rose and Sun as dynamic React components using Lucide React icons as base paths, which were then manipulated via Framer Motion.

State Mapping: I used the useScroll and useTransform hooks to map the scroll offset to specific CSS variables. For example, as the "Industry" phase begins, the saturate and brightness of the sky are linked to the scroll Y-axis.
Postural Animation: The Rose’s "wilting" was achieved by animating the path data and rotate properties, creating a fluid skeletal movement rather than a simple fade-in.

2. The Celestial Arc

To simulate the passage of time, I calculated a parabolic path for the Sun. Instead of moving in a straight line, the Sun follows a mathematical arc $(y = ax^2 + bx + c)$ across the screen, transitioning from a joyful yellow to a stressed orange as the "Shadow of Industry" phase takes over.

3. Clean-Up Logic with Masks

In the "Restoration" phase, I used a custom SVG mask that "follows" the rain particles. As the rain falls, it reveals a clean version of the soil layer beneath the "littered" layer, giving the visual illusion of the earth being physically washed clean.

Reflection

Building Earth's Breath reminded me that as developers, we have the power to turn "boring" environmental facts into "felt" experiences. Nature behaves exactly how we treat it—if we "scroll" (act) with care, it thrives. If we act with industrial greed, it wilts.