Site de démonstration d'un atelier de lutherie fictif à Crémone. Chaque instrument s'écoute avec le spectre du son, et dans la salle d'écoute deux instruments jouent le même passage : on passe de l'un à l'autre sans arrêter la musique. Aussi : un accordeur dans le navigateur, la fabrication d'un violon au fil du défilement, un espace client privé et un back-office à essayer.
**Bottega Sonora** est un atelier de lutherie de Crémone **qui n'existe pas** : la luthière, Agnese Rovida, les instruments et les photos sont inventés, et le site le dit en haut de chaque page. Les enregistrements, eux, sont vrais, issus d'archives sous licence libre. C'est un site vitrine avec quatre choses qu'un site vitrine n'a généralement pas :
- **Chaque instrument s'écoute.** Le lecteur, construit sur la Web Audio API, dessine le spectre pendant la lecture et, en dessous, l'empreinte : le spectre moyen du passage. Dans la salle d'écoute, deux instruments jouent le même passage, note à note et au même volume, et A et B font passer de l'un à l'autre sans arrêter la musique. - **Un accordeur dans le navigateur**, gratuit, pour violon, alto, violoncelle et guitare. Il trouve la note avec la méthode de McLeod et accorde les cordes frottées en quintes justes, comme à l'oreille. Le son du micro ne quitte jamais le téléphone. - **La fabrication d'un violon**, au fil du défilement : dix scènes, un dessin qui se complète étape après étape et les photos du travail qui se posent l'une sur l'autre, comme des tirages sur l'établi. À la dernière, d'un geste, on entend le violon. - **Un espace privé pour qui commande un instrument** : un lien avec les étapes et les photos, que la luthière désactive ou remplace en deux gestes.
Les parties difficiles, et comment elles ont été résolues :
- **Le son.** Aucune archive libre ne propose le même morceau joué sur plusieurs instruments. La comparaison utilise 19 courts passages (cordes à vide, une gamme, le pizzicato) de l'université de l'Iowa et de TinySOL de l'Ircam, assemblés note à note sur une grille fixe. - **Safari sur iPhone.** Le micro qui s'arrête quand l'écran se verrouille, l'autorisation refusée, la page ouverte dans une autre application : l'accordeur reconnaît chaque cas et dit quoi faire. - **Le lien du client.** Le code se trouve après le « # » : il n'apparaît jamais dans une adresse qui atteint le serveur, donc jamais dans les journaux. La base de données n'en garde que l'empreinte, et les photos des étapes s'ouvrent par des adresses signées qui expirent. - **Les photos**, 70, générées en local avec Z-Image-Turbo. Le modèle dessinait des violons finis même à mi-parcours : les étapes montrent le bois et les outils.
**Le visiteur peut essayer le back-office**, sans compte. Ses modifications restent dans son navigateur, où tourne la même logique que sur le serveur, sur une copie des données ; un test automatique envoie les mêmes 687 requêtes, sur les 62 routes, au serveur et à l'essai, et exige des réponses identiques. Le back-office est pensé pour le téléphone : commandes, instruments avec photos et enregistrements, demandes, statistiques de visites sans cookies.
Stack : Vue 3 et TypeScript, shadcn-vue et Tailwind CSS, GSAP et Lenis, Fastify et MongoDB, schémas Zod partagés ; chaque modification passe par 323 tests automatiques et arrive sur mon serveur par une GitHub Action.
Conception, développement full-stack et mise en ligne · 2026
Vue.js, Fastify, MongoDB, Web Audio API, GSAP