Home / Lab / 3D chair configurator, step by step, with live pricing and AR

Stable

3D chair configurator, step by step, with live pricing and AR

A chair you build step by step in the browser: fabric, colour, wood, legs and stitching, with live pricing, its own sewn label and AR.

A finished chair upholstered in burgundy bouclé in the configurator, with its sewn label "The living-room one" and the configuration summaryOpen the experiment
Status
Stable
Date
15 October 2026
Explores
3D configurator · Augmented reality · Materials · Lead generation
Built with
Three.js · React Three Fiber · model-viewer · React

What it is

A complete product configurator built around a sample chair. You build it step by step, one decision at a time: fabric, colour, frame, legs, armrests and the stitching thread. At each step the camera moves in on the part you’re choosing and the price updates instantly. When you finish, the chair turns around once and appears with its own sewn label, “designed by you”.

We built it to show, with something you can play with, what a configurator does for a brand: customers arrive knowing exactly what they want, and the brand receives that request already qualified.

Why step by step

Showing every option at once is overwhelming: there’s too much to decide and people leave before they finish. One decision per screen makes each step easy and the whole journey feel short.

There’s another reason: we value what we build ourselves more. It’s known as the IKEA effect. That’s why the ending isn’t a form but the finished chair, with its serial number and a name if you want to give it one. By the time you send it, it’s already yours.

How to use it

  • Follow the steps with “Next”. The thread at the top is sewn knot by knot as you progress.
  • Rotate the chair by dragging (with your finger on a phone) to see it from any side.
  • When you finish, give it a name if you like: it appears on its label.
  • Change any part from the summary, without starting over.
  • Tap “See it in your room” on your phone to place it at real size in your space.
  • Send us the configuration or share your chair with “Copy link”: whoever opens it sees it already finished.

Legs step: the camera drops to show them, with the three options and a description for each

What it explores

  • Modelling in code: the chair is built from parametric geometry, with real measurements in metres. Switching legs or adding armrests isn’t loading another model: it’s the same chair with different parts.
  • Materials you can tell apart: the weave, the bouclé loops, the velvet sheen and the wood grain are generated in code, with no images to download.
  • A camera that follows you: each step has its own framing, and the distance adapts to the shape of the screen so the chair fits the same on a phone, a tablet or a wide monitor.
  • AR with what you configured: the server generates your chair’s 3D model on the spot, with its textures and at real scale, in the two formats phones need (glTF for Android and USDZ for iPhone).
  • From click to lead: “Send configuration” sends the order to the studio with every option, the price, the chair’s name and a link to reopen it.

The same chair finished in sage velvet, walnut, sled legs, armrests and blue stitching

On your phone

The chair sits on top and each step below, with the price and buttons always at hand. In landscape, they sit side by side.

The configurator on a phone: the chair on top, the legs step below and the price and buttons at the bottom

The same system works for any product with variants: furniture, lighting, footwear, bikes, sports facilities or machinery.

Want something like this for your brand?

Let's talk →

More experiments

All experiments