Cinematic experience · a 3D watch that disassembles on scroll
AUREX TIMEPIECES
Problem
Luxury watches on the web are almost always static product photos, which never convey the mechanical complexity that justifies the price.
Solution
A 100% procedural watch (Calibre AX-01 Tourbillon) that disassembles piece by piece as you scroll (case, bezel, crown, dial, hands, gear train, mainspring, escapement, rotor and the tourbillon's spinning cage), then reassembles along the exact reverse path. A 15-scene film, a real-time material configurator and a drag-to-rotate 360° gallery.
How it was built
It inherits the shared-state architecture from AUREX MOTORS (fixed canvas, single-file scene script, damped camera), but the differentiator is the disassembly system. Every watch component is a <Part> with a home position, offset, rotation and its own progress window (delay/span). A smoothstep function reads a global 'explode' value and each piece slides out and back in cascade within its window. Reassembly isn't a separate animation: it's the exact same exit path walked backwards.
The watch is 100% procedural: a ring-shaped case (a hollowed ExtrudeGeometry, not a solid cylinder), a bezel, a knurled crown, a dial with instanced hour markers, five parametric gears with instanced teeth, a mainspring built as an Archimedean-spiral tube, an oscillating escapement and the tourbillon's own spinning cage with its balance wheel. One real bug shows the value of instrumenting instead of guessing. The case started as a solid cylinder, and its front cap, invisible to intuition, hid the dial for an entire work session. The diagnosis only came from a raycast fired from screen center listing hits in order, which exposed the cylinder sitting 6cm in front of the dial.
The biggest realism jump cost zero extra geometry: a CanvasTexture printed onto the dial (minute track, brand name, numerals) solved what no material swap could fix alone. Glass also demanded a counter-intuitive call. A transparent MeshPhysicalMaterial at a grazing angle reflects almost 100% of direct light through Fresnel, creating a milky veil over the dial regardless of opacity. The fix was a MeshBasicMaterial with a constant tint, leaving reflections entirely to the metal parts.
Modular explosion system
Each part has its own exit/return window; reassembly is the exact reverse path, not a separate animation.
Raycast-driven debugging
A solid-geometry bug hiding the dial was only found by listing raycast hits, not by visual trial and error.
Realism via CanvasTexture
The printed dial (minute track, brand) was the project's single biggest visual win, at zero geometry cost.
More screens
Stack
- Next.js
- TypeScript
- React Three Fiber
- Three.js
- GSAP
- Lenis
- Tailwind