LM-45Watches

Matins

A gold minute repeater that strikes the visitor's own time on two gongs, drawn and sounded live.

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 MATINS, an invented maker's minute-repeater pocket watch, built entirely in code and drawn live with three.js. The page loads straight in: a 52 mm pale-gold full hunter hangs on its chain showing the visitor's own time, and its lid springs open. Then the watch strikes 1:16 on two steel gongs while a score draws each blow; one blow is slowed twelve times until the gong becomes a low bell and the wire visibly rings; the watch opens into fourteen layers; every part is labelled on a slow turn; it closes and strikes the visitor's own time when they pull the slide; macros of the engine-turned lid, the enamel dial and the governor in slow time; any minute on demand with the score saved as a PNG; the specification; and a reservation list for twelve watches, one for each hour. Every sound is synthesised in the browser and stays off until the visitor turns it on. The site loads no model, image, video or audio files. Nearly every word and figure is in one file, the figures a real maker would have to prove are marked PLACEHOLDER, and RESKIN.md lists the few words that live elsewhere. The reservation form sends nothing until you point it at your own endpoint. For watchmakers, jewellers and any maker with a mechanism to show.

How it's made

  1. A watch from profiles and fields

    No model file. The case, lids and pendant are lathed and extruded; bridges and levers are traced from signed-distance shapes and extruded in millimetres.

  2. One strike, two clocks

    The repeater is a pure function of time: the hour, the minute, the slide and the seconds since the pull. The renderer and the Web Audio scheduler both read it on their own clock, so picture and sound never drift.

  3. Slowed twelve times

    Slow time divides the pitch by twelve and multiplies the decay by twelve: the 1.1 kHz gong becomes a 92 Hz bell, and the wire's ring is drawn sixty times larger.

  4. Sound with no recordings

    Modal gongs a major third apart, the tick, the governor's whirr and the winding ratchet are all synthesised live, and stay off until the visitor taps Sound.

  5. A studio light in one function

    Key, top softbox, scrim, rim and fill live in one GLSL function in view space, so the key stays upper left however the camera rolls round a hanging watch. One shader draws every metal and the enamel, with sunburst, Geneva stripes, perlage and satin.

  6. Printed at run time

    The enamel dial, the cartouche and the cuvette engraving are drawn on canvases in the site's own typefaces when the page loads.

  7. One scroll, one table

    A cue table sets the camera, the lids, the explode, the slow time and the callouts at every scroll position; triggers fire the strikes as the visitor arrives.

In this kit

  • src/

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

  • index.html

  • package.json

  • package-lock.json

  • vite.config.ts

  • tailwind.config.js

  • postcss.config.js

  • tsconfig.json

  • .env.example

  • .gitignore

  • 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.

  • 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.

  • CHANGES.md

    Changelog. What changed in each version of the kit.

  • 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 · Tailwind CSS 3.4 · GLSL shaders · Web Audio (synthesised) · Procedural geometry (no model file) · Bodoni Moda and Hanken Grotesk and IBM Plex Mono (self-hosted from npm)
File size
0.2 MB
Triangles
312,782
Browser
Needs WebGL 2 (current Chrome, Edge, Firefox and Safari on desktop and phones). Without it the page shows a notice and the words and reservation form still work. Honours reduced motion: transitions finish at once and the camera stops following the pointer. Sound starts only when the visitor taps Sound. Checked from a fresh unzip in headless Chrome with software WebGL at 1440 x 900 and 390 x 844, every section with no errors; not yet checked on a real GPU or a phone.
Released
Oct 2026
Version
1.0.0

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: the watch, the dial, the engraving and every sound are generated in the browser, and the site loads no model, image, video or audio files (its three typefaces are self-hosted under the SIL Open Font License). The minute repeater and the full hunter case are public historical forms; no maker's calibre, dial or name is copied. Written with an AI coding assistant (Claude Code) under Parallel's direction. Matins, its edition, figures and price are invented, and no trademark search has been run on the name.

Buy LM-45 Matins

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.