Qu'est-ce que web-motion-design ?
À utiliser lors de la création d'animations CSS, de transitions JavaScript, de mouvements React/Vue ou de tout travail d'animation basé sur un navigateur. Source : dylantarre/animation-principles.
·web-motion-design
*
web-motion-design
✓dylantarre/animation-principlesGitHub: dylantarre/animation-principlesSource: dylantarre/animation-principles
À utiliser lors de la création d'animations CSS, de transitions JavaScript, de mouvements React/Vue ou de tout travail d'animation basé sur un navigateur.
Installation
Comment installer web-motion-design
Installez rapidement le skill IA web-motion-design dans votre environnement de développement via la ligne de commande
- Ouvrir le Terminal: Ouvrez votre terminal ou outil de ligne de commande (Terminal, iTerm, Windows Terminal, etc.)
- Exécuter la commande d'installation: Copiez et exécutez cette commande : npx skills add https://github.com/dylantarre/animation-principles --skill web-motion-design
- Vérifier l'installation: Une fois installé, le skill sera automatiquement configuré dans votre environnement de programmation IA et prêt à être utilisé dans Claude Code, Cursor ou OpenClaw
Source : dylantarre/animation-principles.
SKILL.md
Voir l'originalApply Disney's 12 animation principles to CSS, JavaScript, and frontend frameworks.
| Squash & Stretch | transform: scale() on interaction states | | Anticipation | Slight reverse movement before action | | Staging | Focus user attention with motion hierarchy | | Straight Ahead / Pose to Pose | JS frame-by-frame vs CSS keyframes | | Follow Through / Overlapping | Staggered child animations, elastic easing |
| Slow In / Slow Out | ease-in-out, cubic-bezier curves | | Arc | motion-path or bezier translate transforms | | Secondary Action | Shadows, glows responding to primary motion | | Timing | Duration: micro 100-200ms, standard 200-400ms | | Exaggeration | Scale beyond 1.0, overshoot animations | | Solid Drawing | Consistent transform-origin, 3D perspective |
Faits (prêts à citer)
Champs et commandes stables pour les citations IA/recherche.
- Commande d'installation
npx skills add https://github.com/dylantarre/animation-principles --skill web-motion-design- Catégorie
- *Créativité
- Vérifié
- ✓
- Première apparition
- 2026-02-19
- Mis à jour
- 2026-03-10
Réponses rapides
Comment installer web-motion-design ?
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/dylantarre/animation-principles --skill web-motion-design Une fois installé, le skill sera automatiquement configuré dans votre environnement de programmation IA et prêt à être utilisé dans Claude Code, Cursor ou OpenClaw
Où se trouve le dépôt source ?
https://github.com/dylantarre/animation-principles
Détails
- Catégorie
- *Créativité
- Source
- skills.sh
- Première apparition
- 2026-02-19