Sito dimostrativo di una liuteria inventata a Cremona. Ogni strumento si ascolta con lo spettro del suono, e nella sala d'ascolto due strumenti suonano lo stesso passaggio: si passa dall'uno all'altro senza fermare la musica. Poi un accordatore nel browser, la costruzione di un violino allo scorrimento, un'area privata per chi commissiona e un pannello da provare.
**Bottega Sonora** è una liuteria di Cremona **che non esiste**: la liutaia, Agnese Rovida, gli strumenti e le foto sono inventati, e il sito lo dice in cima a ogni pagina. Le registrazioni invece sono vere, da archivi con licenza libera. È un sito vetrina con quattro cose che un sito vetrina di solito non ha:
- **Ogni strumento si ascolta.** Il lettore, sulla Web Audio API, disegna lo spettro mentre suona e, sotto, l'impronta: lo spettro medio del passaggio. Nella sala d'ascolto due strumenti suonano lo stesso passaggio, nota per nota e allo stesso volume, e con A e B si passa dall'uno all'altro senza fermare la musica. - **Un accordatore nel browser**, gratuito, per violino, viola, violoncello e chitarra. Trova la nota con il metodo di McLeod e accorda gli archi per quinte giuste, come si fa a orecchio. Il suono del microfono non lascia il telefono. - **Come nasce un violino**, allo scorrimento: dieci scene, un disegno che si completa tappa dopo tappa e le foto del lavoro che si posano una sull'altra, come stampe sul banco. All'ultima, con un tocco, il violino si fa sentire. - **Un'area privata per chi commissiona uno strumento**: un link con le tappe e le foto, che la liutaia spegne o rifà con due tocchi.
Le parti difficili, e come sono risolte:
- **Il suono.** Nessun archivio libero ha lo stesso brano suonato su più strumenti. Il confronto usa 19 passaggi brevi (corde a vuoto, una scala, il pizzicato) della University of Iowa e di TinySOL dell'Ircam, montati nota per nota su una griglia fissa. - **Safari su iPhone.** Il microfono che si ferma quando lo schermo si blocca, il permesso negato, la pagina aperta dentro un'altra app: l'accordatore riconosce ogni caso e dice che cosa fare. - **Il link del cliente.** Il codice sta dopo il «#»: non compare mai in un indirizzo che arriva al server, quindi nemmeno nei registri. Nel database ne resta solo l'impronta, e le foto delle tappe si aprono con indirizzi firmati che scadono. - **Le foto**, 70, generate in locale con Z-Image-Turbo. Il modello disegnava violini finiti anche a metà lavoro: le tappe mostrano il legno e gli attrezzi.
**Chi guarda può provare il pannello**, senza account. Le modifiche restano nel suo browser, dove gira la stessa logica del server su una copia dei dati; una prova automatica manda le stesse 687 richieste, su tutte le 62 rotte, al server e alla prova, e vuole risposte uguali. Il pannello è pensato per il telefono: commissioni, strumenti con foto e registrazioni, richieste, statistiche delle visite senza cookie.
Stack: Vue 3 e TypeScript, shadcn-vue e Tailwind CSS, GSAP e Lenis, Fastify e MongoDB, schemi Zod condivisi; ogni modifica passa da 323 prove automatiche e arriva sul mio server con una GitHub Action.
Progettazione, sviluppo full-stack e pubblicazione · 2026
Vue.js, Fastify, MongoDB, Web Audio API, GSAP