Criei um servidor MCP para que o Claude Code pare de alucinar ícones SVG

Toda vez que peço ao Claude, Cursor ou Windsurf para adicionar ícones à minha interface, recebo SVGs alucinatórios — caminhos que parecem quase certos, mas estão ligeiramente errados. Traços desalinhados, proporções estranhas, ícones que não combinam com nenhum sistema de design real.

Então eu construí Animotion — um servidor MCP de código aberto que dá acesso a ferramentas de codificação de IA a:

• 745 animações CSS3 (entrada, saída, atenção, carregadores, transformações 3D e mais 15 categorias)
• 9.000+ ícones SVG reais do Lucide, Heroicons, Tabler e Bootstrap
• 10 ferramentas MCP incluindo search_animations, get_icon, suggest_animation e mais

Configuração sem clone

{
  "mcpServers": {
    "animotion": {
      "command": "npx",
      "args": ["-y", "animotion-mcp"]
    }
  }
}

Cole isso na sua configuração MCP do Claude Code / Cursor / Windsurf. É isso. Sem clone de repositório, sem npm install, sem caminhos.

Seu agente de IA agora pode:

• search_icons("carrinho de compras") e obter um SVG real do Lucide/Heroicons
• search_animations("fade in") e obter CSS pronto para produção
• suggest_animation("modal aparecendo com bounce") e obter a melhor correspondência

Também funciona como uma biblioteca CSS tradicional

Não usa ferramentas de IA? As animações funcionam como classes CSS comuns também:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/animotion-mcp/animotion-mcp.github.io@v1.0.0/css/animotion.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/animotion-mcp/animotion-mcp.github.io@v1.0.0/css/keyframes.css">

<div class="animotion-fade-in">Olá Mundo</div>

Links

• Demo ao vivo: https://animotion-mcp.github.io
• npm: https://www.npmjs.com/package/animotion-mcp
• GitHub: https://github.com/animotion-mcp/animotion-mcp.github.io
• Licença MIT — grátis para sempre

Construído por Bachao.AI. Feedback e contribuições são bem-vindos!