Three.js Exploded Watch Scroll Animation with Real Time Hands
Overview
A scroll animation for React and Next.js where a watch modelled entirely in Three.js code separates into its layers along its axis while the camera slowly orbits. The hands show the viewer's real time, and DOM labels name each part as it lifts away.
There are no model files. The case and bezel are turned with lathe geometry, the dial's engine-turned pattern is a normal map generated on the GPU when the page loads, the applied indices are instanced, and the movement plate carries extruded gears, jewels, a turning balance wheel and a rotor. Everything reflects a small studio of softboxes baked into an environment map, so the rose gold has something real to catch as the camera moves.
Details
- Category
- Scroll
- Interaction
- On Scroll + Mouse Move
- Trigger
- On Scroll
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 052 / Gallery
Three.js 3D Gallery Corridor with Scroll Walkthrough
On Scroll · Mouse Move
No. 077 / Scroll
Three.js Satin Ribbon Scroll Animation with Silk Shader
On Scroll · Mouse Move
No. 066 / Cards
Three.js 3D Metal Credit Card with Brushed Titanium
Mouse Move · On Click
(02)FAQ
Three.js Exploded Watch Scroll Animation with Real Time Hands — FAQ
01What does it need from my page?
npm install three (and @types/three for TypeScript), and Tailwind CSS v4. There are no model, texture or HDRI files to host. Set --timepiece-font on a parent to choose the display typeface, which is also used for the name printed on the dial. It falls back to Georgia.
02Do the hands really show the visitor's time?
Yes. They read the visitor's clock after the page has hydrated, so the server and client markup can't disagree. The second hand steps eight times a second like a mechanical movement.
03Can I rename the parts or change the copy?
Pass layers to rename any part or change its note, heading, eyebrow and closing for the text around it, and dialName for the word printed on the dial. Anything in children sits on top of the stage. The model itself lives in timepiece-stage.ts if you want to change its proportions or colours.
04How heavy is it?
About 35 draw calls and 70,000 triangles a frame. While the watch is whole and nothing is scrolling it only draws when the second hand steps. It stops completely off screen or in a hidden tab, and it lowers its pixel ratio if the first frames run slow.
05What happens with reduced motion or no WebGL?
With reduced motion you get one still frame of the parts laid out with their labels, in a normal-height section, and the hands are redrawn only when the minute changes. With no WebGL, or on a software renderer, the server-rendered drawing stays and the parts become a plain list.