NOVA

3D Modular Home Configurator
Self-initiated concept · 2024 · Designer & developer · Blender, Three.js, Next.js

3D as a product tool: every choice is a real, priced home.

The question: How do you make an unfamiliar product trustworthy, and let someone shape one before committing?
What I did: Designed the brand and its visual world, then designed and built the configurator, from Blender to a Next.js app.
What it shows: 3D as utility rather than ornament, with the product's rules kept apart from the rendering. A self-initiated concept, not a shipped business.

See it live

nova.postminimal.agency

The live configurator. Drag to orbit; every choice updates the model and the price in real time.

NOVA is a modular, sustainable housing brand built from shipping-container homes, and the configurator that lets someone design one. Most Three.jsA JavaScript library for rendering real-time 3D graphics in the browser through WebGL. on the web is decoration. Here it is the product tool: a choice produces a real, buildable home you can see, price and share.

Nobody could shape a home before buying it.

The product was unfamiliar, so the work had two jobs: build enough trust to take a container home seriously, and let someone configure one they can't visit. The tools nearby each solve part of it:

Nearby tool	What it does	What it misses
Car configurators	Real-time 3D: rotate, select, preview	Surface options only; a home needs spatial choices
Mobile home websites	Option lists with thumbnails	No 3D, no sense of the space
Architectural tours	Show what already exists	Nothing to configure
NOVA	Real-time 3D configuration inside a purchase funnel	Configures walls, not rooms, so every result can be built

What existed nearby, and the gap NOVA fills: real-time spatial configuration, with a price.

Real homes in real light carry the trust.

The renders show homes settled into real places, a forested hillside, life inside, never a grey studio. Colour comes from the world, not the UI: a warm neutral base, desaturated architecture, and one amber accent kept for links, focus and the selected state. One typeface, Outfit, used big. If the interface ever competes with the renders, the interface loses.

Brand pipeline. Photoreal homes in real light, graded to one world, morning to dusk.

The design system. One typeface (Outfit), a warm-neutral base, and a single reserved amber accent.

One model, two pipelines.

The whole world was built from scratch in Blender and split in two from one source of truth: a render rig for the brand, and light, structured files for the browser. Keeping both doubled the file management, but a single set would have forced a choice between cheap-looking renders and slow-loading models.

BrandFor visual fidelity

Source geometry
A reusable render rig
Real plants, physically based light
Animated camera paths
Shots, morning to dusk

ProductionFor real time

Source geometry
One file per model
Stripped for interactivity
Draco compression
The Three.js configurator

Same geometry, two purposes: one for visual fidelity, one for real-time performance.

Inside the brand-render rig in Blender. The configurable model, a Botaniq and PBR environment, and the animated camera paths that drive every shot, so one rig renders the whole range.

Every combination is a home you could build.

Before any 3D, the home was broken into a product map: what's fixed, what varies, which combinations are valid. Configuration happens at the wall, not the room. That's less intuitive, but every result can be built. Each wall carries all its states, so switching from solid to glass toggles which one shows instead of rebuilding geometry: the model stays exact and the interaction instant.

Option	Choices	Price
Model	Solo Haven (one container), Duo Oasis (two side by side), Skyline Loft (two stacked)	$50,000 · $70,000 · $100,000
Walls	Three or four configurable sides, each solid, a window, or full glass	Window +$1,500 · Glass +$3,500
Cladding	Metallic or redwood	Redwood +$4,000
Solar	None, or an array	+$9,500
Colour	Four exteriors	Free

The product map, from the live catalog. Prices are illustrative.

The site is a conversion funnelA path designed to move a visitor step by step toward one goal, here a purchase decision., not a brochure: a brand-led landing, the three models, then the configurator, so someone reaches the decision having already seen their home and its price.

The journey in, on the live site. The brand-led landing and the model lineup that lead into the configurator.

The rules never touch the framework.

The catalog, the options, the pricing and the validity rules live in plain TypeScript, with no React and no Three.js. A configuration stores option ids, never scene values, and every change returns a new one. The price is derived, never tracked by hand, and the whole design serializesEncodes the full state as text in the address bar, so any design can be saved, shared, and rebuilt from the link. to the URL, decoded tolerantly so a stale link falls back to defaults instead of breaking. The scene only reads: one small function per option category maps a choice onto the model.

Model

Walls

Front wall

Rear wall

Side wall

Cladding and solar

Colour, free

Solo Haven$50,000

Front wall: Full glass+$3,500

Side wall: Window+$1,500

Solar array+$9,500

Total$64,500

This design, as a link

nova.postminimal.agency/configure/solo-haven?color=space-black&siding=metallic&solar=solar-3x&walls=side-1%3Aglass%3Bside-4%3Asolid%3Bside-6%3Awindow

Open it in the live configurator ↗

The configurator's rules without the 3D: the same catalog, pricing and link. Change anything; the price and the link follow.

export function priceConfiguration(config: Configuration): PriceBreakdown {
  const model = getModel(config.modelId);
  const lines: PriceLine[] = [];

  const siding = sidingById(config.selections.siding);
  if (siding && siding.priceDelta > 0) {
    lines.push({ label: `${siding.label} cladding`, amount: siding.priceDelta, kind: "option" });
  }

  for (const side of model.configurableSides) {
    const wall = wallById(config.selections.walls[side.id]);
    if (wall && wall.priceDelta > 0) {
      lines.push({ label: `${side.label}: ${wall.label}`, amount: wall.priceDelta, kind: "option" });
    }
  }

  // Colour is free, so it never produces a line.
  const total = model.basePrice + lines.reduce((sum, line) => sum + line.amount, 0);
  return { base: model.basePrice, lines, total };
}

The price, derived from the configuration: the base, plus a line for every option that costs something.

Every configuration serializes to the URL. The price recomputes on each change, and the link rebuilds the exact design.

Prove it cheaply, then build it right.

The first build tested the riskiest idea cheaply: a React Three Fiber configurator embedded in a Webflow site through an iframe, the two talking over a small handshake protocolA small messaging contract that lets the embedded configurator and the host page talk across the iframe boundary. With the idea proven, the site was rebuilt as the real product: Next.js 15, React 19 and strict TypeScript, the configurator native to the app, the design system rebuilt from tokens up. The throwaway build paid for itself by de-risking the real one.

The proof of concept in action. The Webflow-embedded configurator running, the test that the real-time 3D approach worked before the production build.

An honest note.

NOVA is a concept, not a shipped business. The prices and sustainability figures are illustrative, and the direction hasn't been tested with real buyers; that validation is the next step, not a footnote. A few of the brand renders are still being refined to match the system around them.

Blender (modeling, environment, rendering), React Three Fiber and Three.js (the configurator), Draco (compression), Next.js 15, React 19 and TypeScript (site and app), Zustand (state), GSAP and Lenis (motion). Webflow served the proof of concept only.