Introducing Caliber 08 — a scroll-choreographed product study where the entire page is one pinned WebGL canvas.
No .glb files. No textures. No photography.
Every surface of this mechanical watch is generated procedurally at runtime with Three.js primitives and a single canvas-painted dial. Change one number in code, the whole watch changes.
What I built:
→ 24 scroll beats that scrub camera, lighting, and assembly
→ 57 meshes from 14 component types, built entirely in code
→ A tonal system where background and typography invert together
→ Zero external assets, 60fps even on scroll
Why this matters beyond a watch:
Luxury e-commerce still relies on expensive photoshoots for every SKU, colorway, and angle. Caliber 08 proves we can replace that with procedural, configurable 3D that is lighter, interactive, and infinitely customizable.
Built with Three.js, GSAP, and Vite. Deployed and submitted for Building Indonesia, where 100 winners share Rp800M+ and the top 200 by upvotes advance to judging.
🔗 Try the live experience: https://app.emergent.sh/showcase/building-indonesia/4f0e9d26-d98c-441f-9e8b-819485db08cd
PS: Best experienced on desktop. Mobile is functional but not yet optimized for the scroll choreography.
An upvote on the showcase page would mean a lot if you enjoy the craft. Would love your feedback!
Top comments (0)