motion-framer-patterns

motion-framer-patterns
Catalogue généré le 2026-05-11
En une phrase
Snippets et patterns prêts à l'emploi pour la librairie Motion (anciennement Framer Motion) en React : animations d'entrée/sortie, layout animations, shared elements, gestures et reduced-motion.
Quand l'utiliser
Pour ajouter une animation d'apparition propre à un composant React
Quand tu veux qu'un élément "glisse" élégamment d'une grille vers un détail (layout animation)
Pour faire un effet de partage entre deux pages (shared element transition)
Quand un site React commence à avoir trop d'animations désordonnées
Pour avoir une référence rapide des bonnes pratiques sans relire la doc de Motion
Comment l'invoquer
Slash command : 
/motion-framer-patterns
Auto-invocation : ✅ Oui — pour des patterns d'animation React avec Motion
Description détaillée
Motion (anciennement Framer Motion) est la librairie d'animation la plus utilisée en React. Elle est très puissante mais facile à mal utiliser, ce qui dégrade la performance et casse le ressenti.
Ce skill commence par t'aider à choisir le pattern adapté à ton besoin : 
enter/exit pour une apparition simple, 
layout pour qu'un élément s'adapte tout seul quand son conteneur change, 
shared pour qu'un élément "voyage" entre deux contextes (par exemple une carte qui s'ouvre en modal), 
scroll pour le scroll-triggered. Il applique ensuite les tokens du projet (durées, easings) pour rester cohérent avec le reste du motion system, et implémente la variante reduced-motion en parallèle.
Il finit par une checklist QA qui rappelle les pièges : ne pas avoir trop de 
layout animations simultanées (chacune coûte en perf), préférer 
transform à 
top/left, nettoyer les listeners au démontage. Tu repars avec trois snippets prêts à coller (un enter/exit, un layout, un shared), 5 do/don't maximum pour ne pas surcharger, et une note explicite sur le reduced-motion. Installation : 
npm install motion. Pour Thymon : c'est ta référence rapide pour ne pas perdre 30 minutes à chaque animation React.
Source
Plugin : 
perso (standalone)
Nom interne : 
motion-framer-patterns
Fichier : 
/home/thymon/.claude/skills/motion-framer-patterns/SKILL.md