LM-02Watches

Vauclair

A watch house's salon in seven rooms, one to each hour, with a watch to turn in each.

The live preview runs real 3D in your browser, so on this device it can take longer to appear and scroll less smoothly. The video above shows the full site.

A complete site for MAISON VAUCLAIR, an invented watch house, built entirely in code and drawn live with three.js. It opens on an invitation printed like a watch dial, standing on a lamplit desk: while the rooms load, a window is cut into the card for each one, in the shape of that room's watch, and the crescent at twelve turns to night. Then one day, one room to each hour: a grove of faceted gold columns in the morning, a Victorian palm house at a winter noon where a coin of sunlight falls on a brass meridian at today's date, a walnut salon of 1925, a yacht's teak deck at sunset, a black velvet jewellery salon, a map library with a world-time watch, a green rotunda whose moonphase and tellurion show tonight's moon, and at midnight the night over the lake. Every watch keeps the visitor's own time, turns under their hand and opens an editorial page illustrated with plates of that same watch, with a private viewing request. Sound is synthesised in the browser. Seven collections, every word and watch spec in one file. For watchmakers, jewellers and any luxury house with collections to show.

How it's made

  1. An invitation cut by the hour

    The page opens on a card printed like a watch dial on a lamplit desk. While the rooms load, a window is cut into it for each one, in the shape of that room's watch and lit with that room's light, and the crescent at twelve turns to night.

  2. One world, nine stations

    The rooms stand end to end in one three.js world, joined door to door, and the camera rides a rail through each threshold while the light, fog and grade blend from room to room. A wheel, a drag or a key moves one station and snaps.

  3. Seven watches from one spec

    Each watch is a spec in one data file (case, dial, hands, movement, strap or bracelet, complication), built in millimetres. The hands keep the visitor's time and the seconds step at each movement's beat.

  4. Turn it, then Discover

    Every watch rests on a stand of its own and turns under the visitor's hand. Discover opens an editorial page illustrated with plates the engine photographs of that same watch.

  5. Today's sun, tonight's moon

    In the palm house the sun falls through a pinhole onto a brass meridian at today's noon, and the equation-of-time hand agrees. The moonphase, the tellurion, the card's crescent and the night sky all show tonight's moon.

  6. Every surface generated

    Eighteen texture generators (stone, wood, velvet, leather, paper, tiles, metals) run in workers and tile with no seam. Natural Earth coastlines are engraved into the world-time dial, the globe and the atlases.

  7. A light rig that never changes

    Two fixed banks of lights alternate room to room and are never switched on or off, extra lamps are baked into lightmaps, and one grade pass does bloom, depth of field and colour, so no shader compiles twice.

  8. Built while you look

    The invitation draws first, then rooms build in 12 ms slices around the visitor. Phones get a lighter tier, a governor steps quality down on slow devices, and sound is synthesised and stays off until the visitor turns it on.

In this kit

  • src/

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

  • scripts/

  • index.html

  • package.json

  • package-lock.json

  • vite.config.ts

  • vitest.config.mjs

  • tsconfig.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 · TypeScript 5.9 · three.js 0.186 · GLSL shaders · Web Workers (procedural textures) · Web Audio (synthesised) · Procedural geometry
File size
1.7 MB
Triangles
901,763
Load time
2.1 s (opening 3D view drawn; desktop Chrome, RTX 3060, cold cache, median of 3 (local production build of the kit))
Browser
Needs WebGL 2. Tested from a fresh unzip of the kit in Chrome on a real GPU at 1440 x 900 and at 390 x 844 (phone tier), every room with no errors; Safari, Firefox and real phones not tested yet. Phones and touch devices get the phone tier (lower internal resolution, half-size textures, one live lamp per room, no mirror floor or depth of field), and quality steps down on slow devices. Reduced motion cuts between rooms instead of flying. Without WebGL 2 a short note replaces the salon.
Released
Oct 2026
Version
1.0.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: every room, watch, texture, map, the invitation and the night sky are generated in the browser, and the site loads no model, image, video or audio files (its four typefaces are self-hosted under the SIL Open Font License; the world coastlines are Natural Earth, public domain). Written with an AI coding assistant (Claude Code) under Parallel's direction. MAISON VAUCLAIR is an invented house set in Geneva: its watches, references and history are fiction, and a client selling real watches must not claim Geneva or Swiss origin unless it is true.

Buy LM-02 Vauclair

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.