LM-11Watches

Orris

A gold tourbillon in a garden, 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.

An openworked gold flying tourbillon rests on a suede cushion in a small garden, then lifts off as the scroll takes the camera round the case, into the tourbillon in slow motion, past the caseback and through an exploded view that flies at the lens. Everything is built in code and drawn live with three.js, with no video, and the hands keep each visitor's local time. The watch, the cushion and the garden also come as .glb files. For watchmakers, jewelers and luxury brands.

How it's made

  1. Contract before geometry

    One shared file fixed the units (millimeters, Y up), the watch's own frame, the cushion's 62 x 44 mm loop and every camera value before a single part was drawn.

  2. A case from outlines

    The 39.2 mm octagon, the 41 mm band and eight white-gold hex screws are offset outlines, lofted bands and extrusions, and every part is split into satin, polished and circular-grained faces.

  3. A movement drawn as lace

    The bridges and mainplate are 2D signed-distance sketches, traced with marching squares and extruded with a polished bevel. A real going train (21,600 beats an hour, a tourbillon that turns once a minute) drives every wheel, and the hands show the visitor's local time.

  4. Bracelet and cushion made for each other

    Articulated rows at a 5.9 mm pitch wrap the cushion's ellipse. The suede dents under the links in a vertex shader and springs back in about a second as the watch slides off.

  5. A garden that stays out of the shot

    Eucalyptus, olive, filler and daisies grow from seeded rules as instanced leaves, with the wind animated on the GPU. Every plant is tested against the lift path, the floating watch and each later camera, and removed if it's in the way.

  6. Lit and shot like a product still

    A key light through a leaf-shaped cutout, a painted gold reflection studio with parallax, real depth of field that also blurs foreground leaves, bloom on glints only (on laptops), and Neutral tone mapping.

  7. A camera script on a budget

    Cues pinned to 11 sections blend into one shot per frame. A laptop frame draws about 464,000 triangles and a phone about 157,000, with a 1.5 pixel-ratio cap, shadows redrawn only when something moves, and half-rate rendering when idle.

  8. A lighter phone mode (1.1.0)

    Phones skip the bloom, fold tone mapping into the last pass, compile each material once and share shaders between near-identical materials, with lighter geometry and textures. That means 36 shader programs instead of 77 and 46% less main-thread time before the first frame. Laptops run exactly the same code as before, checked pixel for pixel at all 36 camera cues.

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 8.2 · React 18.3 · three.js 0.186 · JavaScript (JSX) · Tailwind CSS 3.4 · Framer Motion 11 · Lenis 1.3 · Procedural geometry
File size
20.9 MB
Triangles
464,396
Load time
2.0 s (opening 3D view drawn; desktop Chrome, RTX 3060, cold cache, median of 3)
Browser
Needs WebGL 2: current Chrome, Edge, Firefox, Safari 15+
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

Built entirely in code, with no scans, image textures or model files on the page; the .glb files in models/ are exported from that same code. The case is a homage to a famous octagonal-bezel luxury sports watch, and its outline was measured off one reference photo, so rebuild the case and bracelet before using it for a watch brand (PROVENANCE.md explains).

Buy LM-11 Orris

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.