Site de demonstração de uma oficina de luteria fictícia em Cremona. Cada instrumento ouve-se com o espetro do seu som, e na sala de audição dois instrumentos tocam o mesmo trecho: passa-se de um para o outro sem parar a música. E ainda um afinador no navegador, a construção de um violino ao deslizar a página, uma área privada para encomendas e um painel para experimentar.
**Bottega Sonora** é uma oficina de luteria de Cremona **que não existe**: a luthier, Agnese Rovida, os instrumentos e as fotografias são inventados, e o site di-lo no topo de cada página. As gravações, pelo contrário, são verdadeiras, de arquivos com licença livre. É um site de apresentação com quatro coisas que um site destes normalmente não tem:
- **Cada instrumento pode ser ouvido.** O leitor, feito sobre a Web Audio API, desenha o espetro enquanto toca e, por baixo, a assinatura: o espetro médio do trecho. Na sala de audição, dois instrumentos tocam o mesmo trecho, nota a nota e ao mesmo volume, e com A e B passa-se de um para o outro sem parar a música. - **Um afinador no navegador**, gratuito, para violino, violeta, violoncelo e guitarra. Encontra a nota com o método de McLeod e afina os instrumentos de arco por quintas justas, como se faz de ouvido. O som do microfone nunca sai do telemóvel. - **Como nasce um violino**, ao deslizar a página: dez cenas, um desenho que se completa etapa após etapa e as fotografias do trabalho que pousam umas sobre as outras, como provas sobre a bancada. Na última, com um toque, o violino faz-se ouvir. - **Uma área privada para quem encomenda um instrumento**: um link com as etapas e as fotografias, que a luthier desliga ou renova com dois toques.
As partes difíceis, e como foram resolvidas:
- **O som.** Nenhum arquivo livre tem a mesma peça tocada em vários instrumentos. A comparação usa 19 trechos curtos (cordas soltas, uma escala, pizzicato) da Universidade do Iowa e do TinySOL do Ircam, montados nota a nota numa grelha fixa. - **O Safari no iPhone.** O microfone que para quando o ecrã bloqueia, a permissão negada, a página aberta dentro de outra aplicação: o afinador reconhece cada caso e diz o que fazer. - **O link do cliente.** O código fica depois do «#»: nunca aparece num endereço que chegue ao servidor, por isso também nunca nos registos. A base de dados guarda apenas o seu hash, e as fotografias das etapas abrem com endereços assinados que expiram. - **As fotografias**, 70, geradas localmente com o Z-Image-Turbo. O modelo desenhava violinos acabados mesmo a meio do trabalho: as etapas mostram a madeira e as ferramentas.
**Quem visita pode experimentar o painel**, sem conta. As alterações ficam no seu navegador, onde corre a mesma lógica do servidor sobre uma cópia dos dados; um teste automático envia os mesmos 687 pedidos, em todas as 62 rotas, ao servidor e à experiência, e exige respostas iguais. O painel foi pensado para o telemóvel: encomendas, instrumentos com fotografias e gravações, pedidos, estatísticas de visitas sem cookies.
Stack: Vue 3 e TypeScript, shadcn-vue e Tailwind CSS, GSAP e Lenis, Fastify e MongoDB, esquemas Zod partilhados; cada alteração passa por 323 testes automáticos e chega ao meu servidor com uma GitHub Action.
Conceção, desenvolvimento full-stack e publicação · 2026
Vue.js, Fastify, MongoDB, Web Audio API, GSAP