Web de demostración de un taller de relojería ficticio en Milán. La portada es un movimiento mecánico en 3D, hecho con código: funciona de verdad, se desmonta pieza a pieza al hacer scroll, en el orden de un relojero, y al final se vuelve a montar. Los clientes siguen su reparación con el número del resguardo, y el panel del taller, pensado para el móvil, se prueba desde la web sin cuenta.
Scappamento es un taller de relojería **ficticio**: no existe en Milán, y tampoco existen la relojera Ottavia Brenna, sus clientes ni sus fotos. Es una web de demostración, hecha como las que construyo para negocios reales: web pública, panel de administración y publicación en mi servidor. Una franja arriba en cada página lo deja claro, y la web está fuera de Google.
**«Ingranaggi», el movimiento que se desmonta.** La portada se abre con la esfera, que marca la hora de quien la mira. Después el reloj se da la vuelta: el movimiento no es un vídeo sino un modelo 3D hecho con código y three.js, rueda a rueda, con relaciones de engranaje reales y el metal iluminado como en un estudio. El volante oscila tres veces por segundo, el áncora salta y la rueda de escape avanza medio diente cada vez. Al hacer scroll, el camino de la fuerza se enciende pieza a pieza, del barrilete al volante, y el tiempo se acelera o se ralentiza (a una décima, bajo una lupa) para ver moverse cada pieza. Luego se descarga el muelle real y el movimiento se desmonta en el orden del banco de un relojero, hasta una vista despiezada con el nombre de cada pieza; al final se vuelve a montar, arranca y regresa a la esfera, con el precio de una revisión.
Hubo tres retos:
- **una mecánica correcta**: cada pieza calcula su posición a partir del ángulo del volante, y los números (21.600 alternancias por hora, 17 rubíes, el sentido de giro de cada rueda) están cubiertos por tests; - **la ligereza**: el 3D solo se descarga en la portada, y si los fotogramas van lentos la animación pasa sola a la versión en SVG, de 74 KB comprimidos, que también se elige en el panel; - **la accesibilidad**: con el movimiento reducido, la animación se convierte en dos imágenes fijas con todas las leyendas, y un enlace permite saltarla.
**«¿Cómo va mi reloj?»** El cliente escribe el número del resguardo y las 4 últimas cifras de su teléfono, y ve el estado de la reparación, la fecha estimada y el presupuesto. Encima, el movimiento en el punto de la animación que le corresponde: desmontado en el banco, en marcha cuando está listo. El número solo no basta, los intentos están limitados por dirección y por resguardo, y la página nunca muestra nombres ni teléfonos. La relojera cambia el estado con un toque, y tiene ocho segundos para deshacerlo.
**El panel** está pensado para el móvil: cinco pestañas abajo, la recepción con un resguardo para imprimir, los clientes, la lista de precios, los textos de la web y estadísticas de visitas sin cookies. **Se prueba desde la web sin cuenta**: la lógica del servidor también funciona en el navegador, sobre una copia de los precios y los textos con clientes y reparaciones inventados, y los cambios se quedan en su navegador. El servidor no recibe nada que tenga que guardar; un test automático compara más de trescientas respuestas de las dos versiones.
Las fotos del taller y el retrato están generados en la GPU de mi ordenador con un modelo abierto, y la web lo indica.
Diseño, desarrollo full-stack y puesta en producción · 2026
Vue.js, Fastify, MongoDB, three.js, GSAP