ORBIT — A smart-ring launch site in real-time 3D

ORBIT is a concept launch site for a fictional titanium health ring. I designed and built it to show what a hardware launch page can do when the product is rendered live in the browser instead of filmed.

No photos, no 3D files. The ring is modeled in code: its comfort-fit profile is drawn once and revolved into a band, then lit by a virtual photo studio so the titanium picks up real reflections and a brushed grain. Because it is all code, a new finish is one line, not a reshoot.

One scroll, one scene. The page tells the product story in five chapters without cutting away. The ring sweeps into existence, turns to show its profile, comes apart into five labeled layers, turns again to reveal its sensors pulsing at 62 bpm, then changes finish. The labels track each part as it moves, so the teardown reads like an engineering drawing that happens to be alive.

Tools that sell, not just show. Ring sizing is the biggest reason people hesitate to buy a smart ring online, so the page answers it: hold a bank card to the screen to calibrate, then match a ring you already own and get a US size. Your size and finish carry straight into the pre-order panel, which has its own live render of the ring.

The details nobody notices until they are missing: the layout recalculates where the ring sits for every screen width so it never collides with the headline. On phones the ring moves above the text and the part labels become a legend. A bank card is wider than most phone screens, so the sizer calibrates on the card's short edge there. Visitors who prefer reduced motion get the same page without animation, and browsers without 3D get a static fallback.

Built with Three.js and plain JavaScript. I used AI-assisted tools for speed, with my own design direction, implementation and testing at every screen size. The clips above are recorded straight from the live scene. ORBIT is fictional, and the demo takes no payments.