Inspiration
Most of the ocean looks empty from the surface, but it quietly powers the world above it. It produces oxygen, absorbs heat and carbon, supports life, and carries almost all global internet traffic through submarine cables.
The Invisible Ocean turns those hidden systems into an immersive descent. Each section reveals something people rarely see: plankton, migration, marine snow, hydrothermal vents, cables, and the abyss.
What we learned
We learned that strong storytelling is not only about facts. It is about pacing, atmosphere, motion, sound, and giving every idea enough space to be felt.
We also learned how to connect scroll position with a living 3D environment, so the ocean changes naturally as the visitor descends.
How we built it
We built the experience with React, TypeScript, Three.js, and React Three Fiber. The 3D world uses shaders, particles, fog, lighting, animated marine life, and depth-based color transitions.
GSAP and Lenis control the smooth scroll-driven camera journey. Zustand manages interactive state, while Tailwind helps structure the interface. We also created cinematic visual sequences for moments such as the underwater cable network.
Challenges we faced
The main challenge was keeping the project immersive without turning it into a normal website with generic sections and UI.
We also had to balance visual quality with performance. Large particle systems, shaders, animation, scrolling, and video-style visuals all need to feel smooth without overwhelming the browser. The final goal was to make every interaction feel calm, intentional, and part of one continuous underwater world.
Log in or sign up for Devpost to join the conversation.