The Challenge
A fitted kitchen is much harder to configure than a single product. Every room is a different size, so there is no fixed model to show. The customer has to fit units to their own walls and see how finishes and lighting look in a closed room. The maker needs drawings it can quote from. The starting point was one carpenter's delivery for one real kitchen: a STEP CAD assembly and a set of drawings. The brief was to turn that one kitchen into a configurator for any room from 1.8 to 6 metres, while still rebuilding the original kitchen exactly.
The Solution
This is the second configurator on the platform I built for the outdoor kitchen, and it changes the core idea. There, the Blender model was the product. Here, the product is a catalogue and a layout engine. I measured the carpenter's construction rules from the CAD: board thicknesses, gaps, plinth heights, drawer boxes and corner reach. The engine generates the cabinetry from those rules for any room and any unit width. An automated test rebuilds the delivered kitchen with the engine and checks it against the carpenter's STEP file to within 0.5 mm, apart from a few named exceptions. Fixed items such as the oven, fridge, sink and tap come from the CAD as meshes. The viewer runs on three.js's WebGPU renderer, with a WebGL2 fallback. The order PDF is drawn in the browser too, laid out like the carpenter's own drawing set. I ran the build with Claude Code in scoped tasks, with 35 written decision records and every claim tagged as measured, read from source or inferred.
Room First
The customer starts with their own room, not a showroom model. The kitchen is fitted to it.
Enter the room
Width and depth from 1,800 to 6,000 mm, ceiling height from 2,400 to 3,000 mm, in 10 mm steps. Or choose "As designed", the room the sample kitchen was drawn for.
Pick a shape
Straight, L-shape left or right, U-shape or galley. If the room is too small for a shape, the customer is told why in a plain sentence.
Fill the walls
Add, remove and reorder units on each wall: cupboards, drawers, sink and dishwasher units, corner units, wall cupboards, open shelves, and oven, pantry and fridge columns.
Made to measure
Each width can be set to the millimetre, or left on auto to share the free space. The units beside a new one make room where they can.
Per unit
Front layout, what goes inside, corner fittings, hinge side, oven and microwave slots, the dishwasher front and the hob.
Finishes and Light
Every finish is shown in the room, under the room's own lights.
Fronts and handles
Matt lacquer, decor board, oak veneer or solid wood, each in its own colours. No handles, bar, knob or a slim edge profile.
Worktops and walls
Laminate, solid oak, quartz or compact worktops in 3 thicknesses, a finish for panels and shelves, an optional panel between worktop and wall cupboards, 4 wall paints and 3 floors.
LED lighting
LED strips under the wall units and in the plinth, in white or a colour, with a dimmer.
A closed room, lit properly
No studio backdrop. Light comes from modelled downlights with shadows, LED strips as area lights, and bounce light computed in the browser on the GPU. Reflections come from the room itself.
Fast first, then richer
The first frame is drawn with direct light only. Bounce light follows, so the customer sees the kitchen sooner.
Look Around
Three ways to see the kitchen, and every door can open.
Stand inside
A camera at eye height inside the room, the way the customer will see their own kitchen. Or switch to a plan view or a cutaway overview.
Open it up
Doors, drawers and fittings open. One button opens everything that fits. Units whose doors would hit each other are never open together.
Share the kitchen
The link holds the whole kitchen and the camera, so a customer can send their version to a partner or come back to it later.
Made for phones
On a narrow screen a Hide options tab clears the panel away. Measured at 3 phone sizes, the 3D view fills about half the screen with the options open and about 95% with them hidden.
Embed anywhere
One iframe tag puts it in any website, with full screen and copy-link support.
From Order to Workshop
The order arrives with drawings the maker can quote from.
A short order form
Name, email and consent are required. The customer gets a reference number. In this demo nothing is sent or stored.
A PDF with drawings
It downloads by itself: the configuration, a 3D picture, a QR code of the link, a plan and one elevation per wall, on A3 sheets under a title block.
Dimensions from the layout
Every dimension chain comes from the generated layout, not typed in. An automated check compares the drawings with the carpenter's delivered set.
Measured on a Phone
Speed targets were set up front and measured on a real iPhone (Safari, WebGPU) with the production build.
First frame
0.77 s for the default page, and 2.3 s for the full sample kitchen (medians of 5 runs).
Changes
A new front colour is on screen in 0.15 s and a new worktop in 0.23 s. An added unit takes 1.5 s, including generating it.
Smooth to look around
A median frame time of 17 ms while looking around, with no frame over 33 ms.
Small to load
The default page is 1.3 MB on first load.
Recovers by itself
If the GPU device is lost, the 3D view rebuilds in place.
The Results
A working kitchen planner, live on this site and embeddable in any page. A customer can go from an empty room to an order with A3 drawings in one sitting. On an iPhone, every speed target measured passes. Lighthouse scores it 100 for accessibility, and 902 automated tests pass.
From an empty room to a fitted kitchen in under a minute. Recorded in real time.
Finishes, handles, open doors and the three views on the sample kitchen. Recorded in real time.
One of the A3 sheets in the PDF that comes with every order. The dimensions come from the generated layout.
