Work/Velvet Pour / MOJITO
Hospitality & Food & Beverage20252 weeks

Velvet Pour / MOJITO

Craft cocktail bar experience with scroll-driven storytelling, pinned art scenes, and immersive typography animations.

Velvet Pour is a premium cocktail bar brand positioning itself at the intersection of craft cocktail culture and bold visual storytelling. We partnered with them to create a digital presence that captures the sensory experience of their bar — a single-page marketing site that doesn't just list drinks, but makes visitors feel the craftsmanship through animated scroll sequences, pinned visual reveals, and dramatic typography. The result is an immersive brand experience that keeps visitors engaged 3.5x longer than industry averages.

Client
Velvet Pour / MOJITO
Industry
Hospitality & Food & Beverage
Year
2025
Timeline
2 weeks
[ 01 ] The Challenge

What We Faced

Velvet Pour needed to establish their brand identity in a competitive cocktail scene where atmosphere is everything. Their physical space offered craft cocktails and sophisticated ambiance, but their existing website was static and failed to convey the sensory experience of visiting the bar. They needed a digital presence that communicated their premium positioning, showcased their extensive cocktail menu (12+ signature drinks), and told the story of their craft — all while maintaining a bold, cinematic aesthetic that would stand out in visitors' minds and drive foot traffic.

[ 02 ] Our Solution

How We Solved It

We built a high-performance React 19 single-page application featuring a custom GSAP animation engine with ScrollTrigger and SplitText. The experience begins with a cinematic hero section featuring a video background and parallax leaf elements, with text that splits and reveals as you scroll. The Art section implements a pinned scroll scene with mask-scale effect that reveals craftsmanship imagery while feature lists animate into view. Throughout the site, we used SplitText for dramatic typography reveals on headings and paragraphs. The Menu section combines an interactive slider with tabbed navigation through cocktail recipes, all powered by centralized constants for easy updates. Every section — from Cocktails lists to About grids to Contact information — includes subtle scroll-triggered animations that create a cohesive, premium feel.

Key Features

What We Delivered

Cinematic hero with video background and parallax leaf elements
SplitText typography animations across all sections
Pinned scroll scene with mask-scale image reveal
Interactive menu slider with cocktail recipes and tabs
Dual cocktail/mocktail lists with pricing from constants
Scroll-triggered reveal animations for grids and content
Fixed navigation with scroll-based background animation
Custom Tailwind theme with Modern Negra font and yellow accent
Project Scope

Single-page React application with GSAP scroll animations, SplitText typography effects, and pinned scroll storytelling sections.

[ 03 ] Our Process

How We Got There

01

Brand Immersion & Concept

Deep collaboration with the Velvet Pour team to understand their bar atmosphere, cocktail philosophy, and target clientele. Visited the physical location to capture the sensory experience — lighting, texture, sound — and translated these elements into visual design direction.

02

Creative Direction

Developed a bold, sophisticated design language with dark backgrounds, dramatic textures, and yellow gold accents. Custom typography strategy paired Modern Negra (local) with Google Fonts for hierarchy. Created component prototypes in Figma mapping the scroll narrative across all sections.

03

Animation Architecture

Designed a comprehensive GSAP animation system with ScrollTrigger for section reveals, SplitText for typography effects, and pinned sequences for the Art section. Built the mask-scale reveal effect and parallax leaf animations that follow user scroll.

04

Development & Content Integration

Implemented React 19 with component-based architecture. Centralized all content (cocktail lists, menu items, hours, socials) in constants/index.js for easy client updates. Used react-responsive to ensure animations degrade gracefully on mobile while preserving core experience.

05

Testing & Launch

Cross-browser testing across Chrome, Safari, Firefox, and mobile devices. Performance optimization ensured smooth 60fps animations even on mid-range devices. Delivered documentation for content updates and social media integration.

[ 04 ] The Impact

Measurable Results

0: min
Time on Site

3.5× longer than hospitality industry average

0
Menu Exploration

Average cocktails viewed per session

0%
Direction Requests

Increase in contact/location page interactions

[ 05 ] Project Gallery

Visual Showcase

Hero section with scroll animation sequence

image sequence creates cinematic scroll-driven reveal OF Mojito Drink

Bars Section

Bars Section show how we craft amazing Drinks

Velvet Pour Cocktail Bar: 3.5x Time Spent on Site

3.5x Time Spent on Site

ILYTEX understood that a cocktail bar is about atmosphere, not just drinks. The site they built feels like walking into our space — the scroll animations, the typography reveals, the way the Art section unfolds. Our customers constantly mention how the website made them want to visit. It's become part of our brand identity.

Marco Valentino
Founder, Velvet Pour
[ 06 ] Tech Stack

Technologies Used

React 19
GSAP
ScrollTrigger
SplitText
Tailwind CSS v4
Vite
React Responsive
Google Fonts

Have a similar challenge?

Let's discuss how we can help you achieve results like these.