BELOW

BELOW: The Ocean Remembers ⚓🌊 BELOW is a highly immersive, cinematic web experience that tells the legendary story of Samuel "Black Sam" Bellamy and the tragic sinking of the Whydah Gally. Built with cutting-edge web technologies, the project combines scroll-driven storytelling, atmospheric visual design, and fluid micro-animations to drag the user deep into the abyss of the Atlantic Ocean.

Instead of a traditional static website, BELOW acts as an interactive documentary. As the user scrolls, they physically descend through the depths of the ocean, unlocking pieces of a 300-year-old pirate legend—from his rise as the wealthiest pirate of the Golden Age to the violent storm that swallowed his unimaginable wealth for over 260 years.

✨ Key Features Cinematic Scroll-Driven Narrative: Built with GSAP (GreenSock) and Lenis Smooth Scroll, the website progresses the story dynamically as the user scrolls, simulating a deep-sea dive. Progressive Hero Sequence: A custom canvas-rendered frame-by-frame animation sequence greets the user on the surface, drawing them into the dark void before the dive begins. Atmospheric Design System: Tailored with a custom Tailwind CSS configuration, featuring deep oceanic gradients (bg-void, bg-trench), glassmorphism effects, and bespoke typography (Instrument Serif & Cormorant Garamond) to evoke a premium, historical aesthetic. Dynamic Parallax & Fade Effects: Text and imagery don't just appear; they gracefully emerge from the darkness using staggered, scroll-scrubbed fade-in animations. Fully Responsive: Meticulously crafted two-column grid layouts that collapse beautifully on mobile devices, ensuring the storytelling remains uninterrupted on any screen size. 🛠️ Tech Stack Framework: Next.js (React) Styling: Tailwind CSS Animation Engine: GSAP (ScrollTrigger) Scroll Hijacking: Lenis Typography: Google Fonts (Instrument Serif, Cormorant Garamond, Inter) Deployment: Vercel

Built With

• html5
• javascript
• json
• nextjs
• react
• tailwindcss
• typescrip