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
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
useScrollanduseTransformhooks to map the scroll offset to specific CSS variables. For example, as the "Industry" phase begins, thesaturateandbrightnessof the sky are linked to the scroll Y-axis. -
Postural Animation: The Rose’s "wilting" was achieved by animating the
pathdata androtateproperties, 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.
Top comments (1)
The seed-to-restoration journey is beautifully visualized! Making environmental restoration interactive through CSS animations is a creative and powerful way to raise awareness.