POSEIDON-AI

An immersive 11,000m deep-sea oceanographic expedition powered by Google Gemini AI, Web Audio hydrophones, and real-time species intel.

Comment

Inspiration

Over 80% of Earth’s ocean floor remains unmapped and unexplored. The extreme conditions of the Hadal Zone—crushing pressures up to 1,000+ ATM, pitch-black waters, and freezing temperatures—make human exploration difficult. POSEIDON AI was born to combine cutting-edge web graphics with Google Gemini AI, bringing the mysteries of the deep sea directly into an interactive, educational, and cinematic experience for researchers, students, and ocean enthusiasts worldwide.

What it does

POSEIDON AI is an interactive 3D oceanographic exploration platform where users pilot an abyssal submersible down through all five oceanic layers—from the surface Sunlight Zone (0m) down to Challenger Deep at 10,928 meters:

  • 50+ Marine Species & Historic Landmarks: Encounters with Ocellaris Clownfish, Giant Manta Rays, Vampire Squids, Pelican Eels, RMS Titanic Wreckage, Hydrothermal Black Smokers, and Mariana Snailfish.
  • Bioluminescent Glass Orbs: Every specimen is presented inside a glowing bioluminescent glass capsule with seamless radial vignetting.
  • POSEIDON Gemini AI Intelligence: Click on any marine creature or landmark to inspect scientific telemetry and chat in real-time with an AI oceanographic specialist powered by Google Gemini.
  • Tactical Submarine Dive Launch: Pressing BEGIN DESCENT triggers a high-speed hydro-shockwave animation, 360-degree rotating sonar compass, Web Audio sonar pings, and upward bubble rush particles.
  • Real-time Web Audio Hydrophone: Synthesizes client-side sub-bass pressure drones (45Hz) and dynamic lowpass filter muffling that deepens with water depth.
  • Scrubbable Telemetry HUD: Interactive depth scrubber track with real-time pressure (ATM), temperature (°C), and depth tracking.

How we built it

  • Frontend Framework: Next.js 16 (App Router, Turbopack) & TypeScript for high-performance server-side rendering and static optimization.
  • Design & Animations: Tailwind CSS, Framer Motion, and Vanilla CSS glassmorphism styling.
  • AI Engine: Google Gemini API (gemini-flash-lite-latest) with model candidate fallback logic and custom prompt engineering for concise 2-3 sentence scientific telemetry reports.
  • Zero-Lag 120FPS Cursor Pipeline: Direct DOM transformation using React useRef handles and window.requestAnimationFrame to eliminate React state re-render bottlenecks.
  • Zero-Overlap 5-Quadrant Layout: Mathematical 5-point alternating quadrant algorithm ensuring 3 to 4 co-existing marine species float gracefully without circle or text label collisions.
  • Web Audio Synthesizer: Native Web Audio API lowpass filter and oscillator node network synthesizing hydrophone ambient audio and 880Hz → 440Hz sonar pings.

Challenges we ran into

  1. Fluid 60FPS Continuous Scrolling: Translating physical scroll progress over an 11,000m depth scale required fine-tuning mathematical depth mapping curves and DOM update throttles.
  2. Zero Creature Collisions: With 3-4 species active simultaneously in the viewport, preventing label overlaps required designing an alternating 5-quadrant coordinate system with custom vertical offsets (vOffsetVh).
  3. Low-Latency AI Chat: Guaranteeing instant AI telemetry responses meant engineering concise system prompts and implementing model fallback chains to handle high traffic seamlessly.

Accomplishments that we're proud of

  • Built a 100% clean, production-ready build with zero TypeScript errors.
  • Designed 52 bioluminescent specimen visual capsules with dark radial vignetting.
  • Synthesized rich ambient hydrophone audio completely client-side using pure Web Audio API.
  • Created a seamless, cinematic user experience that feels like operating a futuristic deep-sea submersible HUD.

What we learned

  • Advanced techniques in high-frequency DOM manipulation without triggering React render cascades.
  • Harnessing Google Gemini API for domain-specific persona building and ultra-fast micro-responses.
  • Web Audio API signal processing, oscillator node modulation, and dynamic Biquad lowpass filtering.

What's next for POSEIDON AI

  • WebXR / VR Integration: Spatial 3D submersible cockpit mode for VR headsets.
  • Live NOAA & Oceanographic API Integration: Real-time water temperature, current velocity, and satellite telemetry feeds.
  • Multi-User Co-Pilot Expeditions: Real-time WebRTC multi-player submersible exploration.

Built With

Share this project:

Updates