Orbit

Field notes

A titanium watch turns through three studio poses while spec callouts draw out from the dial, the crown, and the case. Built from Three.js primitives — no models, no textures, no HDR.

• 3D
• Pointer interaction
• Product
• Dark theme

Orbit is a product-launch hero for anything worth looking at from every side. A titanium watch hangs in a dark studio and turns on a 10-second tour: the dial first, then the screw-down crown, then the case band from above. At each stop, spec cards draw a leader line out from the exact part they describe and fade away before the next turn.

The whole watch is built from Three.js primitives — cylinders, a torus bezel, instanced indices, box hands — lit by three's built-in RoomEnvironment, so there is no model, texture, or HDR file to download. Pointer parallax tilts it toward the visitor, the callouts track the watch as it moves, and it settles on the dial for anyone who prefers reduced motion.

How it's built

• Labels that follow the 3D watch: the spec cards are ordinary DOM elements that React renders once. After that, every frame projects each card’s anchor from the watch’s local space onto the screen and writes transform and opacity straight into the element’s style. Near the right edge a card flips to the left side.
• No asset files: the watch is built only from Three.js primitives, and each 60-tick ring is a single InstancedMesh. Reflections come from three’s built-in RoomEnvironment, prefiltered once through PMREMGenerator, so no HDR file is downloaded.
• Glow only where it’s meant: Bloom’s luminance threshold is 1. The lume glows at emissive intensity 1.6 and the orbit bead’s color is (4, 1.6, 0.6) with tone mapping off, so only those parts cross the cutoff while the metal and ceramic stay crisp.

Inside the prompt

Every file below is written out in full, so your agent creates the project exactly — no guessing, no missing pieces.

orbit-watch/
├─ .gitignore
├─ index.html
├─ package.json
├─ tsconfig.json
├─ vite.config.ts
└─ src/
   ├─ App.tsx
   ├─ index.css
   ├─ main.tsx
   ├─ vite-env.d.ts
   ├─ components/
   │  ├─ Callouts.tsx
   │  ├─ HeroOverlay.tsx
   │  ├─ ShowcaseScene.tsx
   │  └─ WatchModel.tsx
   └─ lib/
      ├─ loop.ts
      └─ tour.ts

Recut it

• Rename the product and rewrite the pitchsrc/components/HeroOverlay.tsx → HeroOverlay
• Edit the spec callouts and where they pointsrc/lib/tour.ts → CALLOUTS
• Add, remove, or re-angle the tour stopssrc/lib/tour.ts → POSES
• Swap the case metal, dial, or lume colorssrc/components/WatchModel.tsx → useMaterials()
• Swap the accent colorsrc/index.css → --color-ember
• Place the watch left, right, or centeredsrc/components/ShowcaseScene.tsx → useLayout()