MilWebWhatsApp
Voltar aos projetos

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

AUREX TIMEPIECES

15 cenas · relógio 100% proceduralProjeto autoral · no ar
Screenshot do projeto 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

Configurador com troca de caixa, mostrador, ponteiros e pulseira em tempo realVitrine da coleção com as quatro expressões do calibre

Stack

  • Next.js
  • TypeScript
  • React Three Fiber
  • Three.js
  • GSAP
  • Lenis
  • Tailwind

Pronto para transformar sua ideia em um produto digital?

Me conta o que você precisa. Respondo rápido e te passo um orçamento gratuito, sem compromisso.

  • Contrato de garantia
  • Suporte pós-entrega
  • O código é seu
  • Orçamento gratuito