motion-principles

Files (2)

• SKILL.md
• skill.json

SKILL.md (first lines)

# Motion-Principles : les 12 principes Disney pour agents

Concepts issus de la vidéo « 8 outils motion design » de Simon De Lima (oct. 2026). Skill rédigé de zéro, sans reprise de son contenu.

Ces 12 principes (Disney, années 1930) sont ce qui sépare une animation « faite par un humain » d'une animation « faite par un robot ». Les appliquer à chaque animation produite, quel que soit l'outil.

## Les 12 principes, en règles pratiques

1. **Écrasement et étirement** : un objet qui bouge se déforme légèrement (une balle qui rebondit s'écrase à l'impact). En UI : un bouton « respire » quand on clique.
2. **Anticipation** : un petit mouvement inverse avant l'action principale (recul avant le saut). En UI : léger retrait avant l'apparition d'un menu.
3. **Mise en scène** : guider l'œil vers l'essentiel, un seul point focal à la fois.
4. **Enchaînement (pose à pose)** : planifier les positions clés d'abord, remplir les intervalles ensuite. C'est le storyboard appliqué à l'animation.
5. **Suivi et chevauchement** : les parties d'un objet ne bougent pas toutes en même temps (les cheveux suivent la tête). En UI : effet stagger, les éléments arrivent en cascade.
6. **Ralentis en entrée et sortie** : tout accélère et décélère (easing), rien ne bouge à vitesse constante sauf intention.
7. **Arcs** : les mouvements naturels suivent des courbes, pas des lignes droites.
8. **Action secondaire** : un geste secondaire renforce l'action principale (un personnage qui marche balance les bras). En UI : une ombre qui suit un soulèvement.
9. **Timing** : la durée raconte la physique (lourd = lent, léger = rapide) et l'émotion.
10. **Exagération** : pousser un peu plus loin que le réalisme pour que l'effet se voie.
11. **Dessin solide** : volumes cohérents, pas de déformation qui casse l'objet (sauf l'écrasement voulu du principe 1).
12. **Attrait** : le résultat doit donner envie de regarder : lisible, élégant, intentionnel.

## Utilisation

Avant de valider une animation, passer la checklist : easing présent (6) ? durées crédibles (9) ? un seul point focal (3) ? cascade plutôt que tout-en-même-temps (5) ? Si une animation « fait robot », c'est presque toujours le principe 6 ou le 9 qui manque.

From BlackAngel242/skill-market, MIT.

More from BlackAngel242/skill-market