NOVA

The Question

The design challenge had two layers.

Brand layer. How do you establish trust and authority for a product category that most people have never encountered? The brand needed to feel modern and reliable, not experimental or niche.

Product layer.How do you let someone configure and understand a home they can't physically visit? A static website with renders isn't enough. The buyer needs to interact with the product, make choices, and see outcomes in real time.

Adjacent Landscape

Car configurators (Tesla, BMW, Porsche). Mature 3D customization but limited to surface-level options (color, wheels, interior). Homes require spatial configuration: wall types, layouts. But the interaction patterns (rotate, select, preview) were directly transferable.

Mobile home configurator websites. Static pages listing options with thumbnails and checkboxes. No 3D visualization, no spatial understanding. Users pick options from a list without seeing how they affect the home.

Architectural visualization(Matterport, virtual tours). Show what exists, not what could exist. No configuration capability. Users observe but can't make choices.

The gap: no existing tool combined real-time 3D spatial configuration with a consumer-facing purchase funnel for modular homes.

Brand & Artistic Direction

The visual identity comes from the product. Container homes are modular, geometric, and honest. The system mirrors that, then gets out of the way.

Real homes, in real light. The renders show homes in real environments under natural light: a container home settled into a forested hillside, life inside, not floating on a grey studio backdrop. Color comes from the world, not the UI. The base is a warm neutral and saturation is rationed: the architecture stays desaturated, the greens and sky carry the color.

One typeface, one accent.One face, Outfit, used big: large headings, everything else small and the same face. No second type, no mono. One reserved accent, an amber, for links, focus, and the configurator's selected state only; primary buttons stay ink. Restraint is the signature. If the UI ever competes with the renders, the UI loses.

Scroll is the medium. The marketing site is one continuous scroll-choreographed piece, built on GSAP ScrollTriggerGSAP is a JavaScript animation library; its ScrollTrigger plugin ties animation progress to the scroll position. and LenisA smooth-scroll library that eases the browser's native scrolling into a more controlled, fluid feel.. Every move is reversible and serves the content. Under reduced-motionAn operating-system accessibility setting where users request minimal animation; interfaces should honor it. it turns off entirely.

Two-pipeline production. The entire visual world was built from scratch in Blender, split into two parallel pipelines from a single source of truth:

Brand pipeline (rendering): a reusable render rig, not a one-off scene. The configurable model sits in a BotaniqA Blender asset library of ready-made, realistic plants and trees used to dress a scene. and PBRPhysically based rendering: materials are lit by simulating how real light behaves, for photorealistic results. environment (home on a hill beside a forest), with animated camera paths driving a small fixed set of arch vizArchitectural visualization: photorealistic 3D renders showing what a space or building will look like shots, exterior and interior, morning to dusk, with animated wind in the trees and grass. Any model drops into the same rig and renders through the same light and motion, so renders are repeatable, not rebuilt each time.

Production pipeline (configurator): separate Blender files, one per model, built specifically for Three.js export. Lightweight, structured for interactivity, stripped of the environmental complexity the brand renders carry.

Same geometry, two purposes: one for visual fidelity, one for real-time performance. Maintaining both doubled the file management, but a single set would have forced a choice between cheap-looking renders and slow-loading models.

Product Architecture & Technical Pipeline

Before any 3D work began, the container home had to be broken down into a configurable product system. A product mapA structured breakdown of what's fixed, what's variable, and what combinations are valid in a configurable product defined what's fixed, what's variable, and which combinations are valid. This was product-system design applied to physical architecture: every output the configurator can produce has to be a home you could actually build.

Every configurable wall carries all of its statesThe current combination of user-selected options that determines what the 3D model looks like. Switching a wall from solid to glass toggles which pre-built state is visible, rather than regenerating geometry. Color, cladding, and solar work the same way. That keeps the model exact and the interaction instant.

Production files export with Draco compressionA method for compressing 3D model files so they load faster in browsers without losing geometric detail for a light download. In the browser, Three.js renders at the highest fidelity that holds real-time interactivity. Orbit controlsA camera interaction pattern that lets users rotate around a 3D object by dragging let someone rotate the home, and selecting an option flies the camera to the part being changed.

Strategic user journey. 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 visitor lands on a brand-led introduction, browses the three models, enters the 3D configurator to customize, and reaches the decision point having already seen exactly what their home would look like and what it would cost.

Prototype to Production

NOVA shipped in two stages, each with a different job.

Proof of concept. The first build validated the riskiest idea cheaply: could a real-time configurator carry the product, and was the design direction right? The configurator was built in React Three FiberA React renderer for Three.js, so a 3D scene is built and updated as ordinary React components. and embedded into a Webflow site through an iframe, the two communicating over a handshake protocolA small messaging contract that lets the embedded configurator and the host page talk across the iframe boundary. It proved the technology and the direction without committing to a full production stack.

Production. With the concept proven, the whole site was rebuilt as the real product: Next.js 15, React 19, and TypeScript in strict mode, with the configurator native to the app rather than embedded. The design system was rebuilt from tokens up, the home rewritten as one scroll-choreographed piece, and the configurator given a clean architecture. This is the version that is live.

Engineering the Configurator

The configurator is built so the rules of the product never touch the framework.

A framework-free domain holds the truth. The catalog, the options, the pricing, and the rules about what is valid live in plain TypeScript, with no React and no Three.js. A configuration stores option ids, never scene values or 3D references, and every change returns a new configuration rather than mutating one. Around it sits a thin store that only orchestrates: apply a choice, recompute the price, move the camera focus.

Live pricing. Every option carries its own price delta, so the running total and the full breakdown recompute on each change. The price is derived from the configuration, never tracked by hand.

Every design has a URL. The full configuration serializesEncodes the full state as text in the address bar, so any design can be saved, shared, and rebuilt from the link. to the address bar, so any design is shareable and resumable from a link. Decoding is tolerant: a stale or hand-edited link falls back to sensible defaults instead of breaking.

The scene reads, never writes. A strategy patternA pattern where each variant of a behavior is its own interchangeable function, so adding a case means adding a function rather than editing shared logic drives the 3D: one small function per option category maps a choice onto the model. Adding a new category of option means adding a strategy, not editing a giant switch. The configuration drives the scene; the scene never writes back. The result is a tool where direct manipulation stays predictable, and the same config always produces the same home, the same price, and the same link.

Key Decisions

Wall-level configuration over room-level. Each model exposes three to four configurable sides, and each side swaps between solid, a window, or full glass. Room-level editing would have felt more intuitive, but wall-level kept the system honest: every combination it can produce is something you could actually build.

Three models as the starting scope. Solo Haven (one container), Duo Oasis (two side by side), and Skyline Loft (a two-story stack). Each ships with configurable walls, four exterior colors, two cladding finishes, and an optional solar array. More models would show more range, but three covered the most realistic builds, and the system was designed to expand by adding catalog entries, not by rewriting it.

Price in the open, design shareable. The price stays visible and itemized while configuring, and every design lives in its URL. Both decisions serve the same goal: let someone understand the tradeoffs and walk away with their exact design in hand, before anyone asks them for anything.

What Was Learned

On artistic direction and world-building.The exercise was going from a one-line brief (container homes) to a coherent visual world built from scratch. That world wasn't decoration. It was the trust mechanism that made the product feel real before the configurator proved it was functional.

On functional 3D vs. experimental 3D. NOVA used Three.js as a product tool, not a flourish: a choice produces a real, buildable, priced outcome. That distinction, 3D as utility rather than ornament, transfers to any product where someone has to visualize a complex outcome before committing.

On the limits of web-based 3D.Every step traded visual fidelity against performance. Draco compression cut model size but needed careful testing for geometry integrity. Real-time material and state swapping worked, but only with disciplined scene management and a strict boundary between the product's rules and the rendering.

On proving before building. Shipping a Webflow-embedded prototype first meant the expensive production rebuild started from a validated idea, not a hope. The throwaway build paid for itself by de-risking the real one.

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.

Tech stack: Blender (modeling, environment, rendering), React Three Fiber / Three.js (real-time configurator), Draco (compression), Next.js 15 / React 19 / TypeScript (production site and app), Zustand (state), GSAP and Lenis (motion). Webflow served the proof-of-concept stage only.