Site de demonstração de uma oficina de relojoaria fictícia, em Milão. A página inicial é um movimento mecânico em 3D, feito em código: funciona mesmo, desmonta-se peça a peça à medida que se desliza a página, pela ordem de um relojoeiro, e no fim volta a montar-se. Os clientes acompanham a reparação com o número do talão, e o painel, pensado para o telemóvel, experimenta-se no site sem conta.
A Scappamento é uma oficina de relojoaria **fictícia**: não existe em Milão, tal como não existem a relojoeira Ottavia Brenna, os seus clientes ou as suas fotografias. É um site de demonstração, feito como os sites que construo para negócios reais: site público, painel de administração e publicação no meu servidor. Uma faixa no topo de cada página diz isso mesmo, e o site fica fora do Google.
**«Ingranaggi», o movimento que se desmonta.** A página inicial abre com o mostrador, com a hora de quem o vê. Depois o relógio vira-se: o movimento não é um vídeo mas um modelo 3D construído pelo código com three.js, roda a roda, com relações de engrenagem reais e o metal iluminado como num estúdio. O balanço oscila três vezes por segundo, a âncora salta e a roda de escape avança meio dente de cada vez. À medida que se desliza a página, o caminho da força acende-se peça a peça, do tambor ao balanço, e o tempo acelera ou abranda (para um décimo, debaixo de uma lupa) para se ver cada peça a mexer. Depois a mola real é descarregada e o movimento desmonta-se pela ordem da bancada de um relojoeiro, até uma vista explodida com o nome de cada peça; no fim volta a montar-se, arranca e regressa ao mostrador, com o preço de uma revisão.
Houve três desafios:
- **a mecânica certa**: cada peça calcula a sua posição a partir do ângulo do balanço, e os números (21 600 alternâncias por hora, 17 rubis, o sentido de rotação de cada roda) estão cobertos por testes; - **a leveza**: o 3D só se descarrega na página inicial, e se as imagens ficam lentas a animação passa sozinha à versão desenhada em SVG, de 74 KB comprimidos, que também se escolhe no painel; - **a acessibilidade**: com o movimento reduzido ativo, a animação passa a ser duas imagens paradas com todas as legendas, e uma ligação permite saltá-la.
**«Como está o meu relógio?»** O cliente escreve o número do talão e os 4 últimos dígitos do telefone, e vê o estado da reparação, a data prevista e o orçamento. Por cima, o movimento no ponto da animação que lhe corresponde: desmontado enquanto está na bancada, a trabalhar quando está pronto. O número sozinho não chega, as tentativas são limitadas por endereço e por talão, e a página nunca mostra nomes nem números de telefone. A relojoeira muda o estado no painel com um toque, e tem oito segundos para voltar atrás.
**O painel** foi pensado para o telemóvel: cinco separadores em baixo, a receção com um talão para imprimir, os clientes, a tabela de preços, os textos do site e estatísticas de visitas sem cookies. **Experimenta-se no site sem conta**: a lógica do servidor também corre no browser, sobre uma cópia dos preços e dos textos com clientes e reparações inventados, e as alterações ficam no browser de quem experimenta. O servidor não recebe nada que tenha de guardar; um teste automático compara mais de trezentas respostas das duas versões.
As fotografias da oficina e o retrato são gerados na GPU do meu computador com um modelo aberto, e o site indica-o.
Conceção, desenvolvimento full-stack e publicação · 2026
Vue.js, Fastify, MongoDB, three.js, GSAP