Примените 12 принципов анимации Диснея к веб-интерфейсам. Используйте при реализации движения, проверке качества анимации, разработке микровзаимодействий или придании пользовательскому интерфейсу ощущения живости. Запускается при выполнении задач, связанных с анимацией CSS, переходами, библиотеками движений, кривыми замедления, пружинами или обратной связью UX.
Быстро установите AI-навык 12-principles-of-animation в вашу среду разработки через командную строку
Источник: 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 |
Стабильные поля и команды для ссылок в AI/поиске.
npx skills add https://github.com/raphaelsalaja/userinterface-wiki --skill 12-principles-of-animationПримените 12 принципов анимации Диснея к веб-интерфейсам. Используйте при реализации движения, проверке качества анимации, разработке микровзаимодействий или придании пользовательскому интерфейсу ощущения живости. Запускается при выполнении задач, связанных с анимацией CSS, переходами, библиотеками движений, кривыми замедления, пружинами или обратной связью UX. Источник: raphaelsalaja/userinterface-wiki.
Откройте терминал или инструмент командной строки (Terminal, iTerm, Windows Terminal и т.д.) Скопируйте и выполните эту команду: npx skills add https://github.com/raphaelsalaja/userinterface-wiki --skill 12-principles-of-animation После установки навык будет автоматически настроен в вашей AI-среде разработки и готов к использованию в Claude Code, Cursor или OpenClaw
https://github.com/raphaelsalaja/userinterface-wiki