Guided Studio Flow
7-step configurator from silhouette to color.
E-commerce
KnitUp — 3D Knitwear Configurator
Design your own sweater in 3D, then watch it spin. A guided 7-step studio that turns 'I don't know what I want' into 'add to cart' — with a real Three.js model that responds to every choice.
7
Configurator steps
3D
Live preview
1
Unified studio UX
Screenshots
Overview
A web-based knitwear design studio that does what a tailor's mood-board never could: render your sweater, in your color, with your stitch, in real-time 3D — before you commit a single taka. Built with the same tooling Apple uses for product configurators.
The Challenge
Custom apparel kills conversions. Buyers want bespoke, but spec forms ('select gauge: 3.5mm/4mm/5mm') feel like an exam. They abandon, brands lose the sale, and the whole 'make-to-order' promise dies in a dropdown menu. The fix isn't more options — it's letting people *see* what they're choosing.
The Solution
I built a guided studio with a persistent React Three Fiber canvas — silhouette, material, construction, 20 stitches, 54 colors, gauge, size — every choice updates the live 3D garment. GSAP page transitions, magnetic buttons, animated checkmarks. Shipped through 9 production phases (P0–P9) with full Playwright snapshot tests, working on mobile down to 360px.
Tech Stack
Frontend
ReactViteModern CSS
Visualization
3D preview modeSilhouette overview
Quality
Lighthouse CIPlaywright snapshot tests
Key Features
Live 3D Preview
Toggle into 3D mode to see the garment from all angles.
Stitch & Gauge Picker
Visual stitch library with applied-state previews.
Color Configurator
Real-time color application across the garment.
Size & Quantity
Final order config with quantity selection.
Mobile Studio
Optimized mobile-first flow for on-the-go configuration.
My Role
Lead Frontend Engineer
Designed and implemented the entire configurator UX, 3D preview integration, and mobile flow optimization.
Results & Impact
- Reduced cognitive load via step-by-step guided design
- 3D preview enables confident purchase decisions
- Mobile flow validated for on-the-go customization