motion-three-r3f

motion-three-r3f

Catalogue généré le 2026-05-11

En une phrase

Guide pratique pour intégrer de la 3D web avec Three.js et React Three Fiber sans plomber la performance, en maîtrisant la boucle de rendu et les règles de cleanup.

Quand l'utiliser

• Quand on veut un hero WebGL animé sur une landing
• Pour ajouter un visuel 3D interactif (carte, produit, scène) à une page
• Quand un projet Three.js existant rame ou chauffe le CPU
• Avant d'attaquer une scène complexe pour valider qu'on a vraiment besoin de 3D
• Pour structurer proprement une intégration React + Canvas avec gestion du frameloop

Comment l'invoquer

• Slash command : /motion-three-r3f
• Auto-invocation : ✅ Oui — quand un projet implique de la 3D dans le navigateur

Description détaillée

Ce skill commence par te poser la question qui sauve : as-tu vraiment besoin de Three.js, ou est-ce qu'une image SVG animée ferait l'affaire ? La 3D web est lourde et la majorité des intégrations gagneraient à être remplacées par autre chose. Si la 3D est justifiée, il passe à la mise en place.

Il configure d'abord la boucle de rendu en mode frameloop="demand" plutôt qu'en rendu permanent : la scène ne se redessine que quand quelque chose change, ce qui peut diviser la consommation CPU par dix sur un hero statique. Il centralise la logique d'animation dans un seul useFrame au lieu de multiplier les requestAnimationFrame parallèles. Et il insiste sur le cleanup et le dispose() des géométries/textures au démontage, sinon le navigateur garde tout en mémoire.

Tu repars avec une architecture recommandée pour ton Canvas, des snippets prêts à copier pour frameloop + invalidate + useFrame, et une checklist perf à dérouler avant la mise en prod. Pour Thymon : c'est le skill à utiliser dès que le mot "WebGL" ou "3D" apparaît dans un brief, pour éviter de partir dans un truc impossible à maintenir.

Source

• Plugin : perso (standalone)
• Nom interne : motion-three-r3f
• Fichier : /home/thymon/.claude/skills/motion-three-r3f/SKILL.md