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
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