# 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`