SmartBuild Pitch & Interactive Demo
A gated, single-page recruitment pitch site with a clickable four-step product demo, built for SmartBuild — an Australian advanced-prefab software venture whose platform takes a builder's plan from intake to panelised structure, bill of materials, CNC file and priced quote. The site exists to recruit one thing: a founding RPEQ structural engineer partner.
Problem Solved
SmartBuild's MVP depends on a structural engineer deriving the AS 1684.2 (Region A/B) timber-framing rules from first principles — a clean-room legal requirement, since Australian Standards text cannot be reproduced in commercial software. Recruiting that engineer by email attachment or slide deck undersells a software product. The pitch site solves this by showing the product working: a plan becoming panels, a BOM and a quote in front of the engineer's eyes, plus an honest visualisation of the clean-room role they would play.
Because the audience is a handful of hand-selected engineering firms, the site is deliberately private: a soft passphrase gate, noindex on every route (metadata, robots.txt and X-Robots-Tag), and optional Vercel password protection on top.
Key Features
Passphrase Gate
A lightweight client-side gate stops casual link-forwarding without the friction of real auth. Unlock state persists in browser storage; the passphrase is configurable per deployment via environment variable.
Plan → Panels → Quote Demo
An animated sequence panelises a sample single-storey dwelling and produces a live bill of materials and an itemised quote — materials, fabrication, delivery, margin. All figures are synthetic and labelled illustrative.
3D Panel Inspector
A real-time Three.js viewport (React Three Fiber) renders a framed wall panel. Drag to rotate; click any stud to read its size, spacing, stress grade and the AS 1684.2 clause that governs it.
Clause-Traced Audit Trail
Every generated value — stud sizing, lintel, bracing demand — traces back to its clause citation and engineering basis, with explicit provenance metadata (engineering_basis, not licensed_table).
Engineer-Assist Tool
A mock-up of the clean-room "Tool Specification" surface the founding engineer would own: parameter axes, allowed values, and a six-step decision flow, with a dirty-team / clean-team diagram explaining the IP separation.
Compliance-Safe Content
No AS 1684 prose, table values or worked examples appear anywhere — clause references are citations only. This mirrors the clean-room constraint of the product itself: the standard is engineer reference material, never reproduced in software.
Architecture
Architecture Overview
A self-contained Next.js 15 App Router app, statically exported (next build → out/) and served from Vercel's edge — no server, no database, nothing to secure beyond the static files. The 3D panel scene is built with React Three Fiber and drei on top of Three.js, with panel geometry computed from typed sample-panel data (stud positions derived in metres from millimetre panel specs).
Section reveals and the panelisation animation use Motion. Demo state — current step, selected stud, selected trace value — is plain React state over a small typed domain library, each unit tested in isolation.
- Frontend: Next.js 15 App Router, React 19, Tailwind CSS 4, static export on Vercel
- 3D: Three.js via React Three Fiber + drei, geometry computed from typed panel specs
- Animation: Motion for section reveals and the panelisation sequence
- Domain: small typed library (demo-steps, panel-selection, sample-data, audit-trace, gate)
- Quality: Vitest + Testing Library per domain unit; Playwright covering the end-to-end gate-and-demo flow; Biome
- Privacy: passphrase gate, noindex metadata + robots.txt + X-Robots-Tag, optional Vercel password protection
Key Decisions
Static export over a server app
The site's only dynamic behaviour is client-side, so a static export gives zero attack surface, trivially cheap hosting and instant global delivery — while the soft gate plus noindex headers handle the privacy requirement proportionately.
A real 3D viewport instead of screenshots
Rendering an actual interactive panel in Three.js demonstrates the product's geometry pipeline credibility in a way mock images can't — the inspector is a genuine scaled-down version of the product's browser viewer concept.
Show the clean-room, don't just claim it
The fourth demo step visualises the dirty-team/clean-team IP separation (the same pattern as the IBM PC BIOS clean-room) so the engineer being recruited understands exactly what they would own — and why the role is a founding-partner seat rather than a consulting gig.
Screenshots
Interested in something similar?
We scope, design, and ship data and AI tools that solve the problems your team actually has.
Let's Talk