LM-06Watches

Calibre

A mechanical watch movement, built in code.

The live preview runs real 3D in your browser, so on this device it can take longer to appear and scroll less smoothly. This kit builds a detailed 3D watch on your device. On a phone that can take 30 seconds or more. The video above shows the full site.

A flying tourbillon watch built entirely in code and rendered live with three.js. Its gear train keeps the hands on the visitor's local time. Scrolling slows time twelve times and takes all 102 parts apart with pinned labels, and visitors can wind it, light it with the cursor, drag it and switch to a blueprint view. The watch and its movement also come as .glb files. For watchmakers, jewelers and anyone selling precision.

How it's made

  1. The watch starts as numbers

    One number drives everything: 6 beats a second. A 96, 80, 75 and 84-tooth going train and a 15-tooth club escape wheel turn it into every angle, so the cage turns once a minute and the hands show the visitor's local time.

  2. Flat parts are sketched, not modeled

    Plates, bridges, cage frames and the case band are circles and capsules blended with filleted signed distance fields, traced with marching squares at 0.03 mm (0.06 mm on phones) and extruded with a polished bevel.

  3. Gears, springs and round parts come from code

    Twelve toothed parts get ogival or Swiss club teeth from their tooth counts, round parts are lathed from profiles, and a 2,400-segment hairspring (1,200 on phones) breathes with the balance in a vertex shader.

  4. Finishes are made in the browser

    Côtes de Genève, perlage, circular graining and sunburst are generated at load as roughness and anisotropy maps. The screws are blued with a thin-film effect, and the sapphire reflects a baked studio of seven light panels.

  5. Scroll runs a camera script

    19 cues across eight sections set the framing in millimeters, how far the parts come apart, the 1/12 slow motion and the labels. The engine eases between them every frame.

  6. A phone mode that starts fast

    About 188,000 triangles on desktop and 161,000 in phone mode. Phones get coarser sketches, half-size textures, a 1.5 pixel-ratio cap and the same bloom from 2 shader programs instead of 8, which cut the JavaScript time before the first frame by more than half (8.7 s to 3.4 s on a mid-range phone profile). A slow device lowers its resolution, then turns bloom off below 40 fps.

  7. Every cue was checked

    Page hooks and fixed-clock headless captures render each camera cue on desktop and phone, and a blueprint view draws every part's real edges, so a broken part shows up before it ships.

In this kit

  • src/

    Full source. The complete site as its own project, ready to run.

  • public/

    Media and assets. The images, clips, textures and icons the page loads.

  • models/

    3D models. The product the page is built around, ready to render.

  • tools/

    Helper scripts. Small scripts that come with the kit, like page checks and model exports. The README says what each one does.

  • index.html

  • package.json

  • package-lock.json

  • README.md

    Start here. What's inside and how to run it.

  • HOW-IT-WAS-MADE.md

    How it was made. The build step by step, and a recipe to make your own.

  • ADAPT.md

    Adaptation prompt. Fits the kit to your client's brand in an AI builder.

  • RESKIN.md

    Re-skin guide. Colors, type, copy and media, changed file by file.

  • CHANGES.md

    Changelog. What changed in each version of the kit.

  • PROVENANCE.md

    Provenance. Where every model, texture and image came from.

  • THIRD_PARTY.md

    Open-source credits. Every library and font inside, with its license.

  • LICENSE.md

    Commercial license. Unlimited client projects, one person per license, no resale.

See a real zip, opened

Specs

Stack
Vite · React · three.js · TypeScript · Tailwind CSS · Web Audio · Procedural geometry
File size
28.5 MB
Triangles
187,984
Load time
4.9 s (opening 3D view drawn; desktop Chrome, RTX 3060, cold cache, median of 3)
Browser
Needs WebGL 2: current Chrome, Edge, Firefox, Safari 15.4+
Released
Sep 2026
Version
1.1.1

From download to client site

  1. Buy it, or get it with a plan

    Buy this kit on its own, or get every kit in the collection with a plan.

  2. Download the zip

    It shows up in your library as soon as payment goes through. Up to 10 downloads a day, and each link works for 10 minutes.

  3. Run it

    Unzip it, run npm install, then npm run dev to open the site on your machine. You need Node.js 20 or newer. The README says how to build it for any host.

    npm install && npm run dev

  4. Make it your client's

    Hand ADAPT.md to your AI builder (Claude, ChatGPT or Cursor) with the client's brief, or follow RESKIN.md to change colors, type, copy and media by hand. HOW-IT-WAS-MADE.md shows how to build their product the same way.

Unlimited client projects, one person per license, no resale. Read the license

Every part is generated in code when the page loads, from 2D signed-distance sketches, lathed profiles and generated gear teeth, with nothing traced from a real watch. The page loads no model files, images, video or sound samples; the two .glb files in models/ (the whole watch and the movement alone) are exports of the same code.

Buy LM-06 Calibre

Single kit

Price: $59once

By buying you agree to the Terms and License.

Included with Monthly, Annual and Lifetime.

Or every kit for life, $499.