Asterion H-01

An interactive, procedural luxury skeleton watch built with React, TypeScript, React Three Fiber, Drei, and Three.js.

Every visible watch component is generated in code: no external 3D models, HDR files, hosted fonts, or runtime asset downloads.

Live Demo

GitHub Pages is configured for:

https://ckeplinger199.github.io/asterion-h01/

The first deployment starts after the initial push to main.

Features

• Fully procedural skeleton watch: case, lugs, bezel, sapphire, dial, hands, bridges, gears, rotor, jewels, screws, crown, pushers, strap, and caseback.
• Multi-layer openworked calibre with mainspring barrel, meshed train wheels, visible pivot jewels, keyless works, and a tourbillon-style escapement.
• Explicit crown modes:
  • Wind tensions the mainspring reserve through the keyless works.
  • Set advances the hands in 15-minute steps without adding reserve.
• Working chronograph controls with a visible column-wheel-style mechanism, coupling clutch, brake lever, drive wheel, running state, and reset.
• Complications for GMT, date, moon phase, power reserve, and chronograph.
• Exploded mode separates the crystal, bezel, dial, hands, movement, and caseback into a readable layer stack.
• Calibre tour buttons highlight the keyless works, barrel, chronograph works, and escapement.
• Responsive controls: desktop side panel, touch-friendly tablet/mobile bottom sheet, collision-aware hover/tap labels, and adaptive camera framing.
• Production build uses local icons, relative Vite asset paths, code-split vendor chunks, ACES tone mapping, bloom, SMAA, and adaptive DPR.

Run Locally

Requires Node.js ^20.19.0 or >=22.12.0.

npm install
npm run dev

Open the local URL printed by Vite.

Verify

npm run lint
npm run build

The production build is emitted to dist/.

Deploy

This repo includes a GitHub Pages workflow at .github/workflows/pages.yml.

On pushes to main, GitHub Actions runs:

npm ci
npm run lint
npm run build

Then it publishes dist/ to GitHub Pages.

The Vite config uses base: './', so the static build works from the repository Pages subpath.

Controls

• Drag/swipe to orbit.
• Scroll/pinch to zoom.
• Exploded separates the watch into layered mechanical assemblies.
• Pause freezes the animated mechanics.
• Reframe returns the camera to the current layout's optimal view.
• Case finish switches between steel, rose, and DLC material systems.
• Strap swatches change the procedural leather color.
• Crown mode switches between winding and hand-setting behavior.
• Crown action winds reserve in Wind mode or advances time in Set mode.
• Chronograph controls start, stop, and reset the 30-second register.
• Calibre tour buttons intentionally focus the most important mechanisms.

Source Map

src/
  components/
    scene/       camera, lighting, render pipeline
    ui/          responsive control sheet and hover annotations
    watch/       case, dial, movement, hands, complications, strap, motifs
  lib/           procedural geometry and finish palettes
  vendor/        Three.js Timer compatibility adapter
  App.tsx        application state and control wiring

License

MIT