LANDING PAGE

DEEP SEA

June 1, 2026

An immersive aquatic-themed scrollytelling experience utilizing dynamic visual elements and fluid animations to simulate a deep-dive narrative.

Overview

Deep-Sea serves as an exploration of immersive, aquatic-themed scrollytelling, utilizing dynamic visual elements and video playback to simulate a deep-dive experience into the ocean's depths.

Architecture

Tech Stack

React

TypeScript

Vite

Tailwind CSS

GSAP

Vercel

Design System

Cormorant GaramondAa Bb Cc — The quick brown foxStory Titles
Space MonoAa Bb Cc — The quick brown foxDepth Meters & HUD

Key Features

  • Theme: Atmospheric Oceanic Depth

  • Motion: Synchronized GSAP Scroll Tracking

  • Effects: Pure CSS Particle Bubbles & Creature Animations

Applied AI Engineering

This project serves as an exercise in rapid prototyping via strict LLM constraint prompting. To prevent AI component hallucination, a rigorous Master System Prompt was engineered to lock the model into specific DOM architectures, responsive breakpoints, and motion physics. You can view the raw AI Directive used for this build by clicking the Skills.md button at the top of this case study.