Responses by Basement Studio.

Background: This project offers a 3-D immersive journey for visitors on the web to explore the shop of Brooklyn-based fashion line KidSuper through different portals and engaging interactions. It brings behind-the-scenes information of the brand’s world to light, nodding to their local customers as their global brand enthusiasts.

By offering a virtual exploration of the shop, the site caters to users who are not only interested in the brand’s products, but also those who want to delve deeper into the brand’s story and creative process.

Larger picture: This is an extension of our previous project with the KidSuper team: the Kissing Bag.

Design core: The experience starts with a painting that vividly portrays the outside of KidSuper’s store in Brooklyn. Once inside, you can navigate different products from the KidSuper world and also delve into various interactive sections, from playing tunes on the Winco to admiring the captivating animated paintings.

Favorite details: We blended real painted artwork and elements with an intensive 3-D craft that seamlessly works through WebGL on the browser. We created custom shaders to make brush effects that reveal the website on mouse movement. And, we allowed users to share their live drawings on social media.

Challenges: We had to create our own version of the component that renders our scenes as textures—based on Drei’s RenderTexture. In our case, we needed some extra features like pausing the render, providing some context data, computing resizing events and passing custom render targets as a prop.

New lessons: We learned a ton about transition from 3-D software to the WebGL renderer, making our team collaboration thrive and understanding each other on both worlds.

Navigation structure: Building the portal navigation to travel through scenes was the key to making this experience immersive. You can access the store and then go back to the outdoors smoothly, like spiraling into an infinite loop animation. Inside the store, many interactive elements in the product views let users change colors and rotate them for full appreciation.

Technology: For the artwork and UI, we used Blender, Figma and Photoshop as much as brushes and tints to paint the different scenes. Our development stack is built on top of React, with GSAP as the animation engine, Next.js as the framework, and react-three-fiber for managing three.js and WebGL features. Regarding the shopping experience, we leveraged Shopify alongside our custom commerce toolkit. Finally, we used Vercel to deploy the overall project.

Special technical features: We leveraged some of the latest features of Vercel Storage solutions to let users share a live version of their sketches. We first captured a still frame from the isolated render of the notebook and save it in Vercel Blob storage via a route handler, which returns the URL to access our blob later. To let people retrieve these captures, we store the matrix of points’ state via Vercel KV, a serverless Redis storage, and link it with the Blob URL as a key.