Applica i 12 principi dell'animazione Disney alle interfacce web. Da utilizzare durante l'implementazione del movimento, la revisione della qualità dell'animazione, la progettazione di microinterazioni o la creazione di un'interfaccia utente viva. Trigger su attività che coinvolgono animazioni CSS, transizioni, librerie di movimento, curve di andamento, molle o feedback UX.
Installa rapidamente la skill AI 12-principles-of-animation nel tuo ambiente di sviluppo tramite riga di comando
Fonte: raphaelsalaja/userinterface-wiki.
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 |
Campi e comandi stabili per citazioni AI/ricerca.
npx skills add https://github.com/raphaelsalaja/userinterface-wiki --skill 12-principles-of-animationApplica i 12 principi dell'animazione Disney alle interfacce web. Da utilizzare durante l'implementazione del movimento, la revisione della qualità dell'animazione, la progettazione di microinterazioni o la creazione di un'interfaccia utente viva. Trigger su attività che coinvolgono animazioni CSS, transizioni, librerie di movimento, curve di andamento, molle o feedback UX. Fonte: raphaelsalaja/userinterface-wiki.
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/raphaelsalaja/userinterface-wiki --skill 12-principles-of-animation 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
https://github.com/raphaelsalaja/userinterface-wiki