Frontend Web DevelopmentCompleted

Velvet Pour

A scroll-driven animated landing page for a premium cocktail bar, built as an engineering study of high-performance frontend animations using GSAP, ScrollTrigger, video scrubbing, CSS mask effects, and React lifecycle integration.

React 19GSAP 3.14gsap/reactTailwind CSS 4Vite 7react-responsiveJavaScript

GitHub Live Demo

Screenshots

Velvet Pour — Hero Section — Hero Section

Velvet Pour — CSS Mask Reveal — CSS Mask Reveal

Velvet Pour — Cocktail Carousel — Cocktail Carousel

Velvet Pour — Contact Section — Contact Section

Key Metrics

Single Page Application

GSAP ScrollTrigger

Client-Side Rendering

Overview

Velvet Pour is an immersive marketing website designed around advanced scroll-driven interactions and cinematic animations. The project explores animation engineering concepts including video scrubbing, SplitText effects, CSS masking, pinned sections, parallax effects, and high-performance DOM animation patterns within a React application.

Problem

Building highly interactive scroll-driven experiences requires careful coordination between React's rendering lifecycle and animation libraries that directly manipulate the DOM. Without proper architecture, complex animations can introduce performance issues, memory leaks, and inconsistent behavior.

Solution

Developed a single-page animated experience using GSAP and ScrollTrigger, leveraging lifecycle-aware animation management through useGSAP(), context cleanup, responsive animation configurations, and optimized scroll-based interactions.

Architecture

Client-side React application built with Vite. React components render the UI while GSAP ScrollTrigger manages animation timelines, video scrubbing, pinned sections, and DOM mutations. Animations are isolated using GSAP contexts to ensure proper cleanup and prevent lifecycle-related issues.

Challenges

Synchronizing video scrubbing with metadata loading.
Managing GSAP cleanup within React StrictMode.
Supporting different ScrollTrigger behaviors on mobile devices.
Implementing performant CSS mask animations.
Coordinating multiple concurrent animation systems.
Preventing animation state leakage across component re-renders.

Lessons Learned

GSAP context and cleanup patterns.
ScrollTrigger internals and optimization techniques.
Video scrubbing implementation strategies.
React lifecycle integration with DOM-mutating libraries.
CSS masking animation techniques.
Tailwind CSS v4 architecture.
Performance optimization for animation-heavy interfaces.
Responsive animation design patterns.

Future Improvements

TypeScript migration.
Improved CSS architecture and modularization.
Shared animation abstraction utilities.
Font loading optimization.
Image optimization pipeline.
Automated testing coverage.
Error boundaries.
Additional animation customization options.