Web Development
Calder Ferro Fitting Room - Virtual Try-On
← All projectsA one-page virtual fitting room for a fashion label. The colourways of one hoodie orbit the model on a glass arc, and a scan line redraws the outfit on the body each time you pick one. I am the model, face and body.
What the visitor can do
- Drag, flick, use the arrows or tap a card to turn the arc
- Watch the scan sweep from collar to hem and change the hoodie's colour
- Switch shade from the colour dots or the Colours section
- Find a size with the height and chest sliders, saved for the whole site
- Add to the bag, place a demo order, or book a studio fitting
How it was built
- The arc is plain maths on flat cards: no 3D model, no WebGL
- The try-on is a clip-path scan between two aligned pictures of the model
- Five model renders were generated from my character sheet, then aligned by the head so nothing jumps between outfits
- Every colourway is a free local re-dye of the fabric pixels with Python, not a new render
- One catalog file drives the arc, the tiles, the bag and the prices
- Bag, size and bookings stay in the browser: it is a demo, nothing is charged
- Every link scrolls to a real section, and everything is animated
Tech stack
- Next.js 16 static export, React 19, TypeScript
- GSAP ScrollTrigger and Lenis for smooth scroll and reveals
- Web Animations API for the scan, plain CSS for the glass
- Python, Pillow and NumPy for the colour variants
- OpenAI Image API for the model renders
- Netlify hosting