01 · Creative premise
Sell the object by taking it apart.
Luxury product sites usually rotate a hero render and stop there. ORBITAL commits to a single stronger idea: the entire page is one continuous act of disassembly. The watch tumbles in a gimbal cage while you read, and the moment you scroll it comes apart along its own axis, assembly by assembly, each one labeled like an engineering drawing. Reassembly is just scrolling back up.
The scroll bar is the workbench. Reading progress and mechanical disassembly are the same number.
The brand is fictional: a Geneva house making the first mechanical caliber certified for hard vacuum, 250 pieces, each flown on a space station before delivery. The fiction gives every section a reason to exist, from the flight-record stats to the one-piece-per-client allocation rule.
02 · Building the watch
No model files. Eight procedural parts.
There is no GLB download and no modeling software in the pipeline. The watch is built at runtime from three.js primitives, which keeps the page self-contained and the geometry parametric. Every part is a group positioned on a shared Z axis, so exploding the watch later is a one-dimensional problem.
ExtrudeGeometry with holes
The case middle, bezel, and caseback are ring shapes: a circle with a circular hole, extruded with a small bevel so light catches the edges the way it does on machined titanium.
A sphere cap as sapphire
The crystal is a partial SphereGeometry with a physical material at 6 percent roughness and 16 percent opacity, which reads as glass under an environment map without any refraction cost.
Three tumbling torus rings
The gimbal cage is three TorusGeometry rings with pivot studs. In the hero they tumble on independent axes. When the explosion begins they settle into a flat halo, quaternion-slerped between the two states.
RoomEnvironment, one key, one rim
A PMREM-filtered RoomEnvironment gives the metals something to reflect. One warm key light defines shape, one amber rim ties the metal to the brand color, and ACES tone mapping holds the highlights.
The hands are set to the visitor's real local time every frame, with a sweeping seconds hand. It is a detail almost nobody will consciously notice, which is exactly why it belongs in a watch site.
03 · Explosion engine
A 420vh section drives one number.
The construction section is a tall scroll container with a sticky full-viewport stage inside it. Scroll progress through that container produces a single value p from 0 to 1, smoothed with an exponential follower so wheel steps feel damped rather than mechanical.
const total = wrapper.height - innerHeight
target = clamp(-wrapper.top / total, 0, 1)
p += (target - p) * 0.09 // per frame
for (const part of parts)
part.group.position.z = lerp(part.baseZ, part.explodedZ, ease(p))Everything else is derived from p: part positions, the camera path from the orbiting hero vantage to the exploded side view, the gimbal settling, a dashed axis line fading in, the instructional headline fading out, and the assembly percentage in the corner HUD.
Because every channel reads the same eased value, nothing can ever drift out of sync, and reduced-motion users get the same choreography with the smoothing removed.
04 · Projected callouts
Labels that track the metal.
Each part carries an invisible anchor Object3D placed on its most photogenic edge. Every frame, the anchor's world position is projected into screen space, and an SVG polyline connects it to an HTML label pinned near the viewport edge.
anchor.getWorldPosition(v).project(camera)
x = ( v.x * 0.5 + 0.5) * innerWidth
y = (-v.y * 0.5 + 0.5) * innerHeight
path.setAttribute('d', `M ${labelX} ${labelY} L ${elbow} ${labelY} L ${x} ${y}`)The labels are real HTML, so they stay crisp on any display and cost nothing to restyle. Two details carried the design: labels stagger in one at a time as the explosion progresses instead of appearing at once, and each label sits on a translucent blurred pill so it stays legible whatever the metal behind it is doing.
The instructional headline occupies the same left column the labels need, so it fades out as soon as disassembly begins. The screen hands itself from typography to diagram.
05 · Stability lessons
Bugs you only catch by looking.
Three real defects were found during the polish passes, all invisible in the code and obvious in screenshots.
The canvas ate the footer
The WebGL canvas is fixed with z-index: 0, which paints above any static, unpositioned element. The footer rendered fine in the DOM and was completely covered in the browser. Fix: the footer gets position: relative and a z-index, same as main.
The camera wandered off
The hero camera azimuth was t * 0.05, a slow monotonic orbit. After a minute the watch was huge, cropped, and behind the headline. Fix: a bounded oscillation, 0.32 + sin(t * 0.07) * 0.22, which keeps the composition stable forever.
The ticker had a seam
A marquee that animates to minus 50 percent needs its content duplicated once, or the second half of the loop is empty. Screenshots at the right moment catch it instantly.
The general method: screenshot the page headlessly at several scroll positions and two viewports after every change, and treat any console error or failed request as a build failure. The screenshot tool exits nonzero on both.
06 · Production process
Three passes before release.
Layout collisions and structural repair
- Fixed the footer hidden under the fixed WebGL canvas by giving it its own stacking context.
- Faded the section headline out during disassembly so projected callouts never overlap copy.
- Backed callout labels with translucent pills for legibility against bright metal.
- Raised and reframed the mobile hero watch so the wordmark and eyebrow sit in clear space.
Composition, atmosphere, and framing
- Replaced the drifting hero camera with a bounded oscillating orbit for permanent framing.
- Pulled the desktop camera back so the full gimbal assembly reads as one composed object.
- Added a soft additive amber glow sprite behind the watch that fades away as it explodes.
- Duplicated the specification ticker content to remove the marquee seam.
Full-page QA and copy truth
- Swept desktop at four scroll depths and mobile at two, checking every composed frame.
- Verified zero console errors and zero failed requests on every screenshot run.
- Corrected the headline to eight assemblies to match the eight labeled parts.
- Confirmed reduced-motion behavior, tab-hidden pause, and the anchor navigation.
07 · Authorship
Built by models. Directed by a person.
This series is a transparent record of AI orchestration. Credit is split by the work actually performed.
Claude Fable 5 invented the brand, wrote the copy, built the procedural watch, the explosion engine, the callout system, and completed the three polish passes.
Codex established the portfolio index at /x, the per-experiment guide pattern, and the release pipeline this site ships through.
Viron Gil Estrada commissioned the 25-site experiment, set the quality bar, owns the platform, and defined the one-site-at-a-time release strategy.
No model files, no stock assets, no scraped imagery. Everything visible is procedural geometry, CSS, SVG, typography, and original world-building.