Che cos'è web-motion-design?
Da utilizzare durante la creazione di animazioni CSS, transizioni JavaScript, movimento React/Vue o qualsiasi lavoro di animazione basato su browser. Fonte: dylantarre/animation-principles.
·web-motion-design
*
web-motion-design
✓dylantarre/animation-principlesGitHub: dylantarre/animation-principlesFonte: dylantarre/animation-principles
Da utilizzare durante la creazione di animazioni CSS, transizioni JavaScript, movimento React/Vue o qualsiasi lavoro di animazione basato su browser.
Installazione
Come installare web-motion-design
Installa rapidamente la skill AI web-motion-design nel tuo ambiente di sviluppo tramite riga di comando
- Apri il terminale: Apri il tuo terminale o strumento da riga di comando (Terminal, iTerm, Windows Terminal, ecc.)
- Esegui il comando di installazione: Copia ed esegui questo comando: npx skills add https://github.com/dylantarre/animation-principles --skill web-motion-design
- Verifica l'installazione: Dopo l'installazione, la skill verrà configurata automaticamente nel tuo ambiente AI di coding e sarà pronta all'uso in Claude Code, Cursor o OpenClaw
Fonte: dylantarre/animation-principles.
SKILL.md
Visualizza rawApply 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 |
Fatti (pronti per citazione)
Campi e comandi stabili per citazioni AI/ricerca.
- Comando di installazione
npx skills add https://github.com/dylantarre/animation-principles --skill web-motion-design- Categoria
- *Creatività
- Verificato
- ✓
- Prima apparizione
- 2026-02-19
- Aggiornato
- 2026-03-10
Risposte rapide
Come installo web-motion-design?
Apri il tuo terminale o strumento da riga di comando (Terminal, iTerm, Windows Terminal, ecc.) Copia ed esegui questo comando: npx skills add https://github.com/dylantarre/animation-principles --skill web-motion-design Dopo l'installazione, la skill verrà configurata automaticamente nel tuo ambiente AI di coding e sarà pronta all'uso in Claude Code, Cursor o OpenClaw
Dov'è il repository sorgente?
https://github.com/dylantarre/animation-principles
Dettagli
- Categoria
- *Creatività
- Fonte
- skills.sh
- Prima apparizione
- 2026-02-19