VirtualFit

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

1. 01

   Spatial garment arc

   Drag or scroll a glass card carousel of tops; each card shows garment crop, name, and price.

2. 02

   Try-on scan

   TRY ON runs a scan reveal that layers the selected garment onto the model stage.

3. 03

   Buy card controls

   Size chips (S–XL), color dots with rolling Color · label, and live name/price updates.

4. 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