Motion.dev Animations Skill MCP — Casos de uso, Instalar & Demo ao vivo

Por que usar

Principais recursos

Ativa automaticamente em prompts de animação/Motion.dev
Padrões de entrada, rolagem, gesto, micro e animação de layout
Honors prefere movimento reduzido por padrão
Visa 60fps+, pacote <50KB, zero mudança de layout
Transformações aceleradas por GPU; sem problemas com adereços de layout

Demo ao vivo

Como fica na prática

motion-dev-animations-skill.replay ▶ pronto

0/0

Instalar

Escolha seu cliente

~/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
    }
  }
}

Abra Claude Desktop → Settings → Developer → Edit Config. Reinicie após salvar.

~/.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 usa o mesmo esquema mcpServers que o Claude Desktop. Config de projeto vence a global.

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
    }
  }
}

Clique no ícone MCP Servers na barra lateral do Cline, depois "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
    }
  }
}

Mesmo formato do Claude Desktop. Reinicie o Windsurf para aplicar.

~/.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"
      ]
    }
  ]
}

O Continue usa um array de objetos de servidor em vez de um 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"
        ]
      }
    }
  }
}

Adicione em context_servers. Zed recarrega automaticamente ao salvar.

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

Uma linha só. Verifique com claude mcp list. Remova com claude mcp remove.

Casos de uso

Usos do mundo real: Motion.dev Animations Skill

Adicione uma entrada fade-up de herói com escalonamento

👤 Desenvolvedores de front-end ajustando páginas de destino ⏱ ~15 min beginner

Quando usar: Seu herói parece estático e você deseja uma animação de carregamento refinada.

Pré-requisitos

Reagir + Movimento.dev — npm eu movimento
Habilidade instalada — git clone em ~/.claude/skills/

Fluxo

Descreva o efeito

Adicione uma entrada gradual escalonada ao H1, subtítulo e CTA do herói. Escalonamento de 60ms.✓ Copiado

→ Código Motion.dev com motion.div, mola de transição, atraso via escalonamento
Fallback de movimento reduzido

Certifique-se de que o movimento reduzido prefere pular a animação de forma limpa.✓ Copiado

→ gancho useReducedMotion ou consulta de mídia CSS aplicada

Resultado: Um herói que se sente vivo sem sacrificar a acessibilidade.

Armadilhas

Animando propriedades que acionam o layout (largura, parte superior) — Em vez disso, use transformação (tradução/escala) — acelerada por GPU, sem CLS

Combine com: magic-ui-mcp

Crie revelações e paralaxe acionadas por rolagem

👤 Desenvolvedores de front-end com design avançado ⏱ ~25 min intermediate

Quando usar: Sua página de destino longa precisa de seções que se desdobram na rolagem.

Fluxo

Revelar na rolagem

Anime cada seção conforme ela entra na janela de visualização (uma vez, limite de 30%).✓ Copiado

→ useInView com uma vez + valor
Primeiro plano paralaxe

Adicione um deslocamento de paralaxe sutil para o SVG decorativo do primeiro plano.✓ Copiado

→ useScroll + useTransform mapeando scrollYProgress para y

Resultado: Experiência de rolagem que adiciona profundidade sem distração.

Armadilhas

Paralaxe que causa enjôo — Mantenha os deslocamentos pequenos e pule totalmente sob preferência de movimento reduzido

Crie um cartão magnético arrastável com suspensão flutuante

👤 Designers de interação/desenvolvedores frontend ⏱ ~20 min intermediate

Quando usar: O cartão do produto precisa de polimento de microinteração.

Fluxo

Elevação flutuante

Ao passar o mouse: levante 4px, escala de sombra sutil; volte de licença.✓ Copiado

→ whileHover com primavera; Transformações compatíveis com GPU
Arrasto magnético

Torne-o arrastável com limites elásticos, dragElastic 0,15.✓ Copiado

→ arrastar + arrastarRestrições + arrastarElastic definido corretamente

Resultado: Uma deliciosa interação com cartão sem custo de desempenho.

Animar reordenação de lista com layout

👤 Desenvolvedores de front-end criando painéis/galerias de tarefas ⏱ ~25 min intermediate

Quando usar: A reordenação da sua lista parece chocante; você deseja transições suaves.

Fluxo

Habilitar layout em itens

Adicione animações de layout aos itens da lista; animar entrada/saída também.✓ Copiado

→ <layout motion.li> + AnimatePresence
Movimento reduzido

Desative as animações de layout em preferência de movimento reduzido.✓ Copiado

→ Aplicado condicional; reordenação instantânea para usuários que solicitaram

Resultado: Reordenamentos que parecem físicos, mas respeitam as preferências do usuário.

Combinações

Combine com outros MCPs para 10× de alavancagem

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

Magic UI para componentes pré-construídos, motion.dev para bits personalizados

Use o letreiro do Magic UI para logotipos; motion.dev para uma paralaxe de rolagem personalizada abaixo.✓ Copiado

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

Movimento de auditoria para suporte de movimento reduzido

Depois de adicionar animações, audite com scope=motion para capturar regressões de movimento reduzido.✓ Copiado

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

Figma-to-code + animações em um fluxo

Converta o quadro Figma; em seguida, adicione as animações de foco e entrada especificadas.✓ Copiado

Ferramentas

O que este MCP expõe

Ferramenta	Entradas	Quando chamar	Custo
motion-dev (SKILL)	describe the animation (element + intent + constraints)	Sempre que você quiser código de animação, esp. com restrições de acessibilidade e desempenho	0

Custo e limites

O que custa rodar

Cota de API: Nenhum
Tokens por chamada: Pequeno para código; grande somente se você despejar componentes complexos
Monetário: Livre
Dica: Descreva bem a intenção da animação - 'fade-up com escalonamento de 60 ms, duração de 200 ms' batidas 'torná-la agradável'.

Segurança

Permissões, segredos, alcance

Armazenamento de credenciais: Nenhum

Saída de dados: Nenhum da habilidade; rede não envolvida

O código de animação gerado é tão seguro quanto a sua revisão – verifique as opções de movimento reduzido e suporte de layout antes do envio.

Solução de problemas

Erros comuns e correções

Jank na rolagem

Verifique se você está animando transformações, não acessórios de layout (largura/parte superior). Use a mudança de vontade com moderação.

Verificar: Chrome DevTools → Performance → layout shift count

Animação ignorada em movimento reduzido

Envolva com useReducedMotion e cause um curto-circuito nas variantes de animação.

Verificar: System → Motion preferences → reduce motion; reload

Pacote grande depois de adicionar movimento

Importe apenas o que você precisa de 'motion/react'; evite reexportar tudo.

Verificar: Bundle analyzer on the chunks

Alternativas

Motion.dev Animations Skill vs. outros

Alternativa	Quando usar	Troca
magic-ui-mcp	Você deseja componentes animados pré-construídos, não movimentos personalizados	Menos personalizado, mais rápido de adotar
cc-frontend-skill	Você deseja orientação geral de front-end, não Motion.dev especificamente	Não focado em animação
excalidraw-skill	Você quer diagramas, não animações da web	Problema diferente

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills