3D Door Configurator Case Study: How Leef Doors Lets Customers Design Premium Slimline Doors Online

Leef Doors manufactures premium slimline glass doors in Melbourne — pivot doors with Belgian-engineered hardware, hinged doors, arched variants, and soft-close sliders. Every door is made to order across nine distinct series, with options for glass type, aluminium finish, hardware, handing, and custom dimensions.

They're a boutique manufacturer competing against the Ventora Group's brands — Stegbar, Corinthian, Trend — not on scale, but on design quality, craftsmanship, and the kind of attention that a 2-10 person operation can give to every order.

But selling a premium custom door online presents a specific challenge: the product only exists once it's been manufactured to the customer's exact specification. There's nothing on a shelf to photograph. Every door is unique.

The Challenge

Leef's product range is deep. Nine door series, each with different structural profiles. Multiple glass types including reeded and frosted options. A range of aluminium finishes — Lexicon Quarter, Black Ink, and more. Left or right handing. Custom dimensions down to the millimetre. Several hardware options per series.

The number of possible configurations runs into the thousands. No amount of photography can cover that. And unlike a standard off-the-shelf door, there's no way for a customer to walk into a hardware store and see their exact specification.

Before the configurator, the buying process worked the way it does for most custom door manufacturers: the customer visits the showroom, browses samples, talks through options, and eventually receives a quote. It works — but it limits the sales process to showroom hours, showroom locations, and the availability of the sales team.

Leef needed a tool that would:

• Walk customers through every decision in a logical sequence — no overwhelming option grids
• Show the door updating in real-time 3D as each choice is made
• Calculate and display live pricing based on the selected configuration
• Let customers submit their configured door as a quote request
• Give the Leef team an admin dashboard to manage products, series, options, and pricing without needing a developer

This wasn't just a configurator. It was a complete product management and quoting system with a 3D frontend.

What We Built

The configurator lives at designer.leefdoors.com.au and serves as a customer-facing design tool linked from Leef's main website. It guides customers through the full specification of a door — from series selection to hardware — in a structured, step-by-step flow.

The 7-Step Guided Wizard

Configuring a custom door involves dozens of interdependent decisions. Presenting them all at once would overwhelm most customers. Instead, the configurator uses a guided wizard that walks through seven steps in sequence:

1. Location — where the door will be installed, which determines structural and compliance requirements
2. Style — the door series and type (pivot, hinged, arched, slider), each with a different 3D model and set of available options
3. Handing — left or right opening, reflected in the 3D preview so the customer can verify it matches their floor plan
4. Colour — aluminium frame finish, applied to the 3D model in real time
5. Size — custom width and height dimensions, with the 3D model scaling to reflect exact proportions
6. Hardware — handle style and finish, swapped on the 3D model
7. Glass — glass type selection (clear, reeded, frosted, tinted), with the 3D material updating to show transparency, texture, and light behaviour

Each step reveals only the choices relevant to that stage, and each choice narrows the options available in subsequent steps. Selecting a pivot door shows pivot-compatible hardware. Choosing a specific series determines which glass types are available. The wizard manages this complexity so the customer doesn't have to.

The 3D preview updates at every step. By the time the customer reaches the end, they've seen their exact door take shape — series, finish, glass, hardware, dimensions — rendered from multiple angles.

Live Pricing

This is where the configurator crosses from visualisation tool into commercial infrastructure. As the customer makes each selection, the price updates in real time. Change from clear glass to reeded? The price adjusts. Increase the width by 200mm? The price recalculates. Select premium hardware? Updated instantly.

Live pricing does two things. First, it eliminates the wait-for-a-quote bottleneck that slows down every custom product sale. The customer doesn't need to submit a form and wait 48 hours to find out if their preferred configuration fits their budget. They know immediately.

Second, it encourages experimentation. A customer who sees that reeded glass adds $X to the price can make an informed decision on the spot — and they're more likely to choose the upgrade when they can see the visual difference in 3D alongside the exact cost impact. This naturally drives higher average order values.

3D Rendering

The 3D engine is built with React Three Fiber — the React renderer for Three.js — giving us the performance of WebGL with the component architecture of React. This was the right choice for a configurator with this level of UI complexity.

The rendering handles several technically demanding requirements:

• Glass materials — slimline glass doors are defined by their glass. Rendering clear, reeded, frosted, and tinted glass convincingly in real time requires careful work with transmission, roughness, refraction, and environment mapping. The glass needs to look like glass, not like a flat texture.
• Aluminium finishes — the frame finishes range from matte to brushed to anodised. Each needs distinct reflectivity and surface properties to communicate the difference between, say, Lexicon Quarter and Black Ink.
• Dynamic dimensions — the door model scales based on customer-input dimensions, which means geometry, frame proportions, and glass panel sizing all adjust parametrically
• Hardware swaps — handle models are loaded and positioned correctly on the door based on handing and style selection

The result is a 3D preview that communicates not just shape and colour, but the material quality that defines a premium door. For a product where the visual distinction between finishes justifies a significant price difference, that rendering quality directly supports the sale.

Quote System

At the end of the wizard, the customer can submit their configured door as a formal quote request. The submission includes the full specification — series, dimensions, glass, finish, hardware, handing — alongside the calculated price and the customer's contact details.

Every quote that arrives is a qualified lead with a complete specification. The sales team doesn't need to spend the first conversation establishing what the customer wants. They can go straight to confirming details, discussing installation, and closing the order.

The Admin Dashboard

This is what elevates the project from a configurator into a complete product management system — and what placed it in our Enterprise tier.

Most configurators are static: the options are hardcoded, and adding a new product or changing a price requires a developer to update the code and redeploy. For a manufacturer with an evolving product range, that creates an ongoing dependency on development resources for what should be routine business operations.

Leef's admin dashboard gives the team full control over:

• Product management — add, edit, or remove door series, styles, and variants without touching code
• Pricing management — update base prices, option surcharges, dimensional pricing rules, and material costs. Changes take effect immediately in the customer-facing configurator
• Option configuration — manage which finishes, glass types, hardware options, and sizes are available for each series. Control dependencies between options (e.g., which glass types are compatible with which series)
• Quote management — view, filter, and manage incoming quote requests with full configuration details attached

The dashboard runs on an Express.js backend that serves as the API layer between the admin interface and the customer-facing configurator. Product data, pricing rules, and option configurations are stored in the database and served dynamically — so when Leef adds a new aluminium finish or adjusts the price of reeded glass, the configurator reflects the change without any code deployment.

This is the build-versus-buy tradeoff in action. A SaaS configurator platform would have offered some of this functionality out of the box — but with monthly fees, limited customisation, and no ownership. By building custom, Leef owns the entire system: frontend, backend, admin dashboard, and database. No recurring licence fees, no vendor dependency, no constraints on how the product evolves.

Technical Architecture

For technical decision-makers evaluating a similar project, here's how the system is structured.

Frontend

Built with React and Vite for fast development and optimised production builds. The 3D rendering layer uses React Three Fiber, which integrates Three.js into the React component lifecycle. This means the 3D scene is managed declaratively — door components, materials, lighting, and camera positions are React components that update reactively when configuration state changes.

The guided wizard UI, option selectors, pricing display, and quote form are standard React components. State management coordinates between the wizard steps, the pricing engine, and the 3D scene — ensuring that every selection is reflected simultaneously in the UI, the 3D preview, and the calculated price.

Backend

Express.js serves as the API layer, handling:

• Product and option data delivery to the frontend configurator
• Pricing calculation and validation
• Quote submission processing
• Admin authentication and dashboard API endpoints
• CRUD operations for products, options, and pricing rules

Separating the backend from the frontend means the configurator and admin dashboard can evolve independently. New admin features don't require frontend redeployment, and frontend UX improvements don't risk breaking the pricing engine.

Why React Three Fiber

For the AllStar Courts project, we used vanilla Three.js because the scene was procedurally generated and the UI was simple. For Leef, the calculus was different.

The door configurator has a complex, multi-step UI with interdependent state across seven wizard steps, a pricing engine, and a 3D scene. React's component model and state management handle this complexity naturally. React Three Fiber lets the 3D scene participate in that same state flow — when the user selects a new glass type, the React state update propagates to both the pricing component and the Three.js material, in a single render cycle.

The alternative — vanilla Three.js with a separate React UI — would have required a manual synchronisation layer between the 3D scene and the application state. React Three Fiber eliminates that entirely.

How It Fits the Business

The Showroom, Extended

Leef has two physical showrooms — Melbourne (by appointment) and Brisbane (walk-ins). The configurator doesn't replace them. It extends the showroom to every device, every time zone, and every stage of the buying journey.

A homeowner in Sydney can design their pivot door at midnight. An architect in Perth can spec a slider for a client presentation. A builder in regional Queensland can configure and price a door for a quote without driving to Brisbane. The configurator makes Leef's full product range accessible to anyone in Australia — not just those within driving distance of a showroom.

Pricing Transparency as a Selling Point

In an industry where "request a quote" is the norm and pricing is opaque, live pricing is a competitive advantage. Customers don't like waiting for a quote to find out if something is within budget. Leef's configurator answers the price question immediately — and in doing so, removes one of the biggest sources of friction in the custom door buying process.

This is especially powerful against the larger competitors. Stegbar, Corinthian, and Trend don't offer this level of pricing transparency online. Leef does. For price-conscious customers and time-pressed builders, that transparency is a reason to choose Leef over a bigger brand.

Competing as a Boutique Manufacturer

Leef is a small team competing against the Ventora Group — a conglomerate with 5,000+ employees and 41 manufacturing sites. They can't win on scale. But they can win on experience.

The configurator is that experience. It communicates design quality, technical sophistication, and customer-centricity in a way that a static brochure never could. When an architect is choosing between a Stegbar door and a Leef door, the one they've already designed in 3D has a significant psychological advantage.

Project Scope and Timeline

The project was delivered in approximately three months from kickoff to launch, falling within our Enterprise tier. The Enterprise scope was driven by the admin dashboard — product management, configurable pricing, option dependencies, and quote management are backend systems that go well beyond a standalone configurator.

The major engineering challenges included:

• Glass material rendering — achieving convincing real-time glass across multiple types (clear, reeded, frosted, tinted) with accurate transmission, roughness, and environmental reflections
• The pricing engine — building a flexible calculation system that handles base prices, dimensional scaling, option surcharges, and series-specific pricing rules — all configurable from the admin dashboard without code changes
• Option dependency management — ensuring that each wizard step correctly filters available options based on previous selections, and that this logic stays in sync between frontend validation and backend data
• Admin-to-configurator data flow — designing the API layer so that admin changes (new products, price updates, option additions) propagate to the customer-facing tool in real time

What Other Businesses Can Learn

Leef's configurator works because it solves three problems at once: visualisation, pricing, and product management. That combination is relevant to any manufacturer where:

• The product is made to order — there's nothing on a shelf to photograph or ship. Every unit is manufactured to the customer's specification
• Pricing is complex — based on dimensions, materials, options, and dependencies. Too complex for a simple price list, too important to hide behind "request a quote"
• The product range evolves — new series, new finishes, new hardware. The business needs to update the configurator without calling a developer every time
• The sales process is consultative — the configurator doesn't replace the conversation, but it makes every conversation start from a position of clarity

Windows, kitchens, wardrobes, cabinetry, modular buildings, architectural facades — any made-to-order product with complex pricing and visual customisation is a candidate for this approach. The same applies to B2B industrial products and D2C furniture brands — different audiences, same underlying problem.

The Bottom Line

Leef's 3D door configurator is more than a visualisation tool. It's a guided selling system — a 7-step wizard that walks customers from initial interest to a fully specified, accurately priced quote request. Combined with the admin dashboard, it gives a small manufacturing team the digital infrastructure to compete with brands ten times their size.

The configurator is live at designer.leefdoors.com.au. Walk through the wizard, configure a slimline pivot door, and see what a full-stack 3D configurator can do for a custom manufacturing business.