Into the Abyss is a cinematic, interactive web experience that takes users on a journey from the atmospheric ocean surface to its deepest, mysterious layers.
Unlike traditional landing pages, this project transforms scrolling into a narrative action—where every scroll represents a physical descent into the unknown. Built specifically for the Frontend Odyssey Hackathon, it focuses on premium visual design, smooth-as-glass animations, and mobile-first responsiveness.
This project was engineered to exceed every mandatory requirement of the challenge:
- 🧠 Story Structure: A complete narrative arc spanning 6+ immersive sections.
- 🎞️ Scroll-Based Interaction: Sync-locked GSAP and Lenis engine for zero-lag storytelling.
- 🧩 Interactive Elements: Physics-based water droplets, hover-reactive creature cards, and a CSS-masked "Flashlight" Abyss exploration.
- 🎨 Animations: Staggered text reveals, parallax environment layers, and a 654-frame high-performance canvas engine.
- 📱 Full Responsiveness: Optimized for Desktop, Tablet, and Mobile with adaptive layout scaling.
- 🌊 Hero (Surface): The entry point. Atmospheric 4K ocean sequence.
- 🐠 Sunlight Zone: A thriving biosphere. Interactive fish swarms (Boids simulation).
- 🌌 Twilight Zone: Light fades. Mysterious parallax silhouettes.
- 🌑 Midnight Zone: Total darkness. Bioluminescent "Interactive Droplets" and species cards.
- 🌀 The Abyss: The final exploration. Use the "Flashlight" mask to discover the unknown.
- 🏁 Conclusion: A final environmental message on ocean conservation.
- Framework: React v18 + Vite
- Animation Engine: GSAP 3 (ScrollTrigger)
- Smooth Scroll: @studio-freight/react-lenis (Sync-locked to GSAP ticker)
- Physics & FX: Canvas API for bioluminescent interactive droplets.
- Styling: Tailwind CSS for a utility-first, performant UI.
git clone https://github.com/RonitkumarSoni/Ocean-Depths.git
cd Ocean-Depths-Frontednpm installnpm run devnpm run buildInspired by Apple Product Pages and Awwwards Storytelling Sites, the design follows three core principles:
- Minimalism: No UI clutter. Let the narrative take center stage.
- Cinematic Pacing: Transitions use premium cubic-beziers (
0.32, 0.72, 0, 1) for a weighted, luxury feel. - Immersivity: Continuous background shifts from Azure (
#0a141e) to Midnight (#050505).
Into the Abyss isn't just a website; it's a technical demonstration of how modern browsers can handle complex math, physics, and high-quality assets simultaneously. This project turns scrolling into a journey, not just navigation.
- Spatial 3D Audio (Underwater Ambience).
- WebGL-based refractive water distortion.
- Dynamic species collection (Encyclopedia mode).
Ronit Kumar Soni Frontend Developer | Creative UI Builder
"The deeper you go, the less we know." 🌊