Demo-Website einer erfundenen Geigenbauwerkstatt in Cremona. Jedes Instrument ist mit dem Spektrum seines Klangs zu hören, und im Hörraum spielen zwei Instrumente dieselbe Passage: Man wechselt zwischen ihnen, ohne die Musik anzuhalten. Dazu ein Stimmgerät im Browser, der Bau einer Geige zum Scrollen, ein privater Kundenbereich und eine Verwaltung zum Ausprobieren.
**Bottega Sonora** ist eine Geigenbauwerkstatt in Cremona, **die es nicht gibt**: Die Geigenbauerin Agnese Rovida, die Instrumente und die Fotos sind erfunden, und die Website sagt das oben auf jeder Seite. Die Aufnahmen dagegen sind echt, aus frei lizenzierten Archiven. Es ist eine Präsentations-Website mit vier Dingen, die so eine Website normalerweise nicht hat:
- **Jedes Instrument ist zu hören.** Der Player, gebaut auf der Web Audio API, zeichnet beim Abspielen das Spektrum und darunter den Klangabdruck: das mittlere Spektrum der Passage. Im Hörraum spielen zwei Instrumente dieselbe Passage, Ton für Ton und gleich laut, und mit A und B wechselt man zwischen ihnen, ohne die Musik anzuhalten. - **Ein Stimmgerät im Browser**, kostenlos, für Geige, Bratsche, Cello und Gitarre. Es bestimmt den Ton mit der McLeod-Methode und stimmt Streichinstrumente in reinen Quinten, wie nach Gehör. Der Klang des Mikrofons verlässt das Handy nie. - **Wie eine Geige entsteht**, zum Scrollen: zehn Szenen, eine Zeichnung, die Schritt für Schritt wächst, und Fotos der Arbeit, die sich wie Abzüge auf der Werkbank übereinanderlegen. In der letzten Szene erklingt die Geige auf einen Fingertipp. - **Ein privater Bereich für alle, die ein Instrument in Auftrag geben**: ein Link mit den Arbeitsschritten und Fotos, den die Geigenbauerin mit zwei Fingertipps abschaltet oder erneuert.
Die schwierigen Teile und ihre Lösung:
- **Der Klang.** Kein freies Archiv hat dasselbe Stück auf mehreren Instrumenten. Der Vergleich nutzt 19 kurze Passagen (leere Saiten, eine Tonleiter, Pizzicato) der University of Iowa und von TinySOL des Ircam, Ton für Ton auf einem festen Raster zusammengesetzt. - **Safari auf dem iPhone.** Das Mikrofon, das beim Sperren des Bildschirms stoppt, die verweigerte Berechtigung, die Seite in einer anderen App: Das Stimmgerät erkennt jeden Fall und sagt, was zu tun ist. - **Der Kundenlink.** Der Code steht hinter dem „#“: Er erscheint nie in einer Adresse, die den Server erreicht, also auch nie in den Logs. Die Datenbank speichert nur seinen Hash, und die Fotos der Arbeitsschritte öffnen sich über signierte Adressen, die ablaufen. - **Die Fotos**, 70 Stück, lokal mit Z-Image-Turbo generiert. Das Modell zeichnete auch halbfertige Arbeiten als fertige Geigen: Die Arbeitsschritte zeigen deshalb Holz und Werkzeug.
**Besucher können die Verwaltung ausprobieren**, ohne Konto. Ihre Änderungen bleiben in ihrem Browser, wo dieselbe Logik wie auf dem Server auf einer Kopie der Daten läuft; ein automatischer Test schickt dieselben 687 Anfragen, über alle 62 Routen, an Server und Testversion und verlangt gleiche Antworten. Die Verwaltung ist fürs Handy gemacht: Aufträge, Instrumente mit Fotos und Aufnahmen, Anfragen, Besuchsstatistik ohne Cookies.
Stack: Vue 3 und TypeScript, shadcn-vue und Tailwind CSS, GSAP und Lenis, Fastify und MongoDB, gemeinsame Zod-Schemas; jede Änderung durchläuft 323 automatische Tests und kommt über eine GitHub Action auf meinen Server.
Konzeption, Full-Stack-Entwicklung und Veröffentlichung · 2026
Vue.js, Fastify, MongoDB, Web Audio API, GSAP