Demo-Website einer erfundenen Uhrmacherwerkstatt in Mailand. Die Startseite ist ein mechanisches Uhrwerk in 3D, im Code gebaut: Es läuft tatsächlich, zerlegt sich beim Scrollen Teil für Teil in der Reihenfolge eines Uhrmachers und setzt sich am Ende wieder zusammen. Kunden verfolgen ihre Reparatur über die Belegnummer, und den Verwaltungsbereich fürs Handy kann man ohne Konto ausprobieren.
Scappamento ist eine **erfundene** Uhrmacherwerkstatt: Es gibt sie in Mailand nicht, genauso wenig wie die Uhrmacherin Ottavia Brenna, ihre Kunden oder ihre Fotos. Es ist eine Demo-Website, gebaut wie meine Websites für echte Betriebe: öffentliche Seite, Verwaltungsbereich und Betrieb auf meinem Server. Ein Streifen auf jeder Seite sagt es, und Suchmaschinen bleiben draußen.
**„Ingranaggi“, das Uhrwerk, das sich zerlegt.** Die Startseite zeigt zuerst das Zifferblatt mit der Uhrzeit des Besuchers. Dann dreht sich die Uhr um: Das Uhrwerk ist kein Video, sondern ein 3D-Modell aus Code mit three.js, Rad für Rad, mit echten Übersetzungen und Metall im Licht eines Fotostudios. Die Unruh schwingt dreimal pro Sekunde, der Anker schlägt um, das Ankerrad rückt jeweils einen halben Zahn vor. Beim Scrollen leuchtet der Weg der Kraft Teil für Teil auf, vom Federhaus bis zur Unruh, und die Zeit läuft schneller oder langsamer (unter einer Lupe auf ein Zehntel), damit man jedes Teil laufen sieht. Dann wird die Zugfeder entspannt und das Werk in der Reihenfolge der Werkbank zerlegt, bis zur Explosionszeichnung mit dem Namen jedes Teils; am Ende setzt es sich wieder zusammen, läuft an und kehrt zum Zifferblatt zurück, mit dem Preis einer Revision.
Drei Dinge waren knifflig:
- **die richtige Mechanik**: Jedes Teil berechnet seine Lage aus dem Winkel der Unruh, und die Zahlen (21.600 Halbschwingungen pro Stunde, 17 Steine, die Drehrichtung jedes Rades) sind durch Tests abgesichert; - **wenig Gewicht**: Das 3D lädt nur auf der Startseite, und bleiben die Bilder langsam, wechselt die Animation von selbst zur SVG-Zeichnung mit 74 KB, die man auch im Verwaltungsbereich wählt; - **Barrierefreiheit**: Bei reduzierter Bewegung werden daraus zwei stehende Bilder mit allen Beschriftungen, und ein Link führt an der Animation vorbei.
**„Wie weit ist meine Uhr?“** Kunden geben die Belegnummer und die letzten 4 Ziffern ihrer Telefonnummer ein und sehen den Stand der Reparatur, das Datum und den Kostenvoranschlag. Darüber das Uhrwerk an der passenden Stelle der Animation: zerlegt auf der Werkbank, laufend, wenn es fertig ist. Die Nummer allein reicht nicht, Versuche sind pro Adresse und Beleg begrenzt, und die Seite zeigt nie Namen oder Telefonnummern. Die Uhrmacherin ändert den Status mit einem Tippen und kann ihn acht Sekunden lang rückgängig machen.
**Der Verwaltungsbereich** ist fürs Handy gemacht: fünf Reiter unten, die Annahme mit einem Beleg zum Ausdrucken, Kunden, Preisliste, Website-Texte und Besucherstatistiken ohne Cookies. **Man probiert ihn ohne Konto aus**: Die Serverlogik läuft auch im Browser, auf einer Kopie von Preisliste und Texten mit erfundenen Kunden und Reparaturen; Änderungen bleiben dort. Der Server bekommt nichts zum Aufbewahren; ein automatischer Test vergleicht über dreihundert Antworten beider Versionen.
Die Fotos der Werkstatt und das Porträt sind auf der GPU meines Rechners mit einem offenen Modell erzeugt, und die Website sagt es.
Konzeption, Full-Stack-Entwicklung und Deployment · 2026
Vue.js, Fastify, MongoDB, three.js, GSAP