Motion.dev Animations Skill MCP — Сценарии использования, Установка & Живое демо

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

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

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

Живое демо

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

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

0/0

Установка

Выберите клиент

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "motion-dev-animations-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ],
      "_inferred": false
    }
  }
}

Откройте Claude Desktop → Settings → Developer → Edit Config. Перезапустите после сохранения.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "motion-dev-animations-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ],
      "_inferred": false
    }
  }
}

Cursor использует ту же схему mcpServers, что и Claude Desktop. Конфиг проекта приоритетнее глобального.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "motion-dev-animations-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ],
      "_inferred": false
    }
  }
}

Щёлкните значок MCP Servers на боковой панели Cline, затем "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "motion-dev-animations-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ],
      "_inferred": false
    }
  }
}

Тот же формат, что и Claude Desktop. Перезапустите Windsurf для применения.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "motion-dev-animations-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ]
    }
  ]
}

Continue использует массив объектов серверов, а не map.

~/.config/zed/settings.json

{
  "context_servers": {
    "motion-dev-animations-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
          "~/.claude/skills/motion-dev-animations"
        ]
      }
    }
  }
}

Добавьте в context_servers. Zed перезагружается автоматически.

claude mcp add motion-dev-animations-skill -- git clone https://github.com/199-biotechnologies/motion-dev-animations-skill.git ~/.claude/skills/motion-dev-animations

Однострочная команда. Проверить: claude mcp list. Удалить: claude mcp remove.

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

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

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

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

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

Предварительные требования

Реагировать + Motion.dev — нпм, я движение
Навык установлен — git клонировать в ~/.claude/skills/

Поток

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

Добавьте плавный переход к 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