Nord & Oak: 3D armchair configurator (concept)
Md Salim Rana
Nord & Oak is a concept project: a product page for a furniture store that doesn't exist. I built it to show how a 3D configurator can replace a row of product photos.
Try it live: https://3d-configurator.srwebstudio.com
The Nord & Oak product page with the 3D armchair and its options
The idea
A furniture store usually shows each fabric as a separate photo, and customers have to imagine the combination they want. Here there's one chair, and every fabric and leg finish is applied to it live, so customers see exactly what they'd order, with the price next to it.
What it does
The armchair turns slowly until you touch it, then you can drag to rotate and scroll to zoom
Six fabrics (Sage Green, Oat, Terracotta, Charcoal, Navy and Cream Bouclé) and three leg finishes (Walnut, Oak and Black Metal) switch with a smooth transition
The price updates with each option
Add to cart shows a confirmation and bumps the cart badge
On phones, the viewer sits above the options
One chair, every fabric and leg finish
How it's built
A free model, prepared for options. The chair is a free CC0 model from Poly Haven. In Blender I split it into a frame and two cushions, gave them separate fabric and frame materials, and swapped the baked textures for neutral tileable fabric and wood, so each colour can be tinted cleanly.
Materials, not photos. Each swatch changes the material's colour, roughness and metalness, with a short tween instead of a hard snap. Black Metal looks like metal, and the woods look like wood.
Small and fast. The model is compressed with glTF-Transform (meshopt and WebP textures) to under 1 MB.
three.js with orbit controls, studio lighting and a soft floor shadow.
SvelteKit and Tailwind CSS, built as a static site and deployed on Cloudflare.
Add to cart with the chosen options
What this shows
How a configurator works on a real product page: a model split into the parts that change, materials that tint properly, live pricing and an add-to-cart flow. In a real store, the options would map to the store's variants so checkout shows the same price.
The configurator on a phone
This is spec work, not a client project. The store, prices and cart are made up.
Like this project
Posted Nov 6, 2026
A concept product page for a fictional furniture store. Customers turn the armchair around, switch between 6 fabrics and 3 leg finishes, watch the price update and add their choice to the cart. Built with three.js and SvelteKit.
