12-principles-of-animation
✓Appliquez les 12 principes d'animation de Disney aux interfaces Web. À utiliser lors de la mise en œuvre d'un mouvement, de l'examen de la qualité de l'animation, de la conception de micro-interactions ou de la création d'une interface utilisateur vivante. Se déclenche sur des tâches impliquant des animations CSS, des transitions, des bibliothèques de mouvements, des courbes d'atténuation, des ressorts ou des commentaires UX.
Installation
SKILL.md
Disney animators codified these principles in the 1930s to make drawings feel real. We use them to make pixels feel human. The problems are surprisingly similar.
| 1 | Squash and Stretch | Convey weight and elasticity in morphing elements | | 2 | Anticipation | Prepare users for what comes next (wind-up before action) | | 3 | Staging | Direct attention through sequential animation | | 4 | Straight Ahead & Pose to Pose | Define keyframes, let browser interpolate |
| 5 | Follow Through & Overlapping | Use springs for organic overshoot-and-settle | | 6 | Slow In & Slow Out | Apply easing curves for natural acceleration | | 7 | Arcs | Add curved paths for organic movement | | 8 | Secondary Action | Reinforce primary actions with subtle flourishes | | 9 | Timing | Keep interactions under 300ms, be consistent |
Faits (prêts à citer)
Champs et commandes stables pour les citations IA/recherche.
- Commande d'installation
npx skills add https://github.com/raphaelsalaja/userinterface-wiki --skill 12-principles-of-animation- Catégorie
- *Créativité
- Vérifié
- ✓
- Première apparition
- 2026-02-01
- Mis à jour
- 2026-02-18
Réponses rapides
Qu'est-ce que 12-principles-of-animation ?
Appliquez les 12 principes d'animation de Disney aux interfaces Web. À utiliser lors de la mise en œuvre d'un mouvement, de l'examen de la qualité de l'animation, de la conception de micro-interactions ou de la création d'une interface utilisateur vivante. Se déclenche sur des tâches impliquant des animations CSS, des transitions, des bibliothèques de mouvements, des courbes d'atténuation, des ressorts ou des commentaires UX. Source : raphaelsalaja/userinterface-wiki.
Comment installer 12-principles-of-animation ?
Ouvrez votre terminal ou outil de ligne de commande (Terminal, iTerm, Windows Terminal, etc.) Copiez et exécutez cette commande : npx skills add https://github.com/raphaelsalaja/userinterface-wiki --skill 12-principles-of-animation Une fois installé, le skill sera automatiquement configuré dans votre environnement de programmation IA et prêt à être utilisé dans Claude Code ou Cursor
Où se trouve le dépôt source ?
https://github.com/raphaelsalaja/userinterface-wiki
Détails
- Catégorie
- *Créativité
- Source
- skills.sh
- Première apparition
- 2026-02-01