O TEMPO,DESMONTADO.

- ESTÚDIO
- MILWEB
- TIPO
- EXPERIÊNCIA WEBGL
- STATUS
- NO AR
02 / A IDEIA
Foto parada não justifica preço. Mecânica, sim.
O AX-01 é um calibre 100% procedural que se desmonta peça por peça conforme o scroll — caixa, bezel, coroa, mostrador, ponteiros, trem de engrenagens, espiral, escape, rotor, tourbillon — e remonta no caminho inverso exato.
01 / FILME
Quinze cenas com canvas fixo, roteiro em arquivo único e câmera com damping — a arquitetura herdada do Aurex Motors.

02 / EXPLOSÃO
Cada <Part> tem posição de origem, deslocamento, rotação e uma janela (delay/span). Um smoothstep lê o valor global de explosão e cada peça sai e volta em cascata.

03 / CONFIGURAR
Configurador com troca de material em tempo real e galeria 360° por arrasto; quatro expressões do mesmo calibre.

FILME
EXPLOSÃO
CONFIGURAR
04 / POR BAIXO DO CAPÔ
- 01CAIXAv=0.00
- 02BEZELv=0.00
- 03COROAv=0.00
- 04MOSTRADORv=0.00
- 05PONTEIROSv=0.00
- 06TREM DE ENGRENAGENSv=0.00
- 07MOLA ESPIRALv=0.00
- 08ESCAPEv=0.00
- 09ROTORv=0.00
- 10TOURBILLONv=0.00
SISTEMA DE EXPLOSÃOJanela delay/span por peça + smoothstep sobre um progresso global; remontagem é o caminho inverso, não outra animação.+
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.
RELÓGIO PROCEDURALCaixa em anel (ExtrudeGeometry), 5 engrenagens paramétricas com dentes instanciados, espiral de Arquimedes, escape, tourbillon.+
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.
RAYCAST DEBUGUma tampa invisível tapou o mostrador por uma sessão inteira; um raycast do centro da tela listou os hits e expôs o bug.+
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.
MATERIAISCanvasTexture no mostrador foi o maior salto de realismo a custo zero; vidro em MeshBasicMaterial para matar o véu de Fresnel.+
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.
CONSTRUÍDO COM — Next.js · TypeScript · React Three Fiber · Three.js · GSAP · Lenis · TailwindCÓDIGO ↗
05 / DETALHES
15
CENAS
10
PEÇAS QUE SE DESMONTAM
05
ENGRENAGENS PARAMÉTRICAS
360°
GALERIA POR ARRASTO
06 / RESULTADO



Kavita Institucional
