Web de demostración de un taller de lutería ficticio en Cremona. Cada instrumento se escucha con el espectro de su sonido, y en la sala de escucha dos instrumentos tocan el mismo pasaje: se cambia de uno a otro sin detener la música. Además, un afinador en el navegador, la construcción de un violín con el scroll, un área privada para los encargos y un panel para probar.
**Bottega Sonora** es un taller de lutería de Cremona **que no existe**: la luthier, Agnese Rovida, los instrumentos y las fotos son inventados, y la web lo dice en la parte superior de cada página. Las grabaciones, en cambio, son reales, de archivos con licencia libre. Es una web de presentación con cuatro cosas que una web así no suele tener:
- **Cada instrumento se puede escuchar.** El reproductor, hecho con la Web Audio API, dibuja el espectro mientras suena y, debajo, la huella: el espectro medio del pasaje. En la sala de escucha dos instrumentos tocan el mismo pasaje, nota a nota y al mismo volumen, y con A y B se cambia de uno a otro sin detener la música. - **Un afinador en el navegador**, gratuito, para violín, viola, violonchelo y guitarra. Encuentra la nota con el método de McLeod y afina los instrumentos de arco por quintas justas, como se hace de oído. El sonido del micrófono nunca sale del teléfono. - **Cómo nace un violín**, con el scroll: diez escenas, un dibujo que se completa etapa tras etapa y las fotos del trabajo que se posan una sobre otra, como copias sobre el banco de trabajo. En la última, con un toque, el violín se hace oír. - **Un área privada para quien encarga un instrumento**: un enlace con las etapas y las fotos, que la luthier apaga o renueva con dos toques.
Las partes difíciles, y cómo se resolvieron:
- **El sonido.** Ningún archivo libre tiene la misma pieza tocada en varios instrumentos. La comparación usa 19 pasajes cortos (cuerdas al aire, una escala, pizzicato) de la Universidad de Iowa y de TinySOL del Ircam, montados nota a nota sobre una cuadrícula fija. - **Safari en el iPhone.** El micrófono que se detiene al bloquear la pantalla, el permiso denegado, la página abierta dentro de otra app: el afinador reconoce cada caso y dice qué hacer. - **El enlace del cliente.** El código va después del «#»: nunca aparece en una dirección que llegue al servidor, así que tampoco en los registros. La base de datos solo guarda su huella, y las fotos de las etapas se abren con direcciones firmadas que caducan. - **Las fotos**, 70, generadas en local con Z-Image-Turbo. El modelo dibujaba violines terminados incluso a mitad del trabajo: las etapas muestran la madera y las herramientas.
**Quien visita puede probar el panel**, sin cuenta. Sus cambios se quedan en su navegador, donde corre la misma lógica del servidor sobre una copia de los datos; una prueba automática envía las mismas 687 peticiones, en las 62 rutas, al servidor y a la prueba, y exige respuestas iguales. El panel está pensado para el móvil: encargos, instrumentos con fotos y grabaciones, solicitudes, estadísticas de visitas sin cookies.
Stack: Vue 3 y TypeScript, shadcn-vue y Tailwind CSS, GSAP y Lenis, Fastify y MongoDB, esquemas Zod compartidos; cada cambio pasa por 323 pruebas automáticas y llega a mi servidor con una GitHub Action.
Diseño, desarrollo full-stack y publicación · 2026
Vue.js, Fastify, MongoDB, Web Audio API, GSAP