Halden One | DTC

Halden One | DTC Speaker Website (Concept)

Overview Halden One is a fictional premium wireless speaker in solid oak, walnut or graphite, sold direct to design-conscious listeners. The whole site is built around one 3D speaker, as a complete, working concept for what a direct-to-consumer audio brand could look like online.

My Role Concept, design and development, solo.

The Approach The speaker is the whole story, so the page follows it as you scroll. It splits apart and rebuilds itself, with each of its five parts named on screen. It makes one slow 360° turn as it falls down the page. It stops to face you while you choose the finish, fabric and size, and the price updates live. When you press play, the lights go down and the grille pulses with the music. It ends by landing softly on a plinth in the footer.

The look is warm linen and ink with a soft serif and one oxblood accent for anything you can press, closer to studio product photography than a tech launch. The same journey runs on phones, with the speaker smaller near the top of the screen.

Experience Views

Assembly: the speaker splits into five named parts

Configure: finish, fabric and size, with a live price

Rooms: the speaker shown in three settings

Built With

React and TypeScript: the front-end framework.

Three.js and React Three Fiber: the 3D speaker, lighting and camera.

GSAP ScrollTrigger and Lenis: scroll-driven animation on one shared clock.

Web Audio API: the track is generated live in the browser, so there is no audio file to download.