Responses by type8 studio.
Background: Sports holding company 21TSI manages several sports equipment brands. We designed its website to reflect the brand’s identity, blending innovation, design and technology. Rather than designing a traditional corporate website, we wanted to create an immersive experience with interactive visuals, inviting users to explore the brand’s DNA beyond just reading information. Targeting industry professionals, investors and curious audiences, it offers a fresh perspective on the sports world, appealing to those interested in immersive visual experiences, design and technology.
Design core: The site’s design reflects a collaborative effort between Paul Barbin, creative director at design firm DEPARTMENT Maison de Création, and Thierry Chopain, designer at type8 studio. Our goal was to create something radical yet refined, moving away from traditional corporate sites while maintaining elegance. The art direction is minimalist in its approach, with a strict monochromatic palette and precise typographic choices. Yet the experience itself is in constant motion, brought to life through WebGL animations and subtle transitions that give a sense of depth and presence. A key aspect of the project was the use of AI-generated imagery, which helped push our creative boundaries further. These visuals, reworked and curated to fit the artistic direction, reinforce the futuristic and almost enigmatic aura of the brand.
Favorite details: One of the standout features is the combination of interactive 3-D elements with smooth and elegant transitions. Jordan Thiervoz’s WebGL work brought dynamic movement to the site, and morphing effects enhance the fluidity of the navigation. The cursor distortion effect further immerses users, allowing them to control their experience.
The collaboration between us and DEPARTMENT Maison de Création seamlessly blended creative direction and technology, ensuring a site that feels innovative and meticulously designed. We’re proud of how these elements come together to create a unique and immersive experience for visitors.
Challenges: A key challenge was ensuring the scrolling experience was engaging. We wanted to make the user feel immersed without overwhelming them. This led us to focusing on dynamic movement, with elements morphing and reacting in both the foreground and background. We balanced interactivity with performance; too much movement could have been distracting, while too little would have felt flat.
It was crucial for us to refine the animations to be subtle yet impactful. Additionally, maintaining seamless performance across various devices required careful attention to detail and constant iteration, ensuring that both the design and technical execution aligned with the vision.
Technology: For animations and interactive elements, we used OGL for WebGL, Anime.js and Locomotive Scroll, ensuring fluid and organic movement. This was our first time using OGL, and it was a great experience—easy to understand, lighter than three.js and efficient for our needs.
On the back end, we used Eleventy for static site generation, which provided a fast and flexible structure. GitHub was used for version control, while Netlify handled deployment, offering seamless updates.