Deep Dive
Why I built this
Deep Dive is an immersive, scroll-driven web experience that introduces 1st and 2nd graders to the ocean layer by layer. As users scroll, they descend from the sunlit surface to the deepest trenches, discovering real deep-sea creatures along the way.
The goal wasn’t just to present information, but to make learning feel like exploration—using motion, depth, and interaction to spark curiosity without overwhelming it.
I built this project to explore how storytelling and movement can make educational content more engaging for younger audiences, and as something I could share with my own kids. Many science sites for children rely on static pages or dense text; this was an experiment in a simple idea: what if learning felt like a journey instead of clicking “Next”?
The project also gave me space to experiment with scroll-based narrative design, push depth and motion using lightweight web technologies, and practice translating complex topics like deep-sea biology into clear, kid-friendly visuals and language.
Key Features
- Five ocean zones with dynamic background color transitions and parallax depth tracking to visually reinforce descent
-
16 real deep-sea creatures, each with video carousels, image galleries, and short, kid-friendly descriptions
-
Live depth counter and scroll progress indicator to ground users in “how deep” they are at any moment
-
Marine snow particle system that subtly shifts direction and density depending on the ocean zone
-
Scroll-triggered animations with directional slide-ins that reflect movement through water
-
Fully responsive single-page experience, optimized for desktop and tablet
Challenges & Design Decisions
Balancing motion with readability
Scroll-driven experiences can easily become over-animated. I focused on making motion support learning rather than distract from it by slowing transitions, reducing overlap, and keeping copy short and scannable.
Maintaining performance
Parallax, particles, and video can get heavy fast. I optimized assets, limited simultaneous animations, and avoided large frameworks to keep scrolling smooth across devices.
Making depth intuitive
Numbers like “3,000 meters” don’t resonate with kids, so depth is communicated through color shifts, fading light, environmental changes, and a live counter that makes the descent feel tangible.
Designing for exploration
There’s no final reward screen. The experience is intentionally open-ended, encouraging curiosity and discovery instead of task completion.