Compétence d'Animation Empro Labs
Compétence de conception de mouvement web. Deux étapes : écrire d'abord le cahier des charges du mouvement (ANIMATION.md), puis écrire le code.
ANIMATION.md est un fichier sauvegardé dans le projet. Il peut être modifié à la main, réutilisé dans d'autres projets et lu par d'autres outils.
Les chemins dans ce fichier sont relatifs au dossier de la compétence (~/.claude/skills/empro-labs-animation-skill/). Utilisez des chemins absolus lorsque vous exécutez les scripts.
Requête
La requête de l'utilisateur provenant de la commande slash :
$ARGUMENTS
Si la requête ci-dessus est vide, posez une question : qu'est-ce qui doit bouger, et où ? Puis commencez la Phase A.
Flux principal
Phase A Comprendre l'entrée ──→ Phase B Écrire ANIMATION.md (approbation utilisateur) ──→ Phase C Implémenter ──→ Phase D Auditer
Vérifications de démarrage (dans cet ordre)
- Le projet a-t-il déjà
ANIMATION.md? → Réutilisez-le, modifiez-le ou reconstruisez-le, selon ce que demande l'utilisateur. - A-t-il
DESIGN.md(de la compétence web-design) ? → Héritez de ses couleurs, polices et direction stylistique. Maintenez la cohérence du mouvement avec lui. - A-t-il des tokens de mouvement (
--motion-*variables ou un fichier de mouvement) ? → Réutilisez-les. N'inventez pas de nouvelles valeurs. - A-t-il déjà du code d'animation ? → Exécutez d'abord
python scripts/analyze_motion.py <projet> --inventorypour savoir ce qui existe avant de proposer des changements. - Rien de tout cela → Phase A.
Phase A : Comprendre
Les entrées peuvent être combinées :
| Entrée | Que faire |
|---|---|
| URL de référence | Exécutez python scripts/capture_motion.py --url [URL] --output ./motion-capture. Lisez capture.json pour les durées, easings, propriétés animées et effets de défilement réels. Utilisez top.png pour l'ambiance. |
| Vidéo ou capture d'écran du mouvement | Décrivez le déclencheur, la durée approximative et la sensation d'easing. Confirmez les chiffres avec l'utilisateur. |
| Mots-clés ("snappy", "cinématographique") | Associez-les à une personnalité dans references/motion-personalities.md. |
| Nom de marque ("comme Linear") | Capturez le site en ligne s'il est accessible. Sinon, demandez une URL de référence. Ne devinez pas le mouvement de mémoire d'une marque. |
| Code existant | Exécutez le script d'inventaire et conservez ce qui fonctionne. |
A1. Personnalité (posez au maximum deux questions)
- Sensation : calme, snappy, ludique ou cinématographique ?
- Type de page : riche en contenu (le mouvement reste discret) ou vitrine (le mouvement peut guider) ?
Montrez un ou deux candidats de references/motion-personalities.md, chacun avec une justification d'une ligne. L'utilisateur confirme.
A2. Niveau d'interaction (obligatoire, ne sautez pas)
Voir references/interaction-tiers.md.
| Niveau | Expérience | Outillage |
|---|---|---|
| L1 Micro | Survol, focus, appui, toggles, petits changements d'état | Transitions CSS uniquement |
| L2 Chorégraphié | Entrée et sortie, listes en cascade, modales, tiroirs, changements de route, chargeurs | Keyframes CSS, Web Animations API ou une timeline GSAP |
| L3 Histoire de défilement | Révélations liées au défilement, épinglage, parallaxe, sections pilotées par une timeline | GSAP + ScrollTrigger, ou animations CSS pilotées par le défilement avec une solution de repli |
L3 est limité à deux sections épinglées par page. Chaque section de page indique son niveau dans le cahier des charges.
A3. Stack
Vérifiez package.json et le framework (HTML simple, React, Vue, Svelte, Next.js). Choisissez l'outillage avec references/tooling.md. Par défaut : CSS et Web Animations API. Ajoutez GSAP uniquement pour L3 ou les timelines complexes.
Phase B : Écrire ANIMATION.md
Suivez references/animation-md-template.md. Dix sections :
- Personnalité et Principes du Mouvement
- Tokens de Mouvement (durées, easings, distances)
- Inventaire Chorégraphique (tableau : élément, déclencheur, propriété, durée, easing, délai, solution de repli en mouvement réduit)
- Mouvement des Composants (par défaut, survol, focus-visible, actif, désactivé, entrée, sortie)
- Comportement de Défilement
- Transitions de Page et de Route
- Budget de Performance
- Accessibilité
- À faire et à ne pas faire (au moins 8 éléments, au moins 5 d'entre eux des "À ne pas faire")
- Dépendances
Affichez un résumé à l'utilisateur et attendez l'approbation. Ensuite, sauvegardez ANIMATION.md à la racine du projet.
Phase C : Implémenter
- Des tokens partout. Chaque durée et easing est une variable, par exemple
var(--motion-duration-base). Pas de nombres magiques dans les composants. - Animez uniquement les propriétés peu coûteuses.
transformetopacityen premier.clip-pathetfiltersont autorisés sur les petits éléments. N'animez jamaiswidth,height,top,left,marginoupaddingsauf si ANIMATION.md enregistre une exception avec une justification. - Le mouvement réduit fait partie de la première version, pas d'un correctif ultérieur. Le mouvement est supprimé et les changements d'état restent. Les tokens de distance passent à zéro sous mouvement réduit, et le bloc
prefers-reduced-motiondanstemplates/motion-tokens.cssmontre le modèle. - Utilisez les fichiers de démarrage lorsque le projet n'a pas encore de couche de mouvement :
templates/motion-tokens.cssettemplates/reveal.js. - Les boucles ont besoin d'une issue. Toute animation
infinites'arrête ou se simplifie sous mouvement réduit. Toute boucle de plus de cinq secondes a un contrôle de pause. - Nettoyez le JavaScript. Détruisez les timelines GSAP et ScrollTriggers au démontage (utilisez
gsap.context()ouuseGSAP). Déconnectez les observateurs et supprimez les écouteurs. - Gardez le mouvement à un seul endroit. Mettez les tokens dans un fichier et les recettes dans de petits modules. Ne dispersez pas les valeurs de synchronisation entre les composants.
Phase D : Auditer
- Exécutez l'audit statique :
python scripts/analyze_motion.py <projet> --strict. Corrigez chaque erreur. Examinez chaque avertissement et soit corrigez-le, soit justifiez-le dans ANIMATION.md. - Exécutez les vérifications navigateur :
- Activez le mouvement réduit (DevTools → Rendering →
prefers-reduced-motion: reduce). Confirmez qu'il n'y a plus de mouvement et que le contenu est toujours visible. - Limitez le CPU (4×) et enregistrez le panneau Performance pendant que le mouvement se joue. Recherchez les longues trames.
- Vérifiez une largeur de téléphone (390 px). Recherchez un débordement horizontal dû aux éléments animés.
- Activez le mouvement réduit (DevTools → Rendering →
- Parcourez
references/quality-checklist.md. - Rapportez ce qui a réussi, ce qui a échoué et ce que vous avez corrigé.
Lignes rouges (chaque élément doit passer)
- Chaque animation dans ANIMATION.md a une solution de repli pour mouvement réduit.
- Seules
transform,opacityet les exceptions enregistrées sont animées. - Toutes les durées et easings proviennent de tokens.
- Toute boucle
infiniterespecte le mouvement réduit, et toute boucle de plus de cinq secondes a un contrôle de pause. - Rien ne clignote plus de trois fois par seconde.
- Le feedback interactif apparaît dans les 100 ms. Les micro-animations durent 250 ms ou moins. Les animations d'entrée et les transitions de route durent 500 ms ou moins.
- Le feedback uniquement au survol a un état de focus clavier et un équivalent tactile.
- Pour des largeurs de 600 px ou moins, aucun élément animé ne provoque de défilement horizontal, et les sections épinglées sont désactivées ou simplifiées.
- Les animations JavaScript sont nettoyées au démontage.
Index de référence
Lisez uniquement les fichiers dont la phase actuelle a besoin. Ne les chargez pas tous.
| Fichier | Contenu | Quand le lire |
|---|---|---|
references/animation-md-template.md | Modèle de sortie ANIMATION.md (10 sections) | Phase B |
references/motion-principles.md | Pourquoi et quand animer, règles de timing et d'easing | Phases A et B |
references/interaction-tiers.md | Définitions des niveaux L1, L2 et L3 avec des modèles de code | Phase A2 et B |
references/motion-personalities.md | Quatre préréglages de personnalité avec valeurs de tokens | Phase A1 et B |
references/tooling.md | CSS vs WAAPI vs GSAP vs Motion vs View Transitions vs Lottie | Phase A3 |
references/component-recipes.md | Bouton, carte, accordéon, modale, tiroir, toast, onglets, chargeurs | Phase C |
references/gsap-recipes.md | Timelines GSAP, ScrollTrigger, matchMedia, nettoyage React | Phase C (GSAP uniquement) |
references/scroll-patterns.md | Révélation, barre de progression, pile collante, parallaxe, défilement horizontal | Phase B (défilement) et C |
references/performance.md | Budget de trame, règles favorables au compositeur, rétrogradation mobile | Phases B et D |
references/accessibility.md | Mouvement réduit, critères de mouvement WCAG, déclencheurs vestibulaires | Phases B et D |
references/quality-checklist.md | Checklist d'audit de 100 points | Phase D |
Scripts
| Script | Utilisation | Prérequis |
|---|---|---|
scripts/analyze_motion.py | Audit statique du CSS et JS d'un projet. Détecte les animations de mise en page, transition: all, les boucles infinies, les longues durées et l'absence de gestion du mouvement réduit. --inventory liste les valeurs de timing existantes. | Python 3 (bibliothèque standard uniquement) |
scripts/capture_motion.py | Enregistre les animations déclarées et en cours sur une URL en direct, fait défiler la page et vérifie ce qui fonctionne encore avec un mouvement réduit. Écrit capture.json et top.png. | Python 3, pip install playwright, python -m playwright install chromium |
Les deux scripts acceptent --help.
Modèles
| Fichier | Utilisation |
|---|---|
templates/motion-tokens.css | Variables de tokens, keyframes de base, règles de révélation et le bloc de mouvement réduit. Copiez dans le projet. |
templates/reveal.js | Révélation au défilement sans dépendance avec IntersectionObserver qui respecte le mouvement réduit. |
Langue
Rédigez ANIMATION.md et les résumés dans la langue de l'utilisateur. Gardez les noms en CSS, JavaScript et tokens en anglais.
Chaîne de repli
- Le script de capture échoue (pas de Playwright, ou le site bloque le navigateur) → demandez une capture d'écran ou un court enregistrement d'écran et construisez à partir de cette description.
- La référence utilise une bibliothèque d'animation que vous ne pouvez pas identifier → dites-le et demandez si vous devez reproduire la sensation ou le mouvement exact.
- Aucune entrée du tout → posez une question sur la sensation, puis utilisez la personnalité calme.