Motion.dev Animations Skill — Установка & Живое демо

Зачем использовать

Ключевые функции

Автоматически активируется по запросам анимации/Motion.dev.
Шаблоны анимации входа, прокрутки, жестов, микроанимаций и макетов
По умолчанию Honors предпочитает ограниченное движение
Целевое значение: 60 кадров в секунду и выше, пакет <50 КБ, нулевой сдвиг макета
Преобразования с ускорением на графическом процессоре; никаких рывков из реквизита макета

Живое демо

Как выглядит на практике

motion-dev-animations-skill.replay ▶ готово

0/0

Установка

Репозиторий автора · Официальная документация Claude Skills

Сценарии использования

Реальные сценарии: Motion.dev Animations Skill

Добавьте постепенное появление героя с ошеломлением.

👤 Разработчики внешнего интерфейса настраивают целевые страницы ⏱ ~15 min beginner

Когда использовать: Ваш герой кажется статичным, и вам нужна отполированная анимация загрузки.

Поток

Опишите эффект

Добавьте плавный переход к H1, подзаголовку и призыву к действию героя. 60 мс колеблется.✓ Скопировано

→ Код Motion.dev с motion.div, переходной пружиной, задержкой через шахматное расположение
Откат с ограниченным движением

Убедитесь, что параметр «предпочитает уменьшенное движение» четко пропускает анимацию.✓ Скопировано

→ Применен хук useReducedMotion или медиа-запрос CSS

Итог: Герой, который чувствует себя живым, не жертвуя при этом доступностью.

Подводные камни

Анимация свойств, запускающих макет (ширина, верх) — Вместо этого используйте преобразование (перевод/масштабирование) — с ускорением на графическом процессоре, без CLS.

Сочетать с: magic-ui-mcp

Создание эффектов прокрутки и параллакса

👤 Разработчики внешнего интерфейса, ориентированные на дизайн ⏱ ~25 min intermediate

Когда использовать: На вашей длинной целевой странице должны быть разделы, которые разворачиваются при прокрутке.

Поток

Показать при прокрутке

Анимируйте каждый раздел при его появлении в окне просмотра (один раз, порог 30%).✓ Скопировано

→ использоватьInView с один раз + сумма
Параллакс на переднем плане

Добавьте небольшое смещение параллакса для декоративного SVG переднего плана.✓ Скопировано

→ useScroll + useTransform отображает прокрутку YProgress на y

Итог: Прокрутка добавляет глубины, не отвлекая внимания.

Подводные камни

Параллакс, вызывающий укачивание — Сохраняйте смещения небольшими и полностью пропускайте их при предпочтении уменьшенного движения.

Создайте перетаскиваемую магнитную карту с помощью подъемника при наведении

👤 Интерактивные дизайнеры/фронтенд-разработчики ⏱ ~20 min intermediate

Когда использовать: Карточка товара нуждается в доработке микровзаимодействий.

Поток

Ховер-лифт

При наведении: подъем на 4 пикселя, тонкий масштаб тени; вернуться в отпуск.✓ Скопировано

→ whileHover с пружиной; Преобразования, дружественные к графическому процессору
Магнитное сопротивление

Сделайте его перетаскиваемым с помощью эластичных границ, dragElastic 0.15.✓ Скопировано

→ перетаскивание + перетаскиваниеConstraints + перетаскиваниеЭластик настроены правильно

Итог: Восхитительное взаимодействие с картами без затрат на производительность.

Анимация изменения порядка списка с помощью макета

👤 Разработчики внешнего интерфейса создают доски задач/галереи ⏱ ~25 min intermediate

Когда использовать: Изменение порядка списка вызывает раздражение; вам нужны плавные переходы.

Поток

Включить макет для элементов

Добавьте анимацию макета к элементам списка; анимировать вход/выход тоже.✓ Скопировано

→ <макет motion.li> + AnimatePresence
Пониженное движение

Отключите анимацию макета в разделе «Предпочитаете уменьшенное движение».✓ Скопировано

→ Условное применение; мгновенное изменение порядка для пользователей, которые об этом просили

Итог: Изменения порядка, которые кажутся физическими, но учитывают предпочтения пользователя.

Комбинации

Сочетайте с другими MCP — эффект x10

motion-dev-animations-skill + magic-ui-mcp

Magic UI для готовых компонентов, motion.dev для пользовательских битов.

Используйте область Magic UI для логотипов; motion.dev для пользовательского параллакса прокрутки ниже.✓ Скопировано

motion-dev-animations-skill + claude-design-auditor-skill

Аудит движения для поддержки уменьшенного движения

После добавления анимации проведите аудит с помощью параметраscope=motion, чтобы выявить регрессии с уменьшенным движением.✓ Скопировано

motion-dev-animations-skill + claude-code-design-skills

Figma-to-code + анимации в одном потоке

Преобразуйте кадр Figma; затем добавьте указанные анимации наведения и входа.✓ Скопировано

Инструменты

Что предоставляет этот MCP

Инструмент	Входные данные	Когда вызывать	Стоимость
motion-dev (SKILL)	describe the animation (element + intent + constraints)	В любое время, когда вам понадобится код анимации, особенно. с ограничениями доступности и производительности	0

Стоимость и лимиты

Во что обходится

Квота API: Никто
Токенов на вызов: Маленький для кода; большой, только если вы сбрасываете сложные компоненты
Деньги: Бесплатно
Совет: Подробно опишите суть анимации: «затухание с шагом 60 мс и длительностью 200 мс» означает «сделать это красиво».

Безопасность

Права, секреты, радиус поражения

Хранение учётных данных: Никто

Исходящий трафик: Ничего из навыка; сеть не задействована

Сгенерированный анимационный код безопасен настолько, насколько безопасен ваш обзор — перед отправкой проверьте варианты уменьшенного движения и макета.

Устранение неполадок

Частые ошибки и исправления

Джанк при прокрутке

Убедитесь, что вы анимируете преобразования, а не реквизиты макета (ширина/верх). Используйте will-change умеренно.

Проверить: Chrome DevTools → Performance → layout shift count

Анимация игнорируется при уменьшенном движении

Оберните useReducedMotion и сократите варианты анимации.

Проверить: System → Motion preferences → reduce motion; reload

Большой пакет после добавления движения

Импортируйте из «motion/react» только то, что вам нужно; избегайте реэкспорта всего.

Проверить: Bundle analyzer on the chunks

Альтернативы

Motion.dev Animations Skill в сравнении

Альтернатива	Когда использовать	Компромисс
magic-ui-mcp	Вам нужны предварительно созданные анимированные компоненты, а не пользовательские движения.	Меньше пользовательских настроек, быстрее внедрение
cc-frontend-skill	Вам нужно общее руководство по интерфейсу, а не конкретно по Motion.dev.	Не ориентирован на анимацию
excalidraw-skill	Вам нужны диаграммы, а не веб-анимация	Другая проблема

Ещё

Ресурсы

📖 Читать официальный README на GitHub

🐙 Открытые задачи

🔍 Все 400+ MCP-серверов и Skills