KOMPOSE.
Toutes les ressources
Site WebClaude

Derrière la FS 60P : comment fonctionne une page produit 3D en temps réel

Le problème résolu

Vous voulez une page produit qui donne une impression premium et interactive plutôt qu'un template statique de plus, mais construire ça demande en général un pipeline 3D sur mesure que la plupart des équipes n'ont pas. Cette ressource décortique comment thewatch.60fps.fr transforme un seul modèle 3D en site produit complet (hero, changement de couleur, diagramme éclaté, fiche technique), et donne le prompt pour construire votre propre version une fois que vous avez un asset 3D.

Le prompt à copier

Optimisé avecClaude
Construis un site vitrine produit d'une seule page pour un produit physique, avec React, TypeScript, Vite et @react-three/fiber (Three.js). Le hero entier est un visualiseur 3D en temps réel du modèle .glb réel du produit. Pas de vidéo, pas de carrousel photo en visuel principal.

Visualiseur 3D (hero) :
- Charge le modèle .glb du produit dans un composant Canvas React-Three-Fiber, centré dans la fenêtre.
- Rotation automatique lente au repos ; l'utilisateur peut glisser pour orbiter et zoomer au scroll/pincement.
- Éclaire avec une environment map HDR (.exr ou .hdr équirectangulaire) via le composant Environment, avec la prop files réglée sur envmap.exr, pour de vrais reflets, pas un éclairage ambiant plat. Utilise des matériaux PBR avec metalness/roughness réalistes sur les parties brillantes.
- Affiche une petite indication à l'écran ("Glisser pour explorer") qui disparaît après la première interaction.

Changement de variante/couleur :
- Si le produit existe en plusieurs finitions, garde UN seul modèle et change le matériau/la texture par variante au clic, plutôt que de charger des modèles séparés. Affiche une fiche technique en direct qui se met à jour par variante.

Diagramme éclaté / points d'intérêt :
- Ajoute des points cliquables ancrés sur des zones du modèle (depuis la hiérarchie de meshes du .glb, ou des marqueurs projetés 3D vers 2D placés manuellement). Cliquer en ouvre un panneau d'info : nom de la pièce, fonction en une ligne, bouton de fermeture.

Titre & texte :
- Nom de produit court et affirmé, plus une phrase de positionnement.
- Deux sous-titres courts associant un langage artisanal à un détail technique.

Section photo/détail :
- Quelques plans rapprochés du modèle sous des angles fixes, avec un petit compteur de frame numéroté ("34/62") dans un coin.

Nomenclature :
- Une liste simple de chaque composant avec un poids ou une spécification réelle ou plausible. Des chiffres précis, pas des adjectifs.

Typographie : une police d'affichage distinctive pour le nom du produit/les titres, associée à une police sans-serif simple pour le corps/l'interface. Fond sombre, chrome minimal, laisse le modèle et le texte porter la page.

Stack technique : React + TypeScript + Vite, @react-three/fiber + @react-three/drei, Tailwind CSS pour la mise en page/typographie uniquement.

Ce que fait le site

FS 60P est un microsite produit pour une montre de luxe vitrine, construit entièrement autour d’un seul modèle 3D en temps réel. Pas de vidéo, pas de carrousel photo : le modèle lui-même est le hero, le sélecteur de couleur, et le diagramme éclaté.

Parcours de la page

  1. Hero 3D en direct. La montre remplit l’écran, rotation automatique au repos, orbite au glisser.
  2. Changement de coloris. Un contrôle fait défiler quatre finitions sur le même modèle (changement de matériau, pas quatre assets séparés), avec une fiche de poids qui se met à jour par finition.
  3. Diagramme éclaté. Cliquer sur un point du modèle ouvre un panneau d’info avec le nom et la fonction de la pièce. Le hero devient aussi un diagramme technique.
  4. Photos lookbook. Plans rapprochés avec un petit compteur de frame dans un coin, donne l’impression d’un vrai plateau photo.
  5. Nomenclature. Chaque composant listé avec son poids en grammes. Des chiffres précis, pas des adjectifs.

L’asset derrière tout ça

Le modèle : watch-DXFPNOEl.glb. Éclairé avec une environment map HDR plus une metal-response map (les deux en .exr), la vraie différence entre « asset de jeu vidéo » et « photo ».

Cadrage honnête

Ceci est généralisé exprès : ça suppose que vous avez (ou pouvez obtenir) votre propre modèle .glb. Sans ça, cette technique ne s’applique pas encore, c’est une vraie contrainte, pas une formalité. Site de référence analysé structurellement par inspection en direct, pas scrapé ni copié : rien ici n’est le vrai code source de thewatch.60fps.fr.

Ressources liées

Toutes les ressources
Site WebClaude

Comment sont construits les sites de Lando Norris, Charles Leclerc et Oscar Piastri

Les sites de pilotes F1 (landonorris.com, charlesleclerc.com, oscarpiastri.com) donnent l'impression d'un budget inatteignable, alors qu'aucun des trois n'utilise de 3D : tout repose sur Lenis, GSAP ScrollTrigger, des révélations de texte masquées et de la vidéo plein cadre. Le vrai blocage, c'est qu'un seul prompt ne peut pas produire ce type de site, parce que les systèmes dépendent les uns des autres (le moteur de scroll avant les animations, le préloader avant le hero, les épinglages dans une seule séquence). Ce guide détaille ce qui tourne réellement sous le capot des trois sites, puis découpe la construction en 10 étapes avec un prompt prêt à coller pour chacune.

›_Tu es mon partenaire de build pour un site one-page cinématique de pilote ou d'athlète, da
Voir la fiche
Site WebClaude

Reproduire une page produit Apple de A à Z (le démontage du code)

Les pages produit d'Apple passent pour hors de portée, alors qu'elles reposent sur cinq couches empilables et toutes reproductibles. Cette ressource ouvre les bundles JavaScript livrés en production sur iPhone 17 Pro, AirPods Pro et MacBook Pro, montre ce que chacune fait vraiment (shaders GLSL maison, scrub vidéo en HLS, moteur de keyframes piloté en CSS), puis donne l'ordre de construction et le prompt complet.

›_You are building an Apple-style product page: a long scroll where the visuals are driven b
Voir la fiche
Site WebClaude

Réussir des animations au scroll de très haute qualité

Le smooth scroll installé en trois lignes donne un site mou, qui tremble sur les sections épinglées et qui devient pénible sur mobile. Un scroll de niveau studio, ce sont quatre couches distinctes à régler séparément : inertie, révélation, épinglage, scrub. Ce guide donne les quatre, avec le code, les valeurs qui marchent et le démontage de trois sites qui les réussissent.

›_# Scroll motion layer: build spec # Portable: save it as CLAUDE.md (Claude Code) or AGENTS
Voir la fiche
Passer à l'action

On vous construit le site ?

Ces ressources donnent le ton. On peut livrer le site complet, rapide et pensé pour convertir.

Réserver un appelÀ propos de nous