Content
# Animotion
### MCP server for AI agents — 745+ CSS animations, 9,000+ SVG icons. One command: `npx animotion-mcp`
[](LICENSE)
[](https://animotion-mcp.github.io)
[](mcp/)
[](mcp/)
[](https://www.npmjs.com/package/animotion-mcp)
**[Live Demo](https://animotion-mcp.github.io)** | **[API Reference](#api-reference)** | **[MCP Server](#mcp-server-for-ai-agents)** | **[PNG Animator](#png-animator)**
---
## What is Animotion?
Animotion is a production-ready CSS3 animation framework built for the modern web. It provides **745+ hand-crafted animations** across 20 categories, **9,000+ real SVG icons** via MCP (from Lucide, Heroicons, Tabler, Bootstrap), a **PNG Animator** tool, and an **MCP server** so AI agents can search and use animations and icons directly.
Built for everyone — from manual coders to vibe coders, from junior developers to AI agents.
### Key Features
- **745+ CSS3 animations** across 20 categories — the largest collection available
- **9,000+ real SVG icons** via MCP — Lucide, Tabler, Bootstrap, Heroicons, built-in (eliminates AI-generated icons)
- **Zero dependencies** — pure CSS, no JavaScript frameworks required
- **GPU-optimized** — animations use `transform` and `opacity` for 60fps performance
- **Auto-playing previews** — smooth, no GPU overload, auto-play toggle available
- **Custom text preview** — type your name/brand and see it animated across all 745 animations
- **Copy-paste ready** — every animation has a single CSS class
- **AI-friendly** — MCP v2 server with 10 tools for Claude Code, Cursor, Windsurf, Cline
- **PNG Animator** — upload any image, apply animation, export CSS
- **Utility classes** — control duration, delay, easing, iteration, stagger
- **Syntax-highlighted code** — modal shows CSS/HTML/JS with colored syntax
- **URL routing** — deep-link to any animation or category via hash
- **Accessibility** — skip link, ARIA labels, focus trap, `prefers-reduced-motion`
- **MIT Licensed** — free forever, commercial use allowed
---
## Quick Start
### Option 1: MCP for AI Agents (Recommended)
Add to your Claude Code / Cursor / Windsurf MCP config:
```json
{
"mcpServers": {
"animotion": {
"command": "npx",
"args": ["-y", "animotion-mcp"]
}
}
}
```
That's it. No clone, no install. Your AI agent now has access to 745 animations and 9,000+ SVG icons.
[](https://www.npmjs.com/package/animotion-mcp)
### Option 2: CDN (Manual CSS)
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/animotion-mcp/animotion-mcp.github.io@main/css/keyframes.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/animotion-mcp/animotion-mcp.github.io@main/css/keyframes-part2.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/animotion-mcp/animotion-mcp.github.io@main/css/utilities.css">
```
```html
<div class="animotion-fade-in">Hello World</div>
```
### Option 3: Download
```bash
git clone https://github.com/animotion-mcp/animotion-mcp.github.io.git
```
---
## Usage
### Basic — Add a class
```html
<!-- Fade in an element -->
<div class="animotion-fade-in">Welcome</div>
<!-- Bounce a button -->
<button class="animotion-bounce">Click Me</button>
<!-- Spin a loader -->
<div class="animotion-spinner-border animotion-infinite"></div>
<!-- Typewriter text -->
<p class="animotion-typewriter">Loading system...</p>
```
### With Utility Classes
Control duration, delay, easing, and more:
```html
<!-- Slow fade with delay -->
<div class="animotion-fade-in-up animotion-duration-1500 animotion-delay-500">
Appears after 500ms, takes 1.5s
</div>
<!-- Bouncy easing -->
<div class="animotion-zoom-in animotion-ease-spring">
Spring effect
</div>
<!-- Infinite loop -->
<div class="animotion-float animotion-infinite">
Floating element
</div>
<!-- Alternate direction -->
<div class="animotion-pulse animotion-infinite animotion-alternate">
Pulsing
</div>
```
### Staggered Children
Animate list items with increasing delays:
```html
<ul class="animotion-stagger">
<li class="animotion-fade-in-up">Item 1 (0ms delay)</li>
<li class="animotion-fade-in-up">Item 2 (50ms delay)</li>
<li class="animotion-fade-in-up">Item 3 (100ms delay)</li>
<li class="animotion-fade-in-up">Item 4 (150ms delay)</li>
</ul>
<!-- Wider stagger (100ms increments) -->
<div class="animotion-stagger-100">
<div class="animotion-slide-in-left">Card 1</div>
<div class="animotion-slide-in-left">Card 2</div>
<div class="animotion-slide-in-left">Card 3</div>
</div>
```
### JavaScript — Trigger Programmatically
```javascript
// Add animation to an element
const el = document.querySelector('.my-element');
el.classList.add('animotion-bounce-in');
// Replay an animation
function replay(element, animClass) {
element.classList.remove(animClass);
void element.offsetWidth; // force reflow
element.classList.add(animClass);
}
// Listen for animation completion
el.addEventListener('animationend', () => {
console.log('Animation finished!');
el.classList.remove('animotion-bounce-in'); // cleanup
});
// Chain animations
async function chainAnimations(el, animations) {
for (const anim of animations) {
el.classList.add(anim);
await new Promise(resolve =>
el.addEventListener('animationend', resolve, { once: true })
);
el.classList.remove(anim);
}
}
// Usage: fade in, then pulse, then glow
chainAnimations(myElement, [
'animotion-fade-in',
'animotion-pulse',
'animotion-glow-pulse'
]);
```
### Scroll-Triggered Animations
Use Intersection Observer to animate elements as they enter the viewport:
```javascript
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const anim = entry.target.dataset.animotion;
entry.target.classList.add(anim);
observer.unobserve(entry.target);
}
});
}, { threshold: 0.1 });
// Mark elements for scroll animation
document.querySelectorAll('[data-animotion]').forEach(el => {
observer.observe(el);
});
```
```html
<div data-animotion="animotion-fade-in-up">Animates on scroll</div>
<div data-animotion="animotion-slide-in-left">Slides in on scroll</div>
<div data-animotion="animotion-zoom-in">Zooms in on scroll</div>
```
### Accessibility — Reduced Motion
Animotion respects `prefers-reduced-motion`. Add the utility class:
```html
<div class="animotion-fade-in animotion-respect-motion">
This animation is disabled for users who prefer reduced motion
</div>
```
Or handle it globally:
```css
@media (prefers-reduced-motion: reduce) {
[class*="animotion-"] {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
```
---
## Animation Categories
| # | Category | Count | Description | Example Classes |
|---|----------|-------|-------------|-----------------|
| 1 | **Entrance** | 65 | Elements appearing on screen | `animotion-fade-in`, `animotion-slide-in-up`, `animotion-zoom-in`, `animotion-bounce-in` |
| 2 | **Exit** | 50 | Elements leaving the screen | `animotion-fade-out`, `animotion-slide-out-down`, `animotion-zoom-out` |
| 3 | **Attention** | 40 | Draw user attention | `animotion-bounce`, `animotion-pulse`, `animotion-shake-x`, `animotion-heartbeat` |
| 4 | **Text** | 50 | Typography animations | `animotion-typewriter`, `animotion-shimmer-text`, `animotion-glitch-text`, `animotion-neon-flicker` |
| 5 | **Background** | 40 | Animated backgrounds | `animotion-gradient-shift`, `animotion-aurora`, `animotion-starfield`, `animotion-particle-field` |
| 6 | **Button** | 40 | Button interactions | `animotion-ripple-click`, `animotion-glow-pulse`, `animotion-shine-sweep`, `animotion-press-3d` |
| 7 | **Card** | 35 | Card animations | `animotion-card-lift`, `animotion-card-flip-3d`, `animotion-glassmorphism`, `animotion-shimmer-loading` |
| 8 | **Loader** | 60 | Spinners & progress | `animotion-spinner-border`, `animotion-dots-wave`, `animotion-bars-wave`, `animotion-orbital` |
| 9 | **Navigation** | 25 | Nav & menu animations | `animotion-underline-grow`, `animotion-hamburger-x`, `animotion-dropdown-slide` |
| 10 | **Form** | 30 | Input & form animations | `animotion-label-float`, `animotion-input-glow-focus`, `animotion-toggle-slide` |
| 11 | **3D Transform** | 35 | 3D perspective effects | `animotion-rotate-x-axis`, `animotion-card-flip-front-back`, `animotion-cube-spin-loader` |
| 12 | **Filter** | 25 | CSS filter animations | `animotion-blur-in`, `animotion-grayscale-to-color`, `animotion-hue-rotate-cycle` |
| 13 | **Micro Interaction** | 40 | UI feedback animations | `animotion-like-bounce`, `animotion-notification-pop`, `animotion-checkmark-draw` |
| 14 | **Scroll** | 25 | Scroll-triggered effects | `animotion-scroll-fade-in`, `animotion-scroll-zoom-in`, `animotion-scroll-clip-reveal` |
| 15 | **Creative** | 40 | Artistic & special effects | `animotion-paint-splash`, `animotion-ink-bleed`, `animotion-fire-flicker`, `animotion-sparkle` |
| 16 | **Fintech** | 30 | Finance & data UI | `animotion-ticker-scroll`, `animotion-price-up`, `animotion-coin-flip`, `animotion-chart-line-draw-fintech` |
| 17 | **Gaming** | 40 | Game UI & physics | `animotion-gravity-fall`, `animotion-health-bar-fill`, `animotion-level-up`, `animotion-teleport` |
| 18 | **E-Commerce** | 25 | Shopping UI animations | `animotion-add-to-cart-bounce`, `animotion-wishlist-heart`, `animotion-shipping-truck` |
| 19 | **Social** | 25 | Social media UI | `animotion-like-heart`, `animotion-story-ring`, `animotion-notification-bell` |
| 20 | **Dashboard** | 25 | Data viz & dashboards | `animotion-chart-line-draw`, `animotion-gauge-needle`, `animotion-kpi-counter` |
---
## Utility Classes Reference
### Duration
| Class | Duration |
|-------|----------|
| `.animotion-duration-100` | 100ms |
| `.animotion-duration-200` | 200ms |
| `.animotion-duration-300` | 300ms |
| `.animotion-duration-400` | 400ms |
| `.animotion-duration-500` | 500ms |
| `.animotion-duration-600` | 600ms |
| `.animotion-duration-700` | 700ms |
| `.animotion-duration-800` | 800ms |
| `.animotion-duration-1000` | 1s |
| `.animotion-duration-1200` | 1.2s |
| `.animotion-duration-1500` | 1.5s |
| `.animotion-duration-2000` | 2s |
| `.animotion-duration-2500` | 2.5s |
| `.animotion-duration-3000` | 3s |
| `.animotion-duration-5000` | 5s |
### Delay
| Class | Delay |
|-------|-------|
| `.animotion-delay-0` | 0ms |
| `.animotion-delay-100` | 100ms |
| `.animotion-delay-200` | 200ms |
| `.animotion-delay-300` | 300ms |
| `.animotion-delay-500` | 500ms |
| `.animotion-delay-700` | 700ms |
| `.animotion-delay-1000` | 1s |
| `.animotion-delay-1500` | 1.5s |
| `.animotion-delay-2000` | 2s |
| `.animotion-delay-3000` | 3s |
### Easing
| Class | Curve | Best For |
|-------|-------|----------|
| `.animotion-ease-linear` | `linear` | Continuous motion |
| `.animotion-ease-in` | `ease-in` | Exit animations |
| `.animotion-ease-out` | `ease-out` | Entrance animations |
| `.animotion-ease-in-out` | `ease-in-out` | Symmetric motion |
| `.animotion-ease-spring` | `cubic-bezier(0.175, 0.885, 0.32, 1.275)` | Bouncy entrances |
| `.animotion-ease-bounce` | `cubic-bezier(0.68, -0.55, 0.265, 1.55)` | Playful UI |
| `.animotion-ease-elastic` | `cubic-bezier(0.68, -0.6, 0.32, 1.6)` | Elastic stretch |
| `.animotion-ease-smooth` | `cubic-bezier(0.4, 0, 0.2, 1)` | Material Design |
| `.animotion-ease-sharp` | `cubic-bezier(0.4, 0, 0.6, 1)` | Quick transitions |
| `.animotion-ease-decelerate` | `cubic-bezier(0, 0, 0.2, 1)` | Smooth stop |
| `.animotion-ease-accelerate` | `cubic-bezier(0.4, 0, 1, 1)` | Smooth start |
| `.animotion-ease-overshoot` | `cubic-bezier(0.34, 1.56, 0.64, 1)` | Overshoot & settle |
### Iteration & Direction
| Class | Effect |
|-------|--------|
| `.animotion-once` | Play once |
| `.animotion-twice` | Play twice |
| `.animotion-thrice` | Play three times |
| `.animotion-infinite` | Loop forever |
| `.animotion-normal` | Normal direction |
| `.animotion-reverse` | Reverse direction |
| `.animotion-alternate` | Alternate direction |
| `.animotion-alternate-reverse` | Alternate starting in reverse |
### Fill Mode & Play State
| Class | Effect |
|-------|--------|
| `.animotion-fill-none` | No fill |
| `.animotion-fill-forwards` | Keep end state |
| `.animotion-fill-backwards` | Apply start state during delay |
| `.animotion-fill-both` | Both forwards and backwards |
| `.animotion-running` | Animation running |
| `.animotion-paused` | Animation paused |
### Performance
| Class | Effect |
|-------|--------|
| `.animotion-gpu` | Force GPU acceleration (`will-change: transform, opacity`) |
| `.animotion-respect-motion` | Disable animation for `prefers-reduced-motion` |
---
## API Reference
Animotion provides a machine-readable JSON API at [`api.json`](https://animotion-mcp.github.io/api.json) for programmatic access.
### Endpoint
```
GET https://animotion-mcp.github.io/api.json
```
### Response Schema
```json
{
"name": "animotion",
"version": "1.0.0",
"totalAnimations": 745,
"totalCategories": 20,
"categories": [
{
"id": "entrance",
"name": "Entrance",
"icon": "→",
"color": "#3b82f6",
"count": 65
}
],
"animations": [
{
"id": "E01",
"name": "Fade In",
"description": "Element fades in from transparent to opaque",
"cssClass": "animotion-fade-in",
"keyframeName": "animotion-fadeIn",
"category": "entrance",
"subcategory": "fade",
"tags": ["fade", "opacity", "entrance", "basic"],
"duration": "0.6s",
"timingFunction": "ease-out",
"iterationCount": "1",
"fillMode": "both",
"demoType": "box",
"css": ".animotion-fade-in { animation: animotion-fadeIn 0.6s ease-out both; }",
"keyframeCSS": "@keyframes animotion-fadeIn { from { opacity: 0; } to { opacity: 1; } }"
}
]
}
```
### Using the API
#### Fetch all animations in a category
```javascript
const response = await fetch('https://animotion-mcp.github.io/api.json');
const data = await response.json();
// Get all loader animations
const loaders = data.animations.filter(a => a.category === 'loader');
console.log(`${loaders.length} loader animations available`);
// Search by name
const searchResults = data.animations.filter(a =>
a.name.toLowerCase().includes('fade')
);
```
#### Get CSS for a specific animation
```javascript
const anim = data.animations.find(a => a.cssClass === 'animotion-bounce-in');
// Inject into page
const style = document.createElement('style');
style.textContent = anim.keyframeCSS + '\n' + anim.css;
document.head.appendChild(style);
// Apply to element
document.querySelector('.my-element').classList.add(anim.cssClass);
```
#### Build a dynamic animation picker
```javascript
const data = await fetch('/api.json').then(r => r.json());
// Populate a <select> dropdown
const select = document.getElementById('animation-picker');
data.categories.forEach(cat => {
const group = document.createElement('optgroup');
group.label = `${cat.name} (${cat.count})`;
data.animations
.filter(a => a.category === cat.id)
.forEach(a => {
const opt = document.createElement('option');
opt.value = a.cssClass;
opt.textContent = a.name;
group.appendChild(opt);
});
select.appendChild(group);
});
```
---
## MCP Server (for AI Agents)
Animotion includes an **MCP v2 server** with **745 animations + 9,000+ real SVG icons** from 5 providers. AI agents get real hand-crafted icons instead of generating AI-looking ones.
### Why Use This MCP?
When AI coding tools generate UIs, they often create SVG icons that look obviously AI-generated. With Animotion MCP, agents call `search_icons("shopping cart")` and get **real SVGs** from Lucide, Heroicons, Tabler, and Bootstrap — content matches the context but doesn't look AI-generated.
### Icon Providers (9,000+ icons)
| Provider | Icons | License |
|----------|-------|---------|
| Lucide | 1,941 | ISC |
| Tabler | 5,039 | MIT |
| Bootstrap | 2,078 | MIT |
| Heroicons | 324 | MIT |
| Built-in | 120 | MIT |
### Install
```bash
npx animotion-mcp # run directly, no install needed
# or
npm install -g animotion-mcp # install globally
```
### Connect to Claude Code / Cursor / Windsurf
Add to your MCP config file:
```json
{
"mcpServers": {
"animotion": {
"command": "npx",
"args": ["-y", "animotion-mcp"]
}
}
}
```
**Config file locations:**
- **Claude Code:** `.claude/settings.json` or `~/.claude/settings.json`
- **Cursor:** `.cursor/mcp.json`
- **Windsurf:** MCP settings panel
- **Claude Desktop:** `~/.claude/claude_desktop_config.json`
### Available MCP Tools (10 total)
#### 1. `search_animations`
Search animations by name, category, or tags.
```json
// Input
{
"query": "fade in",
"category": "entrance",
"limit": 10
}
// Output — matching animations with metadata
{
"count": 13,
"animations": [
{
"id": "E01",
"name": "Fade In",
"description": "Element fades in from transparent to opaque",
"cssClass": "animotion-fade-in",
"category": "entrance",
"tags": ["fade", "opacity", "entrance", "basic"],
"duration": "0.6s"
}
]
}
```
#### 2. `get_animation`
Get complete details for a specific animation by ID or class name.
```json
// Input
{ "id": "E01" }
// or
{ "id": "animotion-fade-in" }
// Output — full animation object including CSS code
```
#### 3. `list_categories`
List all 20 animation categories with names, icons, colors, and counts.
```json
// No input needed
// Output
{
"categories": [
{ "id": "entrance", "name": "Entrance", "icon": "→", "color": "#3b82f6", "count": 65 },
{ "id": "exit", "name": "Exit", "icon": "←", "color": "#94a3b8", "count": 50 },
...
]
}
```
#### 4. `compose_animation`
Compose custom CSS with your own duration, easing, delay, and selector.
```json
// Input
{
"animation": "animotion-bounce-in",
"selector": ".my-modal",
"duration": "0.8s",
"easing": "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
"delay": "0.1s",
"iterationCount": "1",
"fillMode": "both"
}
// Output — ready-to-use CSS
// @keyframes animotion-bounceIn { ... }
//
// .my-modal {
// animation: animotion-bounceIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s 1 both;
// }
```
#### 5. `suggest_animation`
Describe your use case in natural language and get the best matching animations.
```json
// Input
{
"useCase": "modal appearing on screen with a bouncy effect",
"count": 5
}
// Output — ranked suggestions with relevance scores
{
"useCase": "modal appearing on screen with a bouncy effect",
"suggestions": [
{
"id": "E30",
"name": "Bounce In",
"description": "Element bounces in with spring-like scaling",
"cssClass": "animotion-bounce-in",
"css": "...",
"keyframeCSS": "...",
"relevanceScore": 12
}
]
}
```
#### 6. `get_animation_css`
Get ONLY the CSS code — perfect for directly inserting into stylesheets.
```json
// Input
{
"id": "animotion-fade-in",
"includeKeyframes": true
}
// Output — raw CSS string
// @keyframes animotion-fadeIn { from { opacity: 0; } to { opacity: 1; } }
// .animotion-fade-in { animation: animotion-fadeIn 0.6s ease-out both; }
```
#### 7. `search_icons`
Search 9,000+ real SVG icons across all providers. Use instead of generating icons.
```json
// Input
{ "query": "shopping cart", "provider": "all", "limit": 5 }
// Output — real SVGs from multiple providers
{
"count": 5,
"icons": [
{
"id": "lucide:shopping-cart",
"name": "Shopping Cart",
"provider": "lucide",
"svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" ...>...</svg>"
}
]
}
```
#### 8. `get_icon`
Get SVG code for a specific icon. Use `provider:name` format.
```json
// Input
{ "id": "lucide:home" }
// Output — complete SVG ready to paste
```
#### 9. `list_icon_providers`
List all 5 icon providers with counts and metadata.
#### 10. `add_custom_icon`
Register your own SVG icon for the MCP session.
### MCP Resources
The server exposes resources that AI agents can read:
| URI | Description |
|-----|-------------|
| `animotion://catalog` | Complete animation catalog (JSON) |
| `animotion://categories` | Category list with metadata (JSON) |
| `animotion://utilities` | All utility CSS classes (CSS) |
| `animotion://icons` | Icon library stats and built-in icons (JSON) |
---
## PNG Animator
Upload any image (PNG, JPG, SVG, GIF) and apply any of the 745 animations to it.
### How to use
1. Visit [the website](https://animotion-mcp.github.io) and click **PNG Animator** tab
2. Drag & drop your image or click to browse
3. Select an animation from the dropdown (organized by category)
4. Adjust duration, easing, and delay
5. Preview the animation live
6. Click **Export CSS** to copy the ready-to-use CSS code
### What you get
```css
/* Animotion: Bounce In */
@keyframes animotion-bounceIn {
0% { transform: scale(0.3); opacity: 0; }
50% { transform: scale(1.05); }
70% { transform: scale(0.9); }
100% { transform: scale(1); opacity: 1; }
}
.my-animated-image {
animation: animotion-bounceIn 1s ease-out 0s 1 both;
}
```
---
## Icons Library
**9,000+ SVG icons** available via MCP server (Lucide, Tabler, Bootstrap, Heroicons) + **120 built-in icons** on the website. All icons use consistent 24x24 viewBox with stroke-based rendering.
### Categories
| Category | Count | Examples |
|----------|-------|---------|
| UI Elements | 25 | home, search, settings, menu, close, bell, user, star, heart |
| Arrows & Direction | 20 | arrow-up, chevron-down, refresh, download, external-link |
| Media & Files | 15 | file, folder, image, camera, video, play, pause |
| Social & Communication | 15 | message, mail, phone, send, share, globe, wifi |
| Commerce | 15 | shopping-cart, credit-card, tag, gift, truck, wallet |
| Developer | 15 | code, terminal, git-branch, database, server, cloud, cpu |
| Miscellaneous | 15 | sun, moon, clock, calendar, flag, zap, coffee, pen |
### Usage
Visit the **Icons** tab on the website and click any icon to copy its SVG to clipboard.
```html
<!-- Paste the SVG directly -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
<polyline points="9 22 9 12 15 12 15 22"/>
</svg>
```
Icons inherit `currentColor`, so they match your text color automatically.
### Programmatic Access
```javascript
// Load the icons data
const response = await fetch('js/icons.js');
// or include <script src="js/icons.js"></script>
// Access icons
const homeIcon = ANIMOTION_ICONS.icons.find(i => i.id === 'home');
document.getElementById('my-icon').innerHTML = homeIcon.svg;
```
---
## Project Structure
```
css3-animations/
├── index.html # Showcase website
├── api.json # Machine-readable catalog (608KB)
├── LICENSE # MIT License
├── README.md # This file
│
├── css/
│ ├── keyframes.css # 500 @keyframes (Part 1)
│ ├── keyframes-part2.css # 341 @keyframes (Part 2)
│ ├── style.css # Website UI styles
│ └── utilities.css # Duration/delay/easing helpers
│
├── js/
│ ├── data.js # Animation registry (745 entries)
│ ├── icons.js # Icons registry (120 entries)
│ ├── app.js # Website controller
│ ├── icons-app.js # Icons tab controller
│ └── png-animator.js # PNG upload & animate
│
├── icons/
│ └── favicon.svg # SVG favicon
│
├── mcp/
│ ├── server.js # MCP v2 server (10 tools + 4 resources)
│ ├── icon-loader.js # Loads 9,000+ icons from npm packages
│ └── package.json # MCP dependencies (includes icon libraries)
│
├── docs/
│ └── api.md # Detailed API documentation
│
├── scripts/
│ └── generate-api.js # Regenerate api.json from data.js
│
└── .github/
└── workflows/
└── pages.yml # GitHub Pages auto-deploy
```
---
## Integration Examples
### React
```jsx
import './animotion/keyframes.css';
import './animotion/utilities.css';
function Modal({ isOpen, children }) {
return isOpen ? (
<div className="animotion-fade-in animotion-duration-300">
<div className="animotion-zoom-in animotion-ease-spring">
{children}
</div>
</div>
) : null;
}
```
### Vue
```vue
<template>
<transition enter-active-class="animotion-fade-in-up" leave-active-class="animotion-fade-out-down">
<div v-if="show">Content</div>
</transition>
</template>
```
### Tailwind CSS
Use alongside Tailwind — Animotion classes don't conflict:
```html
<div class="bg-white rounded-lg shadow-md p-6 animotion-card-lift">
Tailwind styling + Animotion animation
</div>
```
### Angular
```typescript
@Component({
template: `<div [class]="animClass">{{ message }}</div>`
})
export class MyComponent {
animClass = 'animotion-fade-in animotion-duration-500';
}
```
---
## Browser Support
Animotion works in all modern browsers:
| Browser | Version |
|---------|---------|
| Chrome | 60+ |
| Firefox | 55+ |
| Safari | 12+ |
| Edge | 79+ |
| Opera | 47+ |
| iOS Safari | 12+ |
| Chrome Android | 60+ |
---
## Contributing
We welcome contributions! Here's how:
1. **Fork** the repository
2. **Add animations** — add @keyframes to `css/keyframes-part2.css` and entries to `js/data.js`
3. **Add icons** — add SVG entries to `js/icons.js`
4. **Run** `node scripts/generate-api.js` to update `api.json`
5. **Submit** a pull request
### Adding a new animation
1. Add the `@keyframes` to `css/keyframes-part2.css`:
```css
@keyframes animotion-myAnimation {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
```
2. Add the entry to `js/data.js`:
```javascript
{
id: 'CUSTOM01',
name: 'My Animation',
description: 'A custom entrance animation',
cssClass: 'animotion-my-animation',
keyframeName: 'animotion-myAnimation',
category: 'entrance',
subcategory: 'custom',
tags: ['custom', 'entrance'],
duration: '0.6s',
timingFunction: 'ease-out',
iterationCount: '1',
fillMode: 'both',
demoType: 'box',
css: `.animotion-my-animation { animation: animotion-myAnimation 0.6s ease-out both; }`,
keyframeCSS: `@keyframes animotion-myAnimation { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }`
}
```
3. Regenerate API: `node scripts/generate-api.js`
---
## License
MIT License. Free forever. Commercial use allowed.
Built by [Bachao.AI](https://bachao.ai) for the developer community.
---
## Links
- **Website:** https://animotion-mcp.github.io
- **GitHub:** https://github.com/animotion-mcp/animotion-mcp.github.io
- **API JSON:** https://animotion-mcp.github.io/api.json
- **API Docs:** https://animotion-mcp.github.io/docs/api.md
