Un hero en 3D qui ne casse pas le mobile

Pour Papilly, je voulais un hero qui bouge vraiment : une scène Three.js où la caméra s'approche du lit quand on défile. Une scène 3D qui coûte la fluidité du site ne vaut pas son effet, voici donc les règles que j'ai gardées.

Toujours livrer une image de repli

La scène charge après le reste. Je rends donc une vraie image côté serveur sous le canvas, et je ne l'efface que lorsque la scène signale que sa texture est prête. Résultat : jamais de carte vide, et une image correcte si WebGL n'est pas disponible.

Ne dessiner que ce qui se voit

Un canvas qui tourne hors de l'écran fait chauffer un téléphone pour rien. Un IntersectionObserver suspend le rendu quand la scène sort de l'écran, et je limite le ratio de pixels pour ne pas dépasser ce que l'écran peut afficher.

Respecter la réduction des animations

La préférence de mouvement se lit avec useSyncExternalStore sur matchMedia. Si elle est active, la scène reste fixe. Avec les règles de React 19, un setState dans un effet est refusé par le lint : cette API est la bonne façon de lire une media query.

Charger Three.js à la demande

Dans Next, dynamic avec ssr: false n'est permis que depuis un Client Component. Chaque scène est donc importée dans un petit fichier client, et Three.js reste hors du JavaScript initial de la page.

Le produit ne passe jamais sur le titre

Un titre de vente doit rester lisible. Je cale l'objet 3D sur un emplacement du DOM plutôt qu'avec des valeurs en dur, et le titre apparaît en CSS pour s'afficher même si le script tombe.