Sito dimostrativo di un laboratorio di orologeria inventato, a Milano. La home è un movimento meccanico in 3D, costruito dal codice: gira davvero, poi si smonta pezzo per pezzo mentre scorri, nell'ordine di un orologiaio, e alla fine si rimonta. I clienti seguono la riparazione con il numero della ricevuta, e il pannello del laboratorio, fatto per il telefono, si prova dal sito senza account.
Scappamento è un laboratorio di orologeria **inventato**: a Milano non esiste, e nemmeno l'orologiaia Ottavia Brenna, i suoi clienti o le sue foto. È un sito dimostrativo, costruito come quelli che faccio per le attività vere: sito pubblico, pannello per chi lo gestisce, pubblicazione sul mio server. Una striscia in cima a ogni pagina lo dice, e il sito resta fuori da Google.
**«Ingranaggi», il movimento che si smonta.** La home si apre sul quadrante, con l'ora di chi guarda. Poi l'orologio si gira: il movimento non è un video ma un modello 3D costruito dal codice con three.js, ruota per ruota, con rapporti veri e il metallo illuminato come in uno studio fotografico. Il bilanciere oscilla tre volte al secondo, l'àncora scatta, la ruota di scappamento avanza di mezzo dente alla volta. Scorrendo, la forza si accende pezzo per pezzo, dal bariletto al bilanciere, e il tempo accelera o rallenta (sotto una lente, a un decimo) perché ogni pezzo si veda muovere. Poi la molla si scarica e il movimento si smonta nell'ordine del banco di un orologiaio, fino all'esploso con il nome di ogni pezzo; in fondo si rimonta, riparte e torna al quadrante, con il prezzo della revisione.
Le difficoltà erano tre:
- **la meccanica giusta**: ogni pezzo ricava la sua posizione dall'angolo del bilanciere, e i conti (21.600 alternanze all'ora, 17 rubini, il verso di ogni ruota) sono coperti da test; - **la leggerezza**: il 3D si scarica solo nella home, e se i fotogrammi restano lenti il film passa da solo alla versione disegnata in SVG, da 74 KB compressi, che si può scegliere anche dal pannello; - **l'accessibilità**: con il movimento ridotto il film diventa due immagini ferme con tutte le didascalie, e un link permette di saltarlo.
**«A che punto è il mio orologio?»** Il cliente scrive il numero della ricevuta e le ultime 4 cifre del telefono, e vede lo stato della riparazione, la data stimata e il preventivo. Sopra lo stato, il movimento nel punto del film che gli somiglia: smontato mentre è al banco, in marcia quando è pronto. Il numero da solo non basta, i tentativi sono limitati per indirizzo e per ricevuta, e la pagina non mostra mai nomi o numeri di telefono. L'orologiaia cambia lo stato dal pannello con un tocco, e per otto secondi può tornare indietro.
**Il pannello** è fatto per il telefono: cinque voci in basso, l'accettazione con la ricevuta da stampare, clienti, listino, testi del sito, statistiche delle visite senza cookie. **Si prova dal sito senza account**: la logica del server gira anche nel browser, su una copia del listino e dei testi con clienti e riparazioni inventati, e le modifiche restano nel browser di chi prova. Il server non riceve niente da custodire; una prova automatica confronta più di trecento risposte delle due versioni.
Le foto della bottega e il ritratto sono generati sulla GPU del mio computer con un modello aperto, e il sito lo dichiara.
Progettazione, sviluppo full-stack e pubblicazione · 2026
Vue.js, Fastify, MongoDB, three.js, GSAP