Solenne Configurator
3D Web Development
Oct '25 - Nov '25
Solenne is a fictional luxury headphone brand, and this project is its interactive launch website. A story-driven experience introduces the brand's new collection of two headphones, with the 3D model travelling through the page as the story unfolds. From there, visitors can customize either headphone to their liking, choosing from several categories of options and seeing every change on the 3D model in real time. The configurator is built with React Three Fiber and Drei, and its custom HTML controls sit alongside the 3D canvas, so the whole experience feels like a real product configurator.
Challenge
One of the main challenges was the animation of the headphones. A single pair travels through every section of the website, so the movement had to flow as one continuous animation instead of jumping or resetting from section to section. The configurator added a second challenge. Each headphone has multiple options, and every change had to update the interface and the 3D model instantly and smoothly, even though the models are detailed. Keeping the controls and the canvas in sync without any flicker or loading delay took a lot of fine-tuning.