Halden Roam: 3D exploded view of a speaker (concept)
Md Salim Rana
Halden Roam is a concept project: a portable speaker that doesn't exist, shown from the inside. I built it to show how an exploded view can explain a product better than a spec list.
Try it live: https://3d-exploded-view.srwebstudio.com
The Halden Roam speaker, fully exploded
The idea
Hardware products often sell on what's inside: the drivers, the battery, the build quality. A spec table lists those things, but an exploded view lets people see them, in the order they sit in the product, and tap the part they care about.
What it does
One click, or a slider for finer control, pulls the speaker apart into its parts
Labels follow each part as the model turns
Tap a part, like the drivers, the main board or the battery pack, to highlight it and read about it, while the rest fades back
On phones, the labels move into a card under the model and the camera pulls back so every part fits
Tap any part to highlight it and read about it
How it's built
A model with a real inside. The outer shell started as an AI-generated model. I built the inner parts (chassis, two drivers, passive radiator, main board, battery, button board, caps) in Blender with a Python script, and kept every part as its own mesh so it could move on its own.
A custom explode. Each part has its own direction and distance, so the speaker opens in layers instead of flying apart at random. The slider and the button drive the same animation.
Labels tied to parts. Each label tracks the centre of its part and updates every frame as the model turns, so it never points at the wrong thing.
Easy to edit. Part names and descriptions live in one config file, separate from the 3D code.
Small and fast. The model is compressed with glTF-Transform (meshopt and WebP textures) to about 2 MB.
SvelteKit and Tailwind CSS, built as a static site and deployed on Cloudflare.
The exploded view on a phone
What this shows
The full workflow for an exploded view: getting a model with separate inner parts (even when you only start with an outer shell), animating it apart, and explaining each part on desktop and phones.
This is spec work, not a client project. The product and its specs are made up.
Like this project
Posted Nov 6, 2026
A concept product page for a fictional portable speaker. Visitors pull it apart with a slider, turn it around and tap any part, like the drivers or the battery, to see what it does. Built with three.js and SvelteKit.
