Dive from the surface to the abyss in a fully interactive cinematic web experience.

🔗 https://abyssal-dive.vercel.app/

💡 Best experienced on desktop with sound enabled.

Abyssal Dive is not just a website — it's a cinematic, interactive ocean exploration experience built using modern web technologies.

Unlike traditional websites, Abyssal Dive transforms scrolling into a narrative-driven exploration powered by real-time 3D environments.

Users begin at the surface and descend through real ocean depth zones, experiencing:

• changing ecosystems
• evolving marine life
• atmospheric transitions
• and ultimately, the mysterious abyss

Built as part of a frontend hackathon focused on interactive storytelling and immersive web experiences.

• 🎬 Cinematic storytelling on the web
• 🌊 Scroll-driven 3D immersion
• 🤿 Interactive diver exploration mode
• 🧠 Educational + emotional narrative blend

• Intro cinematic story cards
• Scroll-based ocean descent
• Depth-driven environment system
• Procedural fish ecosystem
• Diver FPS exploration mode
• Underwater museum (interactive)
• Abyss cinematic ending
• 6-chapter narrative About page

• Smooth GSAP-powered transitions
• Context-aware guidance hints
• Real-time depth counter
• Procedural ambient audio + mute toggle
• Clean cinematic UI

Frontend:

• React + Vite

3D & Animation:

• Three.js
• @react-three/fiber
• @react-three/drei
• GSAP (ScrollTrigger)
• Framer Motion

State & Systems:

• Zustand
• Web Audio API

• Scroll → drives camera depth
• Depth → controls environment + life + lighting
• Interaction → triggers UI + story + exploration

This creates a continuous, immersive pipeline from UI → 3D → narrative

1. 🎬 Intro
2. 🌤 Surface
3. 🌊 Descent
4. 🤿 Diver Mode
5. 🏛 Museum
6. 🌑 Abyss

• Optimized render loops (no GC spikes)
• Low-poly stylized assets
• Controlled particle systems
• Efficient Three.js memory handling

• Advanced fish models
• Mobile optimization
• Expanded interactions

npm install
npm run dev

Frontend Odyssey: The Interactive Web Experience Challenge — focusing on creativity, immersion, and storytelling