Work/Casa Jade

Case 02 / 03 · 2026

Quiet-luxury kitchen generated in the 3D designer — lit glass uppers, cornice, conforming worktops.Fig 013D designer — generated kitchen · live
Collection picker step with nine Casa Jade mood boards.Fig 02Collections — 9 boards · 3 families
Display wardrobe with lit glass columns and curved vanity island.Fig 03Wardrobe line — same engine, second product

01Designer · generated quiet-luxury kitchen.

02Collections · nine curated boards, three families.

03Wardrobe line · display closet + vanity island.

Role

Strategy, Product, Engineering, 3D

Stack

Next.js · React Three Fiber · Three.js · Zustand · TypeScript · Vitest · Vercel

A furniture brand's customers design their own kitchens in 3D — guided quiz to a complete room in a minute, nine curated collections, a spec-sheet PDF at the end.

Challenge

Custom cabinetry is sold the same way everywhere: the buyer visits a showroom, waits for a measurement, then waits again while a designer turns the conversation into a 3D mockup. Every serious quote costs a designer's afternoon — and most of those afternoons go to people who never sign. Casa Jade, a furniture and interiors brand in Ulaanbaatar, wanted the order reversed: let the customer design first, and let the sales conversation start from a finished room.

Approach

We built a 3D designer that runs in the browser, on a phone, with no install and no login. A five-tap quiz — shape, size, style, finish, the practical questions — drafts a complete kitchen in about a minute: cabinets tiled symmetrically to the walls, corners resolved, worktops conforming to every base run, cornice drawn at the ceiling line. From there the customer owns the room. Every unit drags, resizes, recolours; every door and drawer opens; a walk-through mode puts them inside at eye level.

The finish system is the brand. Nine curated collections across three families — Japandi, Modern, Quiet Luxury — each a complete scheme of door fronts, carcass tones, worktops, backsplashes and hardware, applied as one decision rather than thirty.

The second product line

The same engine carries a wardrobe and walk-in designer — open columns, lit glass display closets, fitted walk-ins, island dressers with vanity mirrors and jewelry trays. One scene store, one render pipeline, one catalog with product-scoped entries. Building the second line cost a fraction of the first, which is the point: the engine is the asset.

Outcome

  • A complete kitchen from a guided quiz in about a minute, on a phone.
  • Two product lines — kitchens and wardrobes — on one engine.
  • A spec-sheet PDF the customer takes to the showroom: elevations, floor plan, and every unit listed with dimensions and finish.
  • 590 automated tests over the generator's geometry — corners, clearances, symmetry — so a layout never ships physically wrong.
  • Live as the proof-of-category for the studio's configurator offer to furniture makers.

Stack reasoning

React Three Fiber because the catalog is parametric geometry that needs to live inside the React tree — one state store drives the quiz, the panels, and the scene. Zustand with versioned, sanitised persistence so a half-finished design survives a closed tab and a hand-edited blob can't crash the scene. Demand-mode rendering keeps phones cool: the canvas only draws when something changes. No backend by design — the designer is a static surface that scales on a CDN, and the lead path is the next milestone, not a prerequisite.

What we would do differently

The catalog and finish collections live in TypeScript today, which made the first brand fast and the second brand a fork. The productised version moves both into data — a tenant config a furniture maker can own — and adds the design-to-inbox lead path as a first-class feature rather than an export.

The designer's item register open over a generated kitchen
01 · EditorThe working surface — every unit in a numbered register, doors-and-drawers preview switched on.
The designer interface running in Mongolian
02 · BilingualThe same designer in Mongolian — switchable mid-design, not a separate build.
Wardrobe type picker with five closet options
03 · Product linesThe wardrobe funnel — five closet types, one engine. The second product line cost a fraction of the first.

○ Start something

Could your operation use one of these?