MILWEB®
MILWEB®
MW/005AUREX TIMEPIECESESTUDIO

EL TIEMPO,DESARMADO.

AUREX TIMEPIECES — pantalla inicial
ESTUDIO
MILWEB
TIPO
EXPERIENCIA WEBGL
ESTADO
EN LÍNEA

02 / LA IDEA

Una foto quieta no justifica el precio. La mecánica, sí.

El AX-01 es un calibre 100% procedural que se desarma pieza por pieza con el scroll —caja, bisel, corona, esfera, agujas, tren de engranajes, espiral, escape, rotor, tourbillon— y se rearma por el camino inverso exacto.

03 / EXPERIENCIA
  1. 01 / PELÍCULA

    Quince escenas con canvas fijo, guion en un único archivo y cámara con damping: la arquitectura heredada de Aurex Motors.

    AUREX TIMEPIECES — PELÍCULA
  2. 02 / EXPLOSIÓN

    Cada <Part> tiene posición de origen, desplazamiento, rotación y una ventana (delay/span). Un smoothstep lee el valor global de explosión y cada pieza sale y vuelve en cascada.

    AUREX TIMEPIECES — EXPLOSIÓN
  3. 03 / CONFIGURAR

    Configurador con cambio de material en tiempo real y galería 360° por arrastre; cuatro expresiones del mismo calibre.

    AUREX TIMEPIECES — CONFIGURAR
Time perfected — el AX-01 de cerca

04 / BAJO EL CAPÓ

EXPLOSIÓN — progress = 0.00v = smoothstep(delay, delay + span, progress)
  1. 01CAJAv=0.00
  2. 02BISELv=0.00
  3. 03CORONAv=0.00
  4. 04ESFERAv=0.00
  5. 05MANECILLASv=0.00
  6. 06TREN DE ENGRANAJESv=0.00
  7. 07MUELLE REALv=0.00
  8. 08ESCAPEv=0.00
  9. 09ROTORv=0.00
  10. 10TOURBILLONv=0.00
  • SISTEMA DE EXPLOSIÓNVentana delay/span por pieza + smoothstep sobre un progreso global; el rearmado es el camino inverso, no otra animación.+

    Hereda la arquitectura de estado compartido de AUREX MOTORS (canvas fijo, guion de escenas en archivo único, cámara con damping), pero el diferencial es el sistema de desarme. Cada componente del reloj es un <Part> con posición de origen, desplazamiento, rotación y una ventana de progreso (delay/span) propia. Una función de smoothstep lee un valor global de 'explosión' y cada pieza sale y vuelve en cascada dentro de su ventana. El rearmado no es una animación separada: es el camino de salida recorrido al revés.

  • RELOJ PROCEDURALCaja en anillo (ExtrudeGeometry), 5 engranajes paramétricos con dientes instanciados, espiral de Arquímedes, escape, tourbillon.+

    El reloj es 100% procedural: caja en anillo (ExtrudeGeometry con agujero, no un cilindro sólido), bisel, corona estriada, esfera con índices instanciados, cinco engranajes paramétricos con dientes instanciados, muelle real como tubo en espiral de Arquímedes, escape oscilante y la jaula giratoria del tourbillon con su propio volante. Un bug real ilustra el valor de instrumentar en vez de adivinar. La caja empezó como cilindro sólido, y la tapa frontal, invisible para la intuición, tapó la esfera durante toda una sesión de trabajo. El diagnóstico solo vino de un raycast desde el centro de la pantalla listando los hits en orden, que expuso el cilindro a 6cm delante del dial.

  • RAYCAST DEBUGUna tapa invisible cubrió la esfera durante una sesión entera; un raycast desde el centro de la pantalla listó los hits y expuso el bug.+

    El reloj es 100% procedural: caja en anillo (ExtrudeGeometry con agujero, no un cilindro sólido), bisel, corona estriada, esfera con índices instanciados, cinco engranajes paramétricos con dientes instanciados, muelle real como tubo en espiral de Arquímedes, escape oscilante y la jaula giratoria del tourbillon con su propio volante. Un bug real ilustra el valor de instrumentar en vez de adivinar. La caja empezó como cilindro sólido, y la tapa frontal, invisible para la intuición, tapó la esfera durante toda una sesión de trabajo. El diagnóstico solo vino de un raycast desde el centro de la pantalla listando los hits en orden, que expuso el cilindro a 6cm delante del dial.

  • MATERIALESCanvasTexture en la esfera fue el mayor salto de realismo a costo cero; vidrio en MeshBasicMaterial para matar el velo de Fresnel.+

    El mayor salto de realismo costó cero geometría extra: una CanvasTexture impresa sobre la esfera (minutería, nombre de la marca, numerales) resolvió lo que ningún cambio de material resolvía por sí solo. El vidrio también exigió un ajuste contraintuitivo. Un MeshPhysicalMaterial transparente en ángulo rasante refleja casi el 100% de la luz directa por Fresnel, creando un velo lechoso sobre la esfera independiente de la opacidad. La solución fue un MeshBasicMaterial con tinte constante, dejando los reflejos solo a cargo de los metales.

CONSTRUIDO CONNext.js · TypeScript · React Three Fiber · Three.js · GSAP · Lenis · TailwindCÓDIGO

05 / DETALLES

  • 15

    ESCENAS

  • 10

    PIEZAS QUE SE DESARMAN

  • 05

    ENGRANAJES PARAMÉTRICOS

  • 360°

    GALERÍA POR ARRASTRE

06 / RESULTADO

Proyecto propio, en línea

RELOJ 100% PROCEDURAL EN R3F

[ QUIERO ALGO PARECIDO ]

07 / PANTALLAS SELECCIONADAS
Configurador en tiempo real
PANTALLA 01Configurador en tiempo real
La colección: cuatro expresiones
PANTALLA 02La colección: cuatro expresiones
Time perfected
PANTALLA 03Time perfected
SIGUIENTE EXPERIENCIA05 / KAVITA INSTITUCIONAL

Kavita Institucional

Kavita Institucional

TODOS LOS PROYECTOS

TODOS LOS PROYECTOS