The Descent

Enter the bottom of ocean

Inspiration The deep ocean has always evoked a primal sense of dread—the crushing pressure, the absolute darkness, and the terrifying scale of what might be lurking just out of sight. We wanted to capture that exact feeling of thalassophobia and translate it into a web browser. Our goal was to push the boundaries of what a modern website can feel like by transforming a standard scrolling webpage into a seamless, cinematic 3D horror game.

What it does The Descent is an immersive, scroll-driven WebGL horror experience. Instead of clicking through pages, users are physically plunged into the abyssal zone using their scroll wheel. The deeper you scroll, the darker and more terrifying the environment becomes. You pass through distinct biomes—from sunlit ancient ruins to a massive biological "Hive," ultimately ending at the terrifying "Maw." The experience features dynamic lighting, environmental fog that hides massive geometry until you are right next to it, and a fully reactive procedural audio engine.

How we built it We built the entire frontend experience using a bleeding-edge web stack:

Framework: Next.js and React for state management and UI overlays. 3D Engine: React Three Fiber (R3F) and Three.js to handle the WebGL rendering. Camera Pathing: We used THREE.CatmullRomCurve3 to map a mathematical 3D spline curve that winds downwards. The user's scroll position drives a parametric t value along this curve, allowing for smooth, rollercoaster-like camera movement. Audio: Instead of forcing users to download large MP3 files, we built a custom Procedural Web Audio Engine. Using native Web Audio API nodes (Oscillators, Biquad Filters, and Delay networks), we generate deep-sea drones, sonar pings, and terrifying biological screeches mathematically. The audio parameters (pitch, volume, filter cutoff) are directly bound to the scroll depth. Challenges we ran into Building a native-feeling 3D game inside a DOM-based web framework presented massive challenges:

Camera Gimbal Lock: As the camera dove vertically downwards, standard .lookAt() functions broke down, causing the camera to violently spin and flip (Singularity glitches). We solved this by mapping the camera to look slightly ahead on the mathematical spline curve, and refactored enemy AI to use exact Quaternion copying to act as flawless 2D billboards that never break. Performance Optimization: Rendering massive leviathan skeletons and biological hives destroyed framerates. We implemented heavy fog to cull distant rendering, and dynamically mounted/unmounted 3D scenes based on precise scroll boundaries so the GPU only processes what is immediately in front of the player. The Web Audio API: Browsers strictly block autoplaying audio. We had to build a custom "Signal HUD" preloader that masks the WebGL initialization and forces a user interaction ("Commence Dive") to safely unlock the AudioContext and sync the soundscape to the scroll wheel. Accomplishments that we're proud of We are incredibly proud of the atmosphere we achieved. By combining the heavy, oppressive fog culling with the dynamic procedural audio engine, the moment-to-moment gameplay feels genuinely unsettling. The seamless transition from the loading screen directly into the automated 3D dive—without a single loading screen interrupting the descent—makes the experience feel incredibly premium. We are also incredibly proud of the "Signal Lost" glitch ending that triggers if you push too hard against the bottom boundary!

What we learned We leveled up our knowledge of 3D mathematics significantly. Working with quaternions, cross-products for camera banking, and curve tangents gave us a deep appreciation for engine programming. We also learned how to synthesize highly complex soundscapes entirely through code using the Web Audio API, avoiding static assets entirely.

What's next for The Descent We want to take this to the next level by implementing WebXR support so users can experience the terrifying scale of the leviathan skeletons in full Virtual Reality. We also plan to add branching paths where user choices (like panning the camera left or right) determine which biome they fall into next!