<aside> 🌊

DEEP SEA is an immersive scrollytelling experiment where vertical scroll becomes a simulated descent through ocean depth. The project focuses on layered motion, atmospheric storytelling, and maintaining performance as the scene becomes visually denser.

</aside>

1. Project overview

Deep Sea was built from a simple personal idea: make the depth of the ocean feel understandable through interaction instead of presenting it only as numbers or a static infographic.

The current experience is intentionally an experiment rather than a complete marine-species encyclopedia. Its strongest implementation work is the scrollytelling system that maps page progress to visual depth.

Stack: React, TypeScript, Vite, Tailwind CSS, GSAP, ScrollTrigger, Vercel.

2. Experience goal

The page should make the user feel that they are descending rather than simply reading sections stacked vertically.

That requires several visual signals to move together:

• depth indicator;
• light/color falloff;
• subject/camera position;
• particles/bubbles;
• creature/content reveals;
• overall motion intensity.

The scroll position becomes the timeline for the scene.

3. Scene architecture

flowchart TD
    SCROLL["Tall scroll track"] --> PROGRESS["Normalized scroll progress"]
    PROGRESS --> CAMERA["Sticky viewport / camera"]
    PROGRESS --> DEPTH["Depth HUD"]
    PROGRESS --> BG["Depth atmosphere / gradient"]
    PROGRESS --> SUBJECT["Main subject movement"]
    PROGRESS --> PARTICLES["Particles / bubbles"]
    PROGRESS --> CONTENT["Depth-zone content"]

The page separates the scroll distance from the visible scene. A tall document creates progression while a sticky viewport acts like a camera looking into the ocean.

4. Sticky camera model