Grillz Queen Configurator
A live 3D grillz builder — pick teeth, gold, and diamonds, watch the price and the model update in real time.
Grillz Queen sells custom gold grillz, and the old sales flow was a back-and-forth of screenshots and DMs to describe what a customer wanted. This configurator replaces that: an interactive SVG tooth chart lets a customer select any combination of teeth, assign a gold karat per contiguous group, add diamond styles, and see an itemized price update live — all reflected in a persistent, always-visible 3D preview that updates as they hover and select, before they ever talk to anyone. No account, no backend database; the whole session lives in client-side state until they're ready to book a consult.
The brief
A no-login, no-database configurator a customer can use unattended: build a custom grillz spec, see a real-time price, and hand off to a booking flow — without needing staff to manually quote every combination.
The approach
Everything lives in one useReducer state tree. Teeth are grouped into contiguous runs so a customer picks a gold type per group rather than per tooth, which matches how grillz are actually fabricated. Pricing recalculates live off gold karat, per-tooth weight tables, and diamond add-on selections. Live spot gold prices are pulled from goldapi.io server-side, keeping quotes accurate without manual price updates.
The 3D layer
Rather than a "View in 3D" button gating the model behind a click, the 3D panel (react-three-fiber) is persistent and always visible, live-updating as selections change — hovering an unselected tooth shows a ghost preview in both the 2D chart and the 3D model before the customer commits to it. Base geometry is a Higgsfield-generated GLB mold with procedural gold caps layered per selected tooth/group.
The admin side
The public configurator is only half the build — there's a parallel internal tool at /admin (unlisted rather than authenticated) that exists to keep quotes accurate as the gold market moves, sharing its state model with the customer chart rather than duplicating it. Configurator mode mirrors the exact customer chart, but the side panel shows real cost (using live spot rates) instead of price, so staff can sanity-check a build against margin. Quick Calc is a stripped-down version for the common case — a tooth count and a karat, no chart interaction needed — for a fast rough quote. Settings is the source of truth both modes read from: editable purchase price per karat (pre-filled from the live spot feed, overridable), a weight-in-grams table per tooth position, selling price tables, and diamond add-on prices, all persisted to localStorage. A currency toggle (AUD/USD) applies across all three modes. In short: the customer tool answers what this costs the customer, the admin tool answers what it costs us right now — same underlying data model, two audiences.
