Hennessy Concept: A Scroll-Driven Luxury Brand Site

// Overview

What Hennessy Concept is

A design study of what a luxury drinks brand could feel like online, built as an unofficial concept for Hennessy cognac (not affiliated with Hennessy or Moët Hennessy). Its signature moment is a pour you control by scrolling: a bottle tips in and fills a crystal glass over ice, rendered live in 3D.

// My role

What I built

I designed and built it end to end in Next.js with React Three Fiber, GSAP and Lenis. The liquid, stream, ice and condensation are custom shaders; slower devices are detected while the scene runs and switched to pre-rendered frames of the same scene. Around it: an 11-bottle collection whose bottles fly into their own pages, SVG flavour wheels, an amber page wipe, a preloader and age gate, a custom cursor and optional synthesised sound. I cut the bottle photos out with an AI pipeline, kept LCP around 2 seconds on throttled mobile with zero layout shift and zero axe accessibility violations, and fact-checked every date and tasting note against Hennessy's own material.

// Highlights

Highlights

• Scroll-driven WebGL pour with custom liquid, ice and condensation shaders
• Automatic fallback to pre-rendered frames on slower devices
• Shared-element bottle transitions, flavour wheels and an amber page wipe
• ~2 s LCP on throttled mobile, zero layout shift, zero axe violations
• Every date and tasting note fact-checked against Hennessy's own sources