Что такое page-transitions?
Используйте при реализации изменений маршрута, переходов просмотра, открытия/закрытия модальных окон или анимации навигации в веб-приложениях и мобильных приложениях. Источник: dylantarre/animation-principles.
·page-transitions
*
page-transitions
✓dylantarre/animation-principlesGitHub: dylantarre/animation-principlesИсточник: dylantarre/animation-principles
Используйте при реализации изменений маршрута, переходов просмотра, открытия/закрытия модальных окон или анимации навигации в веб-приложениях и мобильных приложениях.
Как установить page-transitions
Быстро установите AI-навык page-transitions в вашу среду разработки через командную строку
- Откройте терминал: Откройте терминал или инструмент командной строки (Terminal, iTerm, Windows Terminal и т.д.)
- Выполните команду установки: Скопируйте и выполните эту команду: npx skills add https://github.com/dylantarre/animation-principles --skill page-transitions
- Проверьте установку: После установки навык будет автоматически настроен в вашей AI-среде разработки и готов к использованию в Claude Code, Cursor или OpenClaw
Источник: dylantarre/animation-principles.
SKILL.md
Показать rawApply Disney's 12 animation principles to route changes, view transitions, and navigation patterns.
| Squash & Stretch | Entering page elastic effect | | Anticipation | Exit animation before enter | | Staging | Hero elements bridge views | | Straight Ahead / Pose to Pose | Shared element vs crossfade | | Follow Through / Overlapping | Content settles after nav | | Slow In / Slow Out | Asymmetric enter/exit easing | | Arc | Slide transitions with curve |
| Secondary Action | Background, nav state changes | | Timing | 200-500ms total transition | | Exaggeration | Reserved for emphasis moments | | Solid Drawing | Consistent spatial model | | Appeal | Smooth, oriented navigation |
Факты (для цитирования)
Стабильные поля и команды для ссылок в AI/поиске.
- Команда установки
npx skills add https://github.com/dylantarre/animation-principles --skill page-transitions- Источник
- dylantarre/animation-principles
- Категория
- *Креатив
- Проверено
- ✓
- Впервые замечено
- 2026-03-03
- Обновлено
- 2026-03-10
Короткие ответы
Как установить page-transitions?
Откройте терминал или инструмент командной строки (Terminal, iTerm, Windows Terminal и т.д.) Скопируйте и выполните эту команду: npx skills add https://github.com/dylantarre/animation-principles --skill page-transitions После установки навык будет автоматически настроен в вашей AI-среде разработки и готов к использованию в Claude Code, Cursor или OpenClaw
Где находится исходный репозиторий?
https://github.com/dylantarre/animation-principles
Детали
- Категория
- *Креатив
- Источник
- skills.sh
- Впервые замечено
- 2026-03-03