Chivas Regal
Bringing a global whisky brand to life through immersive digital experiences.
The Challenge
Chivas Regal wanted a modern, highly visual website that would reflect its premium brand identity through cinematic animations, interactive storytelling and smooth transitions. The challenge was to deliver this experience consistently across different browsers and devices, while keeping the website fast and responsive. With 15 markets, each using its own language and localised content, we also needed a flexible approach to launching the new website without waiting for every market to be ready.
Our Approach
We built a highly interactive website where animations and storytelling are closely connected to the visitor’s scrolling. One of the key features is a scroll-controlled bottle animation, developed in vanilla JavaScript to give us better control over performance and behaviour. We also introduced smooth scrolling, animated typography and custom interactive components throughout the website, creating a consistent experience that brings the brand’s content to life.
Making Animations Work Everywhere
One of the biggest technical challenges was making transparent video animations work across different browsers and devices. Since browsers handle video transparency differently, we created separate video formats for Safari and Chromium-based browsers, with optimised versions for desktop and mobile. We also implemented image fallbacks for slower connections and devices where video playback might affect performance, ensuring the experience remains smooth and accessible.
Interactive Storytelling
The Chivas crafting story is a great example of how we brought creative ideas to life through development. We built a custom scroll-driven sequence that starts with a close-up of the bottle, gradually reveals the full image, introduces animated text and transitions into an interactive carousel. Using GSAP and CSS animations, we created a seamless experience that also works as a reusable CMS component, giving the brand flexibility to manage and update its content.
One Website, 15 Markets
With 15 markets, each requiring its own language and localised content, launching everything at once would have meant waiting for every market to complete its content and approvals. Instead, we developed a phased rollout solution using Cloudflare routing, allowing each market to move to the new website when ready, while others continued using the previous version. This helped the brand launch sooner without compromising individual market requirements.
The Result
A modern, visually engaging website that combines immersive storytelling with reliable performance across browsers and devices. Beyond the design, we delivered a flexible, scalable solution that supports 15 markets, simplifies content management and allows the brand to continue developing its digital experience.