Anime.js MCP Server

A Model Context Protocol (MCP) server providing AI assistants with comprehensive access to Anime.js animation library components, APIs, examples, and documentation.

Features

• 🎬 Complete Anime.js API Coverage: Access to all major Anime.js functions and properties
• 📚 Rich Documentation: Built-in guides for getting started, easing functions, performance optimization
• 🎯 Interactive Examples: Ready-to-use code examples for common animation patterns
• 🔍 Smart Search: Find relevant examples and documentation quickly
• ⚡ Performance Tips: Best practices for smooth animations
• 🎨 Animation Patterns: Transform, timeline, stagger, SVG, morphing, and more

Installation

Via npm

npm install -g anime-js-mcp-server

Via npx (recommended)

npx anime-js-mcp-server

Usage

Basic Usage

# Start the server
npx anime-js-mcp-server

# With GitHub API token for enhanced features
npx anime-js-mcp-server --github-api-key YOUR_GITHUB_TOKEN

Environment Variables

export GITHUB_PERSONAL_ACCESS_TOKEN=your_token_here
export LOG_LEVEL=info  # debug, info, warn, error

MCP Tools

Component Information

• get_anime_component: Get detailed info about specific Anime.js APIs
• list_anime_components: Browse all available components by category

Examples and Tutorials

• get_anime_example: Get complete code examples for animation patterns
• search_anime_examples: Search through examples by keywords
• get_anime_docs: Access comprehensive documentation topics

Supported Animation Types

Core Animations

• Basic Transforms: translate, rotate, scale, skew
• CSS Properties: opacity, colors, dimensions, positioning
• Timeline Sequences: Complex multi-step animations
• Stagger Effects: Grid-based and directional delays

Advanced Features

• SVG Path Animations: Path following and morphing
• Text Animations: Letter-by-letter effects
• Elastic & Physics: Spring and bounce effects
• Performance Optimization: Hardware acceleration tips

Example Usage with Claude

# Get started with Anime.js
"How do I create a basic slide-in animation?"

# Explore specific features
"Show me timeline examples for sequential animations"

# Search for patterns
"Find examples with stagger effects"

# Get performance tips
"How do I optimize animations for mobile?"

API Reference

Tools Available

Categories

• core: Main animation functions (anime, timeline)
• utilities: Helper functions (stagger, random, set)
• svg: SVG-specific animations (path, morphing)

Example Types

• basic-transform - Simple transform animations
• timeline-sequence - Sequential timeline animations
• stagger-grid - Grid-based stagger effects
• svg-path - SVG path animations
• text-animation - Text effects
• elastic-bounce - Physics-based easing
• morphing - CSS property morphing
• keyframes - Complex keyframe animations

Documentation Topics

• getting-started - Installation and basic usage
• animation-controls - Play, pause, seek controls
• easing - All easing functions and custom curves
• performance - Optimization best practices
• timeline - Timeline and sequencing
• stagger - Stagger effects and patterns

Configuration

Claude Desktop Integration

Using Claude MCP CLI (Recommended)

If you have Claude MCP CLI installed, you can add the server with a single command:

claude mcp 

... [View full README on GitHub](https://github.com/yeshsurya/anime-js-mcp-server#readme)