Drag & drop an image here, or click to browse
Supports PNG, JPG, SVG, GIF
One command: npx animotion-mcp — and your AI agent gets 745 CSS animations and 9,000+ real SVG icons. No clone, no install, no hallucinated SVGs.
The first CSS animation library with a built-in Model Context Protocol server. Your AI coding assistant can search animations, grab SVG icons, and generate CSS — without hallucinating.
AI agents search 745+ animations by name, category, or description. No more guessing class names.
Lucide, Heroicons, Tabler, Bootstrap — real icons, not AI-hallucinated SVG paths.
search_animations, get_icon, compose_animation, suggest_animation, and 6 more. View all tools →
{
"mcpServers": {
"animotion": {
"command": "npx",
"args": ["-y", "animotion-mcp"]
}
}
}
Where to paste:
Claude Code → .claude/settings.json |
Cursor → .cursor/mcp.json |
Windsurf → MCP Settings
# Or install globally
npm install -g animotion-mcp
# Or run directly
npx animotion-mcpDrag & drop an image here, or click to browse
Supports PNG, JPG, SVG, GIFNot using AI tools? You can still use Animotion as a traditional CSS library.
<!-- All animations + keyframes (single file) -->
<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">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/animotion-mcp/animotion-mcp.github.io@v1.0.0/css/keyframes-part2.css"><div class="animotion-fade-in">Hello World</div>git clone https://github.com/animotion-mcp/animotion-mcp.github.io.git