Let’s start with an introduction of your company and share some background on your experience and expertise, particularly as it relates to this project.

We are Cosmic Shelter, a Paris-based studio founded in 2021 by graduates of Gobelins with a dream of continuing the legacy of French 3D expertise. Our mission is to create meaningful experiences across the entire 3D value chain — from strategy and proof of concept to social media, film, websites, mixed reality, and more.

Committed to sustainability and inclusion, we are a home for the most talented developers, creatives, and digital project managers worldwide, specializing in WebGL to deliver accessible and impactful digital solutions.

Who were the key stakeholders in this project?

During this project, we worked along with LVMH’s communication team, but also with the group’s brands like Louis Vuitton, Berluti, Chaumet, Dior and Sephora. Our team included our in-house designers, 3D artists, developers and project managers, and we were helped by many freelance designers and numerous « Okaydevs » to work on this huge project together.

Tell us a bit about the project — what were the main goals and objectives?

This is our third collaboration with LVMH, the biggest one to date and for a very unique occasion. Last year, we were approached by LVMH following their announcement as a Creative Partner for the Paris 2024 Olympic and Paralympic Games. The goal was to dive into this very dense partnership between them and the Olympics, to tell about the « Artisans of All Victories » and their Maisons’ savoir-faire through an innovative perspective.

The Maison of All Victories is an immersive website that might just be one of the largest microverses out there on the web.

Could you explain the purpose behind the project, including the problem it addresses or the opportunity it’s tapping into?

The purpose of this project was to develop a unified platform to showcase our client’s role in supporting and promoting the Paris 2024 Olympic & Paralympic Games to highlight the craftsmanship and savoir-faire behind this collaboration. The group and its Maisons were involved in various key tasks, such as designing the medals, crafting the torch and medal trunks, or creating outfits for the French delegation. Additionally, LVMH sponsored seven athletes during the Games, and it was essential to have a dedicated space to showcase these contributions.

The project aimed to create an engaging and immersive experience. The challenge was to design something that would appeal to a wide audience, not just those familiar with luxury brands. Accessibility was equally crucial, ensuring that the content was easy to navigate and inclusive for everyone. The result was a streamlined website where all the content lives in one place, making the experience both cohesive and accessible.

Walk us through the design process. What were some of the primary UI/UX elements and considerations the team focused on?

The idea was to create something that would live up to the biggest sports event in the world: something beautiful, interactive, and engaging.

In terms of concept, we had to think of a global setting that could include the many experiences that needed to be featured. For that, we drew inspiration from LVMH’s brands which they called Maisons (French for ​“houses”). Visually, we aimed to design an actual Haussmannian house that would also be reminiscent of LVMH’s headquarters on Avenue Montaigne in Paris, while paying homage to the city where the Games would take place.

As you step into the house, the navigation unfolds seamlessly, guiding you effortlessly through its many rooms and floors. We designed the structure to be intuitive, making exploration both vertical and horizontal feel natural. Prioritizing accessibility from the start allowed us to craft a navigation system that’s not only simple but also enhances the overall experience for everyone.
 

We also included an evolving header bar to support your journey, with arrows for easy floor navigation and a handy exit button for smooth transitions out of any room. By considering users with disabilities, we’ve ensured that the navigation is clear and consistent for all visitors, making their exploration both engaging and straightforward.

Let’s talk tech — what tools and technologies were use for this project?

Nuxt.js, Prismic, GSAP, Three.js, Cosmic custom Three.js tools & framework.

Share some of the standout features and functionalities implemented in this project.

Our experience incorporates both horizontal and vertical navigation, allowing users to seamlessly explore the environment across different axes. The 3D world is designed to offer smooth transitions, providing an immersive experience, with progressive loading of 3D assets to ensure good performance. Users can interact with various objects throughout the 3D spaces. We’ve combined baked and real-time shadows with refraction and diffraction effects to achieve a high-quality, realistic appearance. Additionally, we prioritize accessibility, following RGAA standards to ensure the experience is inclusive for all users.

How did the team approach performance optimization and ensure accessibility throughout the project?

For this project we had to handle the rendering of not less than nine 3D scenes. Concerned about the loading performances, we implemented lazy loading strategies, for example by loading 3D assets just before entering the floor or changing room.

We also had to deal with high quality / ​“realistic” 3D rendering, which is a big struggle in terms of both loading and performances. We used various optimization techniques to tackle that:

• Shadow map of multiple objects combined in a single texture by baking in different color channels and then using vertex color to select which channel to use per object. This technique allowed us to reach high quality rendering with less textures to load & less GPU memory usage.

• For the Dior scene, we had to include glass fragrance bottles which is quite a challenge because it involves dealing with how light reacts through translucent materials such as glass. We dove into Three.js transmission material to audit the performance impact, and it was way too big, at first! We finally found the bottleneck 🕵️‍♂️ -> Out of the box from Three.js, the render target used for the scene rendering (needed to apply the transmission) was way too big for our use case and not easy to resize with the material API so we had to rework the material to make it fit our needs, and just like that (and some small sorcery from our WebGL dev wizard 🧙) we were back to a butter smooth frame rate!

We also used (again) vertex colors in order to merge all the fragrance bottles into one single geometry / material which was also a huge performance boost.

• We used KTX format for most of our textures which improves asset size, GPU memory efficiency, and decoding speed.
• Encouraged by our client and our own commitment to inclusion, we took the challenge to make this website as accessible as possible, which is quite an ​“unexplored path” when it comes to an immersive 3D experience like this one… And we managed to reach an amazing 91.7% grade following the RGAA accessibility standard. We have been advised during all the production process by accessibility experts, from design to development. Biggest challenge was making the content always readable even when using extreme browser zoom or external tools that increase line height, letter spacing etc.. we also had to always keep a nice contrast between text content & background, quite challenging when it comes to interactive 3D backgrounds.

Walk us through the testing process and the quality assurance steps taken to ensure everything ran smoothly.

Given the complexity of the website, which featured numerous pages and diverse features, the testing process was equally intricate. However, through seamless communication, tailored tools, and strategic prioritization, we established a continuous testing workflow throughout the production phase. This close collaboration between our team and the client ensured that no technical or practical issue went unnoticed.

Moreover, the project’s first public reveal coincided with a major event, VivaTech 24, presenting a golden opportunity: live testing in front of a real audience. The immediate feedback we received allowed us to swiftly refine UX and UI elements, enhancing the overall user experience in real-time.

Can you share any challenges encountered and how they were overcome?

We faced an extremely tight deadline along with continuous changes throughout the project due to the many parties involved. We had to constantly adapt the design and development while ensuring the project stayed on schedule. We anticipated that directly in the concept & design phase by creating a house with many rooms that we could add / remove / update without having to update too much the 3D or development.

We also created various tools in development to be able to edit the 3D directly on the browser, for example, all the camera animations are driven by B‑Spline curved directly editable from the website, in debug mode.

What is the DevOps stack?

The website is hosted on an NGINX Node.js server with Akamai caching.

Give us a breakdown of the project timeline — what were the key milestones and phases along the way?

Last October, we began sketching ideas, but it wasn’t until mid-March that the real adventure began. That’s when we encountered our biggest hurdle: time. Normally, crafting a microverse from scratch takes us three to four months. This time, however, we were up against a tight deadline for our most ambitious project yet – one that combined the prestige of LVMH with the excitement of the Olympics, right here in our city. Despite the pressure, we were thrilled by the opportunity and ready to dive in headfirst.

The client’s plan called for a staged website launch, with different spaces revealing over time. We tackled 3D and UX/UI design simultaneously, aiming to complete both in about a month.

Working closely with LVMH’s accessibility team, we ensured our designs met all standards. After getting the green light from LVMH and each Maison, we dove into the final month of development, racing to meet our deadline.

Tell us about the launch date — were there any special events or marketing efforts tied to it?

We launched the project in three phases, with new features unveiled at every new update. The first and biggest milestone was Vivatech – Europe’s largest technology conference – , for which we unveiled the project for the first time.

We then updated the website midway through with the rooftop dedicated to the Olympic Torch Relay.

Eventually we launched the final version of the website at the end of July to coincide with the opening ceremony of the Olympics.

Looking back, what were the main goals you aimed to achieve, how did the project turn out, and what were the biggest highlights?

Our mission was ambitious: to create a 3D website that brought together multiple experiences in one immersive platform. We succeeded, weaving 11 unique experiences including nine 3D scenes, into a single, seamless site. We also aimed to make this website accessible to all, and we hit a 91% compliance rate with RGAA standards.

The clock was ticking, and delivering a project of this size in just four months seemed daunting. Yet, our incredible in-house team and a group of talented independent designers and developers made it happen – turning what’s usually a timeline for much smaller projects into a reality for this massive undertaking.

The result was a website that wasn’t just launched; it was showcased at major events in Paris: starting with Vivatech and then at Club France, where it celebrated French athletes during the Olympic and Paralympic Games. There, it engaged thousands of users, bringing the project to vibrant life.

What were the key takeaways from this project? Did any unexpected insights come up along the way?

This project reinforced our ability to manage tight deadlines and foster seamless collaboration. We quickly adapted our workflow to meet the ambitious timeline without compromising quality. Collaborating closely with LVMH’s accessibility team enhanced our expertise in accessibility standards, while the challenge of integrating 11 experiences into a single 3D website sharpened our scalability and design practices. Throughout the process, we honed our adaptability, responding to client feedback and overcoming unexpected technical hurdles, which ultimately strengthened our problem-solving skills.

Take a moment to recognize the client and any team members who played a crucial role in the project’s success.

We want to extend our deepest thanks to LVMH for entrusting us with this extraordinary opportunity, with a special mention to Justine and Valentine for their invaluable collaboration, as well as the LVMH Accessibility hub for their continuous support during the project.

We also want to recognize every designer and developer who joined us on this journey: Adrien Lamy, Anoukia Perrey, Antoine Galy, Bertrand Breton, Eder Anaya, Geoffrey Legenty, Henri Heymans, Julien Renau, Kacper Chlebowicz, Martijn van Meijel, Michaël Garcia, Nathan Braud, Paul Soulhiard, Sonore Studio, Thom Aufresne, and Thomas Latyr Van Glabeke. Your expertise and dedication were crucial in bringing our vision to life.

Your expertise and dedication were crucial in bringing our vision to life.

Finally, we’d like to express our heartfelt gratitude to everyone involved, whether directly or behind the scenes. Your collective efforts and support were essential in guiding this project to its successful completion.

What advice or tips would you share with others looking to take on a similar project?

Set realistic objectives and don’t undermine timelines (some work times cannot be reduced cc developers); communicate openly and often; advocate your expertise; encourage feedback; never settle and push designs and concepts further; celebrate milestones.

Where can people connect with you, check out more of your work, and follow you on social media?

Cosmic Shelter Projects: https://cosmicshelter.com/projects
Instagram: @cosmic.shelter
Linkedin: Cosmic Shelter
X: CosmicShelter

→ VISIT WEBSITE

→ VIEW PROJECT