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.

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.

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()