Experiência cinematográfica · relógio 3D que desmonta no scroll
AUREX TIMEPIECES

Problema
Relojoaria de luxo na web quase sempre é foto de produto parada, que não transmite a complexidade mecânica capaz de justificar o preço.
Solução
Um relógio 100% procedural (Calibre AX-01 Tourbillon) que desmonta peça por peça conforme o scroll (caixa, bezel, coroa, mostrador, ponteiros, trem de engrenagens, mola espiral, escape, rotor e a gaiola giratória do tourbillon) e remonta no caminho inverso exato. Filme em 15 cenas, configurador com troca de material em tempo real e galeria 360° por arrasto.
Como foi construído
Herda a arquitetura de estado compartilhado do AUREX MOTORS (canvas fixo, roteiro de cenas em arquivo único, câmera com damping), mas o diferencial é o sistema de desmontagem. Cada componente do relógio é um <Part> com posição de origem, deslocamento, rotação e uma janela de progresso (delay/span) própria. Uma função de smoothstep lê um valor global de 'explosão' e cada peça sai e volta em cascata dentro da sua janela. A remontagem não é uma animação separada: é o caminho de saída percorrido ao contrário.
O relógio é 100% procedural: caixa em anel (ExtrudeGeometry com furo, não um cilindro sólido), bezel, coroa serrilhada, mostrador com índices instanciados, cinco engrenagens paramétricas com dentes instanciados, mola espiral como tubo em espiral de Arquimedes, escape oscilante e a gaiola giratória do tourbillon com seu próprio balanço. Um bug real ilustra o valor de instrumentar em vez de adivinhar. A caixa começou como cilindro sólido, e a tampa frontal, invisível pra intuição, tapou o mostrador durante toda uma sessão de trabalho. O diagnóstico só veio de um raycast do centro da tela listando os hits em ordem, que expôs o cilindro a 6cm na frente do dial.
O maior salto de realismo custou zero geometria extra: uma CanvasTexture impressa sobre o mostrador (trilha dos minutos, nome da marca, numerais) resolveu o que nenhuma troca de material resolvia sozinha. O vidro também exigiu um ajuste contraintuitivo. MeshPhysicalMaterial transparente em ângulo raso reflete quase 100% da luz direta por Fresnel, criando um véu leitoso sobre o mostrador independente da opacidade. A solução foi um MeshBasicMaterial com tinta constante, deixando os reflexos por conta só dos metais.
Sistema de explosão modular
Cada peça com janela própria de saída/retorno; remontagem é o caminho inverso exato, não uma animação separada.
Debug por raycast
Bug de geometria sólida tapando o mostrador só foi achado listando hits de um raycast, não por tentativa e erro visual.
Realismo via CanvasTexture
Impressão do mostrador (trilha de minutos, marca) foi o maior ganho visual do projeto, sem custo de geometria.
Mais telas
Stack
- Next.js
- TypeScript
- React Three Fiber
- Three.js
- GSAP
- Lenis
- Tailwind

