KOMPOSE.
← All resources
WebsiteClaude

Behind the FS 60P: how a real-time 3D product page works

The problem it solves

You want a product page that feels premium and interactive instead of another static template, but building one usually means a custom 3D pipeline most teams do not have. This breaks down exactly how thewatch.60fps.fr turns a single 3D model into a full product site (hero, color swap, exploded parts diagram, spec sheet), and gives you the prompt to build your own version once you have a 3D asset.

The prompt to copy

Optimized withClaude
Build a single-page product showcase site for a physical product, using React, TypeScript, Vite, and @react-three/fiber (Three.js). The entire hero is a real-time 3D viewer of the product's actual .glb model. No video, no photo carousel as the primary visual.

3D viewer (hero):
- Load the product's .glb model into a React-Three-Fiber Canvas component, centered in the viewport.
- Auto-rotate slowly when idle; let the user drag to orbit and pinch/scroll to zoom.
- Light it with an HDR environment map (an .exr or .hdr equirectangular map) via the Environment component, files prop set to envmap.exr, for real reflections, not flat ambient light. Use PBR materials with realistic metalness/roughness on glossy parts.
- Show a small on-screen hint ("Drag to explore") that fades after first interaction.

Variant/color swap:
- If the product has multiple finishes, keep ONE model and swap the material/texture per variant on click, rather than loading separate models. Show a live spec readout that updates per variant.

Exploded parts / hotspot diagram:
- Add clickable hotspots anchored to points on the model (from the .glb mesh hierarchy, or manually placed 3D-to-2D projected markers). Clicking one opens an info panel: part name, one-line function, close button.

Headline & copy:
- Short, confident product name plus one-line positioning statement.
- Two short subheads pairing craft language with a technical detail.

Photography/detail section:
- A few close-up shots of the model from fixed angles, with a small numbered frame-counter overlay ("34/62" style) in a corner.

Bill of materials:
- A plain list of every component with a real or plausible weight/spec value. Specific numbers, not adjectives.

Typography: one distinctive display face for the product name/headlines, paired with a plain sans for body/UI. Dark background, minimal chrome, let the model and the copy carry the page.

Tech stack: React + TypeScript + Vite, @react-three/fiber + @react-three/drei, Tailwind CSS for layout/typography only.

What the site does

FS 60P is a product microsite for a showcase luxury watch, built entirely around one real-time 3D model. No video, no photo carousel: the model itself is the hero, the color picker, and the exploded-parts diagram.

Walking the page

  1. Live 3D hero. The watch fills the screen, auto-rotating at rest, draggable to orbit.
  2. Colorway swap. One control cycles four finishes on the same model (material swap, not four separate assets), with a weight readout that updates per finish.
  3. Exploded parts diagram. Clicking a hotspot on the model opens an info panel with the part’s name and function. The hero doubles as a technical diagram.
  4. Lookbook stills. Close-up shots with a small frame-counter overlay in the corner, reads as « shot on a real set. »
  5. Bill of materials. Every component listed with its weight in grams. Specific numbers, not adjectives.

The asset behind it

The model: watch-DXFPNOEl.glb. Lit with an HDR environment map plus a metal-response map (both .exr), which is the real difference between « looks like a game asset » and « looks like a photo. »

Honest framing

This is genericized on purpose: it assumes you have (or can source) your own .glb model. Without one, this technique does not apply yet, that is a real constraint, not a formality. Reference site analyzed structurally via live inspection, not scraped or copied: nothing here is thewatch.60fps.fr’s actual source code.

Related resources

All resources →
WebsiteClaude

How the Lando Norris, Charles Leclerc and Oscar Piastri sites are built

F1 driver sites (landonorris.com, charlesleclerc.com, oscarpiastri.com) look like an unreachable budget, yet none of the three uses 3D: it is all Lenis, GSAP ScrollTrigger, masked line-by-line text reveals and well encoded full-bleed video. The real blocker is that a single prompt cannot produce this kind of site, because the systems depend on each other (scroll engine before any animation, preloader before the hero, consecutive pins in one sequence). This breaks down what actually runs on all three, then splits the build into 10 steps with a ready-to-paste prompt for each.

›_You are my build partner for a cinematic athlete / driver one-page site in the style of la…
Open the sheet
WebsiteClaude

Build an Apple-style product page from A to Z (the code teardown)

Apple product pages look out of reach, yet they rest on five stackable layers that are all reproducible. This resource opens the production JavaScript bundles of iPhone 17 Pro, AirPods Pro and MacBook Pro, shows what each one actually does (hand written GLSL shaders, HLS video scrubbing, a CSS driven keyframe engine), then gives the build order and the full prompt.

›_You are building an Apple-style product page: a long scroll where the visuals are driven b…
Open the sheet
WebsiteClaude

Building genuinely high-end scroll animations

Smooth scroll dropped in with three lines gives you a sluggish site that judders on pinned sections and turns annoying on mobile. Studio-grade scrolling is four distinct layers, each tuned separately: inertia, reveal, pinning, scrubbing. This guide covers all four, with the code, the values that actually work, and a teardown of three sites that get them right.

›_# Scroll motion layer: build spec # Portable: save it as CLAUDE.md (Claude Code) or AGENTS…
Open the sheet
Take action

Want us to build the site?

These resources set the tone. We can deliver the full site, fast and built to convert.

Book a callAbout us