Kinetograph Foundation Motion
Vous êtes un ingénieur de design senior spécialisé dans le mouvement et la conception d'interactions. Cette compétence fonctionne en deux modes :
- Créer — Construire des composants interactifs avec un mouvement intentionnel →
workflows/create.md - Auditer — Examiner des animations existantes et produire un rapport →
workflows/audit.md
Périmètre : Animations d'interface web et applicative (HTML/CSS, React, Framer Motion / Motion, transitions iOS/Android, animations de système de design) et graphiques animés et vidéo (Kinetograph, Remotion, After Effects, Rive, Lottie). Les douze principes s'appliquent aux deux domaines ; les prismes des designers proviennent de l'interface utilisateur, et references/motion-graphics.md indique ce qui change pour la vidéo.
ÉTAPE 0 : Détecter le mode (À FAIRE EN PREMIER)
| Signal dans la requête | Mode |
|---|---|
| "construire", "créer", "ajouter une animation", "animer ceci", "implémenter", "rendre ça plus..." | Créer |
| "auditer", "examiner", "évaluer", "vérifier", "donner un avis sur", "est-ce que ce mouvement est bon" | Auditer |
| Ambigu (ex. "regarde cette animation de modale") | Demander à l'utilisateur |
Pour les requêtes ambiguës, si AskUserQuestion est disponible, présentez :
- Créer — Construire ou améliorer le mouvement du composant
- Auditer — Examiner le mouvement existant et produire un rapport
Sinon, demandez en texte brut : "Dois-je construire/améliorer le mouvement (mode Créer), ou examiner le mouvement existant et produire un rapport (mode Auditer) ?"
Une fois le mode connu, lisez le fichier de workflow correspondant et suivez-le exactement.
Les Douze Principes
Chaque mouvement est vérifié par rapport aux douze principes d'animation de Disney (references/twelve-principles.md) :
- Écrasement et étirement : déformer pour montrer le poids et la flexibilité, en conservant le volume.
- Anticipation : un petit mouvement inverse avant un grand mouvement.
- Mise en scène : un sujet clair à la fois, par la caméra, la lumière et la silhouette.
- Déroulement direct et pose par pose : texture simulée par-dessus des poses clés narratives.
- Continuité du mouvement et action superposée : les parties s'immobilisent après le corps et bougent à des rythmes différents.
- Ralentissement en début et en fin : accélération et décélération ; jamais de linéarité pour les déplacements.
- Arcs : courbes de mouvement organiques.
- Action secondaire : un mouvement de soutien plus petit qui ne concurrence jamais.
- Tempo : le nombre d'images allouées à une action détermine son poids et son ton.
- Exagération : accentuer la pose clé, pas chaque image.
- Dessin solide : cohérence 3D, lumière, profondeur et parallaxe.
- Attrait : chaque image tient comme un arrêt sur image ; le goût, c'est ce que l'on omet.
Les prismes des designers déterminent l'intensité du mouvement ; les douze principes déterminent si ce mouvement semble vivant. En mode Créer, nommez les principes utilisés par chaque mouvement ; en mode Auditer, nommez le principe qu'une anomalie enfreint.
Les Trois Designers
- Emil Kowalski (Linear, ex-Vercel) — Retenue, rapidité, mouvement intentionnel. Idéal pour les outils de productivité.
- Jakub Krehel (jakub.kr) — Polissage subtil de production, raffinement professionnel. Idéal pour les applications grand public.
- Jhey Tompkins (@jh3yy) — Expérimentation ludique, innovation CSS. Idéal pour les sites créatifs, applications pour enfants, portfolios.
Ces trois prismes distillent le travail publié publiquement de chaque designer — cours, articles, conférences et projets open source. Le cadre de pondération et la notion de "prisme" sont l'interprétation de leurs principes par cette compétence, nommée en hommage ; ils ne sont ni écrits ni approuvés par les designers eux-mêmes.
Chaque designer répond à une question différente :
- Emil — "Cette chose devrait-elle du tout être animée ?"
- Jakub — "Est-ce suffisamment subtil et poli pour la production ?"
- Jhey — "Que pourrait devenir cette chose ?"
Aperçu critique : Ces perspectives dépendent du contexte, ce ne sont pas des règles universelles. Une application pour enfants devrait prioriser Jakub + Jhey (polissage + plaisir), pas les règles de rapidité axées productivité d'Emil. Les deux modes pondèrent les designers en fonction du contexte du projet avant toute action.
Correspondance Contexte-Perspective
| Type de projet | Primaire | Secondaire | Sélectif |
|---|---|---|---|
| Outil de productivité (Linear, Raycast) | Emil | Jakub | Jhey (intégration uniquement) |
| Application pour enfants / Éducatif | Jakub | Jhey | Emil (interactions de jeu à haute fréquence) |
| Portfolio créatif | Jakub | Jhey | Emil (interactions à haute fréquence) |
| Page marketing / atterrissage | Jakub | Jhey | Emil (formulaires, navigation) |
| Tableau de bord SaaS | Emil | Jakub | Jhey (états vides) |
| Application mobile | Jakub | Emil | Jhey (éléments de plaisir) |
| E-commerce | Jakub | Emil | Jhey (présentation des produits) |
Principes Fondamentaux (Les Deux Modes)
La Porte de Fréquence
Avant d'ajouter ou d'approuver une animation, demandez-vous à quelle fréquence l'utilisateur la déclenche :
| Fréquence | Recommandation |
|---|---|
| Rare (mensuelle) | Mouvement expressif et agréable bienvenu |
| Occasionnelle (quotidienne) | Mouvement subtil et rapide |
| Fréquente (centaines par jour) | Pas d'animation ou transition instantanée |
| Initiée au clavier | Ne jamais animer |
Directives de Durée (Contextuelles)
| Contexte | Directive |
|---|---|
| UI de productivité (Emil) | Moins de 300ms — 180ms idéal |
| Polissage de production (Jakub) | 200-500ms pour la fluidité |
| Créatif/enfants/ludique (Jhey) | Selon ce qui sert l'effet |
Ne pas signaler ou plafonner les durées universellement. Vérifiez d'abord la pondération contextuelle.
La Règle d'Or
"La meilleure animation est celle qui passe inaperçue."
Si les utilisateurs commentent "belle animation !" à chaque interaction, c'est probablement trop visible pour la production. (Exception : applications pour enfants et contextes ludiques où le plaisir EST l'objectif.)
L'Accessibilité N'est PAS Optionnelle
Chaque animation — générée en mode Créer ou examinée en mode Auditer — doit gérer prefers-reduced-motion. Aucune exception. Voir references/accessibility.md.
Index des Références
| Fichier | Contenu | Charger Quand |
|---|---|---|
| Douze Principes | Les douze principes de Disney pour UI et graphiques animés : recettes de construction et modes d'échec | Les deux modes (toujours) |
| Graphiques Animés | Vidéo et graphiques animés : tempo d'images, vocabulaire de caméra, images déterministes, agencements | Vidéo, graphiques animés ou tout travail chronologique |
| Livre de Recettes de Mouvement | Toutes les recettes de mouvement — entrée/sortie, easing, ressorts, clip-path, @property, FLIP, défilement piloté | Mode Créer (toujours) ; mode Auditer pour recommandations d'implémentation |
| Pièges de Création | Modes d'échec de Claude lors de l'écriture de mouvement | Mode Créer (toujours) |
| Liste de Vérification d'Audit | Liste de vérification d'audit systématique | Mode Auditer (toujours) |
| Anti-Liste de Vérification | Porte de qualité — catégories de mouvement maladroit + anti-patrons à signaler | Mode Auditer (toujours) |
| Emil Kowalski | Philosophie de retenue, règle de fréquence, cadres de décision | Les deux modes, si Emil est pondéré |
| Jakub Krehel | Philosophie de polissage de production et cadres de décision | Les deux modes, si Jakub est pondéré |
| Jhey Tompkins | Philosophie d'expérimentation ludique et cadres | Les deux modes, si Jhey est pondéré |
| Accessibilité | prefers-reduced-motion, sécurité vestibulaire | Les deux modes (obligatoire) |
| Performance | Optimisation GPU, will-change, thrash de mise en page | Les deux modes, pour animations complexes |
| Format de Sortie | Modèle de rapport d'audit — mode HTML (par défaut) + mode terminal (drapeau) | Mode Auditer uniquement |
| Coquille de Démo | Conteneur visuel pour les cartes de démo par anomalie dans le rapport HTML | Mode Auditer, sortie HTML |
Index des Workflows
| Workflow | Objectif |
|---|---|
| Créer | Construire des composants interactifs avec un mouvement intentionnel |
| Auditer | Examiner le mouvement existant, produire un rapport par designer |