← Lab

Concept · Lab — self-initiated, not a client

HELION

Mechanical watch · Concept

A mechanical instrument, configured in real time.

Live
  • Three.js / R3F
  • PBR materials
  • Atomic state machine
  • Next.js

Role

Real-time 3D watch configurator — atomic URL-shareable state, live PBR material + geometry swap, cinematic camera.

What this proves

Instrument-grade interactive 3D at 60fps — the inverse skillset of NOCTIS's scroll cinema. State drives geometry, not just material.

Stack

Next.js 16 · React 19 · Three.js / R3F · @react-three/postprocessing · GSAP · Tailwind v4 · TypeScript strict.

The build · in four beats

HELION is the second self-initiated concept in the Lab, and the deliberate inverse of NOCTIS. Where NOCTIS is scroll-cinema — a linear sequence you watch — HELION is a real-time instrument you drive: a mechanical-watch configurator where every choice re-renders live in a 3D stage.

The engineering is in making that feel effortless. Configuration lives in an atomic external store — module-scoped state read through useSyncExternalStore — so selecting one axis never fans a re-render across the tree, and the whole build hydrates from the URL, which makes any configuration a shareable link. Materials swap live across a PBR registry that includes transmission: the sapphire crystal and the open-skeleton dial both route through a single shared transmission sampler — my fix for an interior that "swam" when each refractive surface resolved its own buffer.

State doesn't just swap colours — it drives geometry. Choosing the open-skeleton dial renders a real mechanical movement beneath a now-transmissive face; the complication axis builds genuine 3D detail onto the dial — a date aperture, chronograph subdials, a GMT rehaut, a moonphase porthole — each one gated so it appears only where it's horologically coherent. All of it is procedural; there isn't a single imported 3D model in the scene.

The rest is polish that earns its keep: a demand frameloop, so the stage draws frames in response to motion and interaction instead of running an unconditional 60fps loop; a cinematic camera with per-preset depth-of-field and an opt-in auto-rotate that walks its four presets hands-free; a mechanical sonic layer synthesized live in the Web Audio API, with no sound files shipped; and a mobile tap-to-focus mode that shrinks the watch to a live thumbnail and hands the screen to the configurator.

Performance

Desktop Lighthouse 100 — with accessibility, best-practices, and SEO all 100.

Mobile 79: the cost of shipping real-time WebGL to a 4×-throttled CPU, the same tradeoff NOCTIS taught me to make deliberately. The three.js chunk is deferred behind a poster, so it never blocks first paint.

  • Three.js / R3F
  • PBR materials
  • Atomic state machine
  • Next.js