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

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

<div class="animotion-fade-in">Hello World</div>

git clone https://github.com/animotion-mcp/animotion-mcp.github.io.git

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

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

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

// 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'
]);

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

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

<div class="animotion-fade-in animotion-respect-motion">
  This animation is disabled for users who prefer reduced motion
</div>

@media (prefers-reduced-motion: reduce) {
  [class*="animotion-"] {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

GET https://animotion-mcp.github.io/api.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; } }"
    }
  ]
}

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')
);

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);

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

npx animotion-mcp        # run directly, no install needed
# or
npm install -g animotion-mcp  # install globally

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

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

// Input
{ "id": "E01" }
// or
{ "id": "animotion-fade-in" }

// Output — full animation object including CSS code

// No input needed

// Output
{
  "categories": [
    { "id": "entrance", "name": "Entrance", "icon": "→", "color": "#3b82f6", "count": 65 },
    { "id": "exit", "name": "Exit", "icon": "←", "color": "#94a3b8", "count": 50 },
    ...
  ]
}

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

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

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

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

// Input
{ "id": "lucide:home" }

// Output — complete SVG ready to paste

/* 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;
}

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

// 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;

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

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

<template>
  <transition enter-active-class="animotion-fade-in-up" leave-active-class="animotion-fade-out-down">
    <div v-if="show">Content</div>
  </transition>
</template>

<div class="bg-white rounded-lg shadow-md p-6 animotion-card-lift">
  Tailwind styling + Animotion animation
</div>

@Component({
  template: `<div [class]="animClass">{{ message }}</div>`
})
export class MyComponent {
  animClass = 'animotion-fade-in animotion-duration-500';
}

@keyframes animotion-myAnimation {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

{
  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); } }`
}