Velvet Pour
Velvet Pour is an interactive cocktail showcase with a dark, editorial aesthetic and a deliberately paced scroll experience. The interface is built with React 19, Vite, and Tailwind CSS, with all motion handled through GSAP via the @gsap/react integration. Each section runs its own timeline that activates on scroll through ScrollTrigger, with pinned full-viewport sections that hold the viewer in place while the visuals transition, and free-scroll passages where parallax layers move at different speeds to build depth. SplitText breaks headlines into individual characters for staggered text reveals, while a scroll-progress–driven video keeps the hero footage in sync with the viewer's position on the page. A product carousel adds GSAP-driven slide transitions and synchronized captions, and the layout stays fully responsive across desktop and mobile.
The core of the build is orchestrating many independent GSAP timelines along a single scroll axis so that pins, text reveals, and parallax stay in sync without competing for scroll position. Each ScrollTrigger defines explicit start and end points tuned to the document flow, and the @gsap/react useGSAP hook scopes animations to their components and handles cleanup on unmount and re-render. The scroll-synchronized video is driven from ScrollTrigger progress rather than time-based playback, so the footage tracks the scroll position precisely. SplitText reveals are initialized after layout so the character spans animate cleanly without disturbing the surrounding composition.
A polished, motion-led landing page that sustains smooth scroll-driven animation across desktop and mobile — coordinated GSAP timelines, SplitText reveals, pinned sections, multi-layer parallax, a scroll-synchronized hero video, and an animated product carousel working together as one continuous experience. The page reads as a single choreographed sequence while keeping performance steady throughout.