Responses by 60fps.
Background: The immersive landing page for Chanel’s new perfume Bleu de Chanel L’Exclusif was designed to embody its essence through a seamless digital experience. We translated the sensory and emotional qualities of the scent into an interactive visual journey, blending cinematic storytelling, 3-D environments and subtle motion to create a feeling of immersion and refinement consistent with Chanel’s luxury codes.
The target audience consisted of Chanel’s clientele and premium fragrance enthusiasts, accustomed to high-end experiences and sensitive to craft and detail. The page was conceived for users seeking a deeper connection with the brand’s universe, offering them an elegant digital counterpart to the in-store discovery experience.
Larger picture: The landing page was part of Chanel’s global launch campaign for Bleu de Chanel L’Exclusif, which included film, print, social and retail activations. Within this broader ecosystem, the site served as the central digital touchpoint, a place where the full story of the fragrance could unfold.
While the campaign’s film and imagery built awareness, the immersive site offered an experiential layer, inviting users to explore the materials, inspiration and craftsmanship behind the fragrance in a more contemplative and sensory way. It functioned both as a brand-building experience and as a conversion platform, connecting emotion with action through seamless integration with Chanel’s e-commerce environment.
Design core: At the heart of the experience lies the 3-D bottle of Bleu de Chanel L’Exclusif, rendered entirely in real-time WebGL. The fragrance flacon with fully transparent glass, filled with interactive liquid, is the core visual and emotional element of the site. As users scroll, the bottle moves subtly, reflecting the rhythm of the storytelling and enhancing the sense of depth and material realism. This central object becomes a living sculpture a symbol of the fragrance itself, surrounded by a minimalist and elegant design language that mirrors Chanel’s timeless aesthetic: a monochromatic palette; refined typography; and smooth, cinematic transitions.
Favorite details: We are especially proud of the photorealistic quality achieved in the 3-D rendering of the bottle. Reproducing transparent glass, refractive liquid and subtle light behavior in real-time WebGL required deep material work and shader precision, all while keeping the experience lightweight and highly optimized for web performance.
The result is a true digital twin of the fragrance, combining realism and fluidity. Achieving that level of fidelity and refinement with real-time rendering that runs seamlessly across devices is what we consider the project’s greatest accomplishment.
Challenges: Achieving a level of realism that perfectly matched how the client wanted the product to be represented, from the signature reflections to the exact colors and materials. That meant a huge amount of work on lighting and refraction, which we handled in WebGL to reach the desired photorealistic result.
Navigation design: The idea was to create a smooth, story-driven experience through a single, continuous scroll. As users move through the page, they’re invited to contemplate the fragrance bottle in real-time 3-D, which automatically shifts from one angle to another to accompany the storytelling.
Technology: On the front end, we used JavaScript. The DOM is managed with Vue.js, and the WebGL experience was built using three.js on top of a custom in-house starter. On the back end, the site relies on an internal Chanel tool that manages translations, images and other assets—essentially a custom CMS tailored to their ecosystem.