Overview
VirtualFit is a single-file spatial try-on storefront by SonoJS. Built with plain HTML, CSS, and vanilla JavaScript - no framework. A blurred room backdrop holds a model stage while a glass garment carousel arcs across the bottom. Drag or scroll to browse tops (Basic T-shirt, Sweater, Linen Shirt, Grey Hoodie, Ringer Tee), tap TRY ON for a scan reveal, then set size (S–XL) and color on the buy card. Custom cursor modes (TRY ON / DRAG), category tabs, side rail, and prefers-reduced-motion support. Assets ship locally (Inter woff2 + WebP room/model/garment sprites). Demo UI only - no cart backend. Open virtualfit.html or host as static assets on Cloudflare Workers.
Highlights
- 01
Spatial garment arc
Drag or scroll a glass card carousel of tops; each card shows garment crop, name, and price.
- 02
Try-on scan
TRY ON runs a scan reveal that layers the selected garment onto the model stage.
- 03
Buy card controls
Size chips (S–XL), color dots with rolling Color · label, and live name/price updates.
- 04
Zero-build static
One HTML file plus local fonts and WebP sprites - open locally or deploy to Workers.
You get
- virtualfit.html (complete UI + interaction logic)
- virtualfit-assets/fonts/inter-latin.woff2
- virtualfit-assets/images (room, model, garment WebP sprites)
- Custom cursor, category tabs, side rail, buy card
- prefers-reduced-motion friendly motion paths
