Work · Aurin
The making of Aurin
How a 3D headphone customiser came together in two days: four reviewed passes, a model built by script, the mistakes that were cheap because they came early, and a making-of film.
Words by David Mansaray
Aurin is a headphone shop I built around one idea: let customers design the product themselves, in real-time 3D, and then buy exactly what they designed. The brand is fictional. The configurator, the 3D model and the buying flow are real, and you can try them below.
- From first line of code to a working, shareable demo
- 2 days
- Shell, headband, details, engraving and extras
- 5 steps
- In the exploded anatomy view
- 7 parts
- Of rented GPU time to render the making-of film
- ≈ $1
01 / The goal
Customers design it. Then they buy exactly that.
A configurator is only useful to a shop if three things hold. The customer has to see the product they will actually receive, not a flat swatch. The price has to follow every choice, so there are no surprises at checkout. And the order has to carry the full configuration, so whoever makes it builds the right thing.
Every option in Aurin renders on the model and prices itself as you choose it. Add it to the bag, and the bag and checkout show the build line by line.
02 / How it came together
Four passes, each one reviewed.
I built Aurin in short passes. Each one ended with review rounds by AI agents focused on 3D, product-page design and scroll behaviour, and their findings set the next pass. Pick a step to see where it was.
Every option, price, the bag, checkout and an account area, all working end to end on a simple shape built in code. That let me judge the flow and the option list before spending any time on modelling.
The code-built shape was replaced by a model generated in Blender: rounded rims, a punched grille, vents, a USB-C port and pivot caps, with baked shadows and studio lighting. Engraving was added as a live emboss.
The home page became a scroll story. One 3D view follows you through it, and the headphones come apart into seven labelled parts in an anatomy section you can drive with a slider.
Driver internals for the anatomy, a carry case whose lid closes at the end of the story, and a fold so the headphones tuck into the case.
A menu sheet, captions that sit in a bottom sheet, a stacked configurator, touch-safe scrolling and correct scaling on iPhone.
A share image, a page light enough for LinkedIn to preview, and a 65-second making-of film.
03 / The model
Built by script, so changes stay cheap.
The headphones aren’t sculpted by hand. A set of Python scripts builds the geometry in Blender, sets up the materials, bakes the lighting detail and exports the file the page loads. Changing a part means editing a script and running it again, not redoing the model. For a real product, that is what keeps later changes to the range affordable.
Drag across the image to compare the first Blender pass with the final model. The first pass looked close, but the yoke arcs floated free of the ear cups. The render review caught it before it reached the page.
04 / The details customers notice
Engraving that catches the light.
Personalisation is where a configurator earns trust, so the engraving had to look made, not printed on. Your text is drawn onto the ear cup as a surface texture, so it picks up the studio light like the rest of the shell. It is an embossed effect rather than cut geometry, which keeps it instant as you type.
05 / Mobile
Most customers will see it on a phone.
The first mobile version worked, but the headphones and the headline competed for a small screen. Drag to compare it with the version after the mobile pass.
06 / What worked, and what didn't
The mistakes were cheap because they came early.
What worked
- Building the whole buying flow before any modelling. Options, prices and the order were settled while changes cost minutes.
- Generating the model from scripts. Every fix was a re-run, not rework.
- One 3D view for the whole site. The story and the configurator share it, so the model loads once.
- Review rounds at the end of each pass. They found real problems, like the floating yoke arcs, before anyone else saw them.
What didn’t
- Embedding the models in the page made it about 11 MB, and LinkedIn would not preview the link. Loading the models as separate files brought the page down to about 2 MB.
- The ear cups came out of Blender with their surfaces facing inwards, so swapped materials rendered inside out until I drew them double-sided. The proper fix belongs in the export script.
- Transparent light panels in the studio lighting rendered as black. They have to be opaque.
- Mobile clips in the first cut of the film looked jerky, so I dropped the vertical version (more on that below).
07 / An experiment
Where to render: laptop, server or a rented GPU?
The making-of film needed several Blender shots, so I timed the same shot on each machine I had before committing to one.
| Machine | Renderer | Time per frame | What it meant |
|---|---|---|---|
| My laptop (M2) | EEVEE | 14.4 s | Fine, but it ties up the machine |
| My laptop (M2) | Cycles | 370.6 s | Too slow |
| A shared CPU server | Cycles | 54 s | 8 to 9 hours for the film |
| A rented RTX 4090 | Cycles | about 5.7 s | Done in under an hour, about $1 in total |
Renting a GPU by the hour beat both the laptop and the server on time, for about a dollar. The machine was switched off as soon as each batch was downloaded and checked.
08 / The making-of film
Sell the result, not the speed.
To share Aurin, I made a 65-second film covering the modelling, the scroll and the customiser. My first hook was how fast it was built. I dropped it: someone who wants a configurator cares about what their customers get, not how quickly I worked. The hook became “Let your customers design it”, and the film ends with an invitation to talk.
An AI critique of the first 90-second storyboard said it dragged, so it was cut to 65 seconds with the real product shown first. The vertical version for phones was dropped after its clips looked jerky. The cause turned out to be page scroll snapping fighting the scripted capture, and an animation clock that produced uneven frames. Both are fixed in the capture tooling now.
Want this for your product?
A 3D customiser for your own range.
If your product comes in options (colours, materials, sizes, personalisation), this is the kind of experience I can build for it. To start, I’d need photos or drawings of the product, the list of options with their prices and any rules about which ones combine, and your brand guidelines.
I’d begin the way Aurin did: a working configurator on a simple model within days, so you can judge the flow, then the real model and the page in passes you review. Aurin is a front-end demo. A production version also connects the cart to your store, whether that’s Shopify, WooCommerce or something custom, and has to match your real product exactly, so it takes longer than two days.