Demo website for a fictional watch repair workshop in Milan. The home page is a mechanical movement built in 3D by code: it actually runs, then comes apart piece by piece as you scroll, in a watchmaker's order, and finally goes back together. Customers follow their repair with the receipt number, and the workshop's phone-first admin panel can be tried from the site without an account.
Scappamento is a **fictional** watch repair workshop: it doesn't exist in Milan, and neither do Ottavia Brenna, the watchmaker, her customers or her photos. It's a demo site, built like the sites I make for real businesses: a public site, an admin panel and deployment on my own server. A strip at the top of every page says so, and the site stays out of Google.
**"Ingranaggi", the movement that comes apart.** The home page opens on the dial, showing the visitor's own time. Then the watch turns over: the movement isn't a video but a 3D model built by code with three.js, wheel by wheel, with real gear ratios and the metal lit as in a photo studio. The balance swings three times a second, the pallet fork snaps across, the escape wheel advances half a tooth at a time. As you scroll, the path of the power lights up part by part, from the barrel to the balance, and time speeds up or slows down (to a tenth, under a magnifying lens) so you can watch each part move. Then the mainspring is let down and the movement is taken apart in the order a watchmaker follows at the bench, down to an exploded view naming every part; at the end it goes back together, starts again and returns to the dial, with the price of a full service.
There were three hard parts:
- **getting the mechanics right**: every part derives its position from the angle of the balance, and the numbers (21,600 vibrations per hour, 17 jewels, the direction of every wheel) are covered by tests; - **keeping it light**: the 3D only downloads on the home page, and if frames stay slow the film switches by itself to the version drawn in SVG, 74 KB compressed, which the admin panel can also choose; - **accessibility**: with reduced motion, the film becomes two still images with all the captions, and a link lets you skip it.
**"Where's my watch?"** Customers enter the receipt number and the last 4 digits of their phone number, and see the repair status, the estimated date and the quote. Above the status, the movement at the point of the film that matches it: apart while it's on the bench, running when it's ready. The number alone isn't enough, attempts are rate-limited per address and per receipt, and the page never shows names or phone numbers. The watchmaker changes the status from the panel with one tap, with eight seconds to undo it.
**The admin panel** is designed for a phone: five tabs at the bottom, intake with a printable receipt, customers, the price list, the site's texts and cookie-free visitor statistics. **You can try it from the site without an account**: the server's logic also runs in the browser, on a copy of the price list and texts with made-up customers and repairs, and changes stay in the visitor's browser. The server never receives anything it would have to keep; an automated test compares more than three hundred responses from the two versions.
The photos of the workshop and the portrait are generated on my own computer's GPU with an open model, and the site says so.
Design, full-stack development and deployment · 2026
Vue.js, Fastify, MongoDB, three.js, GSAP