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