Site de démonstration d'un atelier d'horlogerie fictif, à Milan. La page d'accueil est un mouvement mécanique en 3D, construit par le code : il tourne vraiment, puis se démonte pièce par pièce en défilant, dans l'ordre d'un horloger, et se remonte à la fin. Les clients suivent leur réparation avec le numéro du reçu, et le panneau, pensé pour le téléphone, s'essaie sans compte depuis le site.
Scappamento est un atelier d'horlogerie **fictif** : il n'existe pas à Milan, pas plus que l'horlogère Ottavia Brenna, ses clients ou ses photos. C'est un site de démonstration, construit comme ceux que je fais pour de vraies entreprises : un site public, un panneau d'administration, une mise en ligne sur mon serveur. Un bandeau en haut de chaque page le rappelle, et le site reste hors de Google.
**« Ingranaggi », le mouvement qui se démonte.** La page d'accueil s'ouvre sur le cadran, à l'heure du visiteur. Puis la montre se retourne : le mouvement n'est pas une vidéo mais un modèle 3D construit par le code avec three.js, roue après roue, avec de vrais rapports d'engrenage et le métal éclairé comme en studio. Le balancier oscille trois fois par seconde, l'ancre bascule, la roue d'échappement avance d'une demi-dent à la fois. Au fil du défilement, le chemin de l'énergie s'allume pièce par pièce, du barillet au balancier, et le temps accélère ou ralentit (au dixième, sous une loupe) pour voir bouger chaque pièce. Puis le ressort est désarmé et le mouvement se démonte dans l'ordre de l'établi, jusqu'à la vue éclatée qui nomme chaque pièce ; à la fin il se remonte, repart et revient au cadran, avec le prix d'une révision.
Trois difficultés :
- **une mécanique juste** : chaque pièce calcule sa position à partir de l'angle du balancier, et les chiffres (21 600 alternances par heure, 17 rubis, le sens de chaque roue) sont vérifiés par des tests ; - **la légèreté** : la 3D ne se charge que sur l'accueil, et si les images restent lentes le film passe seul à la version dessinée en SVG, 74 Ko compressés, que le panneau peut aussi choisir ; - **l'accessibilité** : quand les animations sont réduites, le film devient deux images fixes avec toutes les légendes, et un lien permet de le passer.
**« Où en est ma montre ? »** Le client saisit le numéro de son reçu et les 4 derniers chiffres de son téléphone, et voit l'état de la réparation, la date prévue et le devis. Au-dessus, le mouvement au point du film qui lui ressemble : démonté sur l'établi, en marche quand il est prêt. Le numéro seul ne suffit pas, les tentatives sont limitées par adresse et par reçu, et la page n'affiche jamais ni nom ni téléphone. L'horlogère change le statut d'un geste, et a huit secondes pour revenir en arrière.
**Le panneau** est pensé pour le téléphone : cinq onglets en bas, la prise en charge avec un reçu à imprimer, les clients, les tarifs, les textes du site, des statistiques de visites sans cookies. **On l'essaie depuis le site, sans compte** : la logique du serveur tourne aussi dans le navigateur, sur une copie des tarifs et des textes avec des clients et des réparations inventés, et les modifications restent dans son navigateur. Le serveur ne reçoit rien à conserver ; un test automatique compare plus de trois cents réponses des deux versions.
Les photos de l'atelier et le portrait sont générés sur le GPU de mon ordinateur avec un modèle ouvert, et le site l'indique.
Conception, développement full-stack et mise en ligne · 2026
Vue.js, Fastify, MongoDB, three.js, GSAP