motion-designpar LottieFiles

Motion Design Skill.

Un skill Claude Code et Codex pour le motion et la vidéo : applique les principes du motion design : timing, easing, chorégraphie et fondamentaux de l'animation.

Mouvement et vidéo

Télécharger OpenDesign Voir le guide d'utilisation

LottieFiles/motion-design-skill · skills/motion-design/SKILL.mdSKILL.md

--- name: motion-design description: Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI. Use when creating animations, transitions, micro-interactions, loading states, page transitions, scroll-triggered effects, or any motion work. Works with CSS, Framer Motion, GSAP, Lottie, Spring, or any animation system. --- ## When to Apply ## Quick Reference: 8-Step Checklist ## Three Pillars (CRITICAL) ## Motion Personality ## Property Selection ## Duration Table

Métadonnées et titres de section lus depuis le fichier source le 14 septembre 2026 · 12 489 caractères au total

01 Ce qu'il fait

Ce que fait le Skill motion-design dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Une référence de design de mouvement axée uniquement sur les principes, destinée aux designers et développeurs qui animent des interfaces. Elle part de trois piliers — intention émotionnelle, narration visuelle et savoir-faire du mouvement — puis affine chaque décision via l'une des quatre personnalités de mouvement (Playful, Premium, Corporate, Energetic), chacune avec des plages de durée, des courbes d'accélération et des pourcentages de dépassement fixes.

Des recettes concrètes couvrent l'appui sur un bouton, l'entrée d'une carte, le tremblement de succès et d'erreur, avec à l'appui des tableaux de durée par type d'élément, des règles d'accélération directionnelles, une chorégraphie et des budgets d'échelonnement, une carte émotion-mouvement et des classes de poids. Ces indications sont exprimées sous forme de chiffres, de valeurs par défaut et de contraintes applicables à tout système d'animation que vous utilisez déjà.

Ce qu'il produit

Trois constantes de mouvement de marque à définir : accélération signature, palette de durées et motif d'entrée
Des spécifications cubic-bezier prêtes à l'emploi, reprises des standards de plateforme
Des recettes de motifs multi-étapes avec des minutages par étape, comme le prolongement de l'appui sur un bouton

Voir l'exemple de prompt ↗

Fonctionnement

01
Fixer d'abord les trois piliers
Identifiez l'intention émotionnelle, la micro-histoire visuelle et le savoir-faire qui rendent le mouvement crédible, avant de choisir un minutage ou une courbe.
02
Verrouiller un seul archétype de personnalité
Choisissez un seul archétype — Playful, Premium, Corporate ou Energetic — et conservez-le pour tout le projet, car chacun impose sa propre plage de durée, sa courbe d'accélération et son dépassement.
03
Utiliser le moins de propriétés possible qui fonctionnent
Les tableaux de propriétés associent chaque objectif d'effet à une propriété principale et à des secondaires optionnelles ; une propriété se lit comme directe, deux comme soignée, trois ou plus risquent de submerger le spectateur.
04
Ajuster la durée selon la distance
Partez de la durée définie pour le type d'élément, puis étirez-la selon la distance parcourue : 100px est la base, 200px devient 1,3x, 400px devient 1,6x.
05
Accélérer selon la direction
Les entrées décélèrent avec une courbe de type ease-out, si bien que le mouvement démarre vite et se pose en douceur.

02 Trouvez celui qui vous convient

Quand utiliser le skill motion-design

Utilisez le skill motion-design dans Claude Code ou Codex lorsque la tâche concerne le mouvement et la vidéo de ce type. Adéquation et limites ci-dessous proviennent du fichier propre au skill.

Bon choix

Animations d'UI telles que les boutons, cartes, modales et transitions de page
Micro-interactions et animations de retour
États de chargement, de succès et d’erreur
Planifier des animations déclenchées au défilement ou basées sur la progression

Connaître les limites

Les scènes comportant trois éléments ou plus ne peuvent pas avoir plus d’un tiers de ces éléments en mouvement actif au même instant.
Retour d’erreur avec effet de ressort : les états d’erreur n’ont pas de dépassement, car les erreurs doivent paraître fermes.

Quoi fournir

La cible émotionnelleDécidez d’abord ce que le spectateur doit ressentir, en choisissant entre joie, calme, urgence ou élégance.
Un archétype de personnalité de mouvementNommez la personnalité pour que le timing, l’easing et le dépassement restent cohérents : ludique, premium, corporate ou énergique.
La propriété principalePrécisez ce qui bouge réellement — position, échelle, rotation ou opacité — avant d’écrire la moindre animation.

03 Dans le skill

Règles que le skill de motion design donne à Claude Code et Codex

8 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

Pas d’easing linéaire pour un mouvement spatial
Le mouvement spatial doit utiliser des courbes d’easing ; le linéaire est réservé aux spinners et barres de progression uniquement.
Jamais l’opacité seule pour un changement d’état
Les changements d’état importants doivent combiner l’opacité avec la position ou l’échelle plutôt qu’un simple fondu sur place.
Conserver les trois couches de mouvement
Chaque animation porte une action principale, une richesse secondaire et une vie ambiante en arrière-plan ; une animation plate est une animation à laquelle il manque une couche.
Par défaut, corporate pour l’UI
Lorsqu’aucune personnalité n’est indiquée, utilisez corporate pour le travail d’UI et ludique pour les illustrations.
Rendre les entrées plus longues que les sorties
Les entrées durent 30 à 50 % plus longtemps que les sorties, car les utilisateurs se préoccupent davantage de ce qui apparaît.
Ne jamais traverser un tiers de l’écran sans étape intermédiaire
Aucun mouvement ne parcourt plus d’1/3 de l’écran sans un changement de keyframe intermédiaire.
Plafonner le décalage total
Quel que soit le motif de décalage utilisé, le budget de délai total doit rester sous 500ms.
Appliquer les principes Disney
Les principes d’animation Disney sont attendus, en particulier l’anticipation et le prolongement du mouvement.

04 Mettez-le en pratique

Installer motion-design dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter motion-design à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal

npx skills add https://github.com/LottieFiles/motion-design-skill --skill motion-design

Forme générique de la CLI skills pour skills/motion-design/SKILL.md ; le dépôt peut documenter son propre chemin.

Donner au skill une première tâche de motion et vidéo

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

Starter prompt

Add a card entrance to [the pricing section] of my [React dashboard]. The cards should feel Premium: start 20px below target at opacity 0, take a slight curve in the path, and let the shadow arrive about 50ms after each card. Stagger the four cards at 60ms with the total under 400ms, and dim the surrounding content to 80%.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

Parcourez l'intégralité de la checklist qualité du fichier pour les critères d'évaluation.
Vérifiez que chaque durée correspond à son type d'élément selon les tableaux de durées.
Si le résultat semble bon marché ou plat, ajoutez un mouvement d'ombre et une vie d'arrière-plan comme couches secondaires et ambiantes.
S'il manque de personnalité, appliquez un archétype de façon cohérente plutôt qu'un easing générique partout.
Vérifiez l'adaptation à la plateforme, à l'accessibilité et à la performance avant de publier.

Dans OpenDesign, importez motion-design depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

Télécharger OpenDesign Lire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author: LottieFiles
Repository: github.com/LottieFiles/motion-design-skill Branche main
Fichier du skill: skills/motion-design/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit f9a8a04
License: MIT D'après LICENSE ; SKILL.md indique « MIT ».
Étoiles du dépôt: 1 626 Instantané GitHub pris le 14 septembre 2026 pour l'ensemble du dépôt LottieFiles/motion-design-skill. Ne constitue pas une note ou un décompte d'usage pour motion-design.
Vérifié par OpenDesign: 2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

Quand l'appliquerLes déclencheurs pour utiliser le skill, ainsi qu'un arbre de décision à quatre questions orientant vers le timing, la personnalité, les principes Disney ou le décalage (stagger).
Trois piliers (CRITIQUE)Intention émotionnelle, narration visuelle et savoir-faire du mouvement, plus les trois couches de mouvement nécessaires à chaque animation.
Personnalité du mouvementQuatre archétypes avec des valeurs de durée, d'easing et de dépassement, plus trois constantes de mouvement de marque.
Sélection des propriétésFait correspondre les objectifs d'effet aux propriétés primaires et secondaires, avec un seuil de simplicité.
Tableau des duréesDurées par élément, mise à l'échelle selon la distance, ratio entrée/sortie et timings de retour interactif.
Sélection de l'easingRègles d'easing directionnel, standards cubic-bezier de l'industrie, et échelles de durée et de dépassement basées sur le matériau.
Motifs courantsRecettes étape par étape pour l'appui sur bouton, l'entrée de carte, l'état de réussite et la secousse d'erreur.
Essentiels de la chorégraphieÉlément principal, cohérence spatiale, contre-mouvement, les règles du 1/3 et les budgets de délai de décalage (stagger).
Carte émotion-mouvementSept émotions associées au caractère, à la trajectoire, à l'easing et à la durée, plus les significations de la trajectoire comme langage.
Classification du poidsÉléments lourds, moyens et légers avec conseils sur la durée, le dépassement et l'amortissement.
Règles de qualitéPoints CRITIQUES à ne jamais enfreindre et recommandations ÉLEVÉES pour la durée, l'easing et la cohérence.
Référence rapide de dépannageCinq signes révélateurs d'animation avec les causes probables et les corrections, du robotique au plat.

Description du skill lui-même

« Applique les principes de motion design pour créer des animations et transitions techniquement solides et émotionnellement engageantes. Fournit timing, easing, chorégraphie et principes d'animation Disney adaptés à l'UI. À utiliser lors de la création d'animations, transitions, micro-interactions, états de chargement, transitions de page, effets déclenchés au scroll, ou tout travail d'animation. Fonctionne avec CSS, Framer Motion, GSAP, Lottie, Spring ou tout système d'animation. »

Description en front-matter extraite de SKILL.md. Le fichier complet fait environ 12 489 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill motion-design

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

Cela m'enferme-t-il dans une seule bibliothèque d'animation ?

Non. Le fichier indique une prise en charge de CSS, Framer Motion, GSAP, Lottie, Spring ou tout autre système d'animation, si bien que les recommandations portent sur des décisions de timing, d'easing et de chorégraphie plutôt que sur du code spécifique à une bibliothèque.

Combien de temps doit durer une transition de modale ?

Le tableau des durées attribue 300-400 ms aux modales et boîtes de dialogue, présenté comme un changement de focus. À titre de contraste, les infobulles et micro-retours se situent entre 80 et 120 ms, car ils doivent sembler instantanés.

Un élément élastique devrait-il rebondir plus qu'une carte en papier ?

Oui. La table d'accélération basée sur les matériaux ajuste la durée et le dépassement selon le matériau implicite : l'élastique applique une échelle de durée de 0,8x avec 15-25 % de dépassement, tandis que le papier reste à 1,0x avec 3-5 % de dépassement.

Motion Design

Exécuter motion-design sur une tâche réelle de motion et vidéo.

Téléchargez OpenDesign, importez motion-design depuis son lien SKILL.md, collez le prompt ci-dessus et lisez le plan avant le résultat.

Télécharger OpenDesign Parcourir tous les skills