KHK
A live 3D garment customizer for a Nigerian clothing brand
The Idea
Give a clothing brand's customers a genuine 'build your own garment' experience — not a size dropdown, but something they can actually see take shape.
The Problem
Custom and made-to-order clothing sites usually reduce customization to a handful of dropdowns with zero visual feedback. Customers commit to an order without ever seeing what they're actually getting.
The Solution
I built a Custom Top Builder: a real-time 3D preview (garment mesh + print-plane rendering) driven by composable options — neck type, sleeve, fabric, color, print placement — with generated SVG path geometry, a live price breakdown that updates as choices change, and a shareable design link. It sits inside a full storefront: catalog, cart, checkout, auth, and an admin mode.
My Role
Solo — built the customizer's geometry engine (SVG path generation, the 3D garment mesh, pricing rules, and product-matching logic that maps a custom design back to the nearest catalog product), plus the storefront shell around it.
Challenges
Generating correct SVG garment paths from a small set of user choices (neckline × sleeve × fit) without hand-drawing every combination, and keeping the 3D preview, the 2D illustration, and the price calculation all in sync off one shared option state.
Status
In Progress — Phase 1 of a planned 5-phase build. The customizer, catalog, and checkout flow work end-to-end on demo data; real payment (Paystack/Flutterwave) and production database wiring are the next phase.
Key Features
- Real-time 3D garment customizer — neckline, sleeve, color, and print, rendered live via Three.js
- Generated SVG garment illustrations from the same path geometry, for fast previews
- Live price breakdown that recalculates as options change
- Shareable links so a customer's exact design can be sent or revisited
- Full storefront on mock data/localStorage — browsing, customizing, signing in, and checking out all work without a live backend
Technology