animation-workflow-mcp

45 pre-built GSAP / Three.js / Lenis animation skills as a local MCP server. Works in Claude Code, Cursor, Windsurf, Antigravity, Codex, and any MCP-compatible AI editor — runs locally via stdio, no network or API key required.

Why npm instead of the hosted URL?

The hosted HTTP server works for most users, but can fail due to:

• Corporate firewalls / proxies blocking the worker URL
• VPN or DNS filtering
• Network latency adding delay on every skill lookup

This npm package runs the exact same server locally over stdio — the most reliable MCP transport, supported by every editor that implements MCP.

Quick install (one command)

npx animation-workflow-mcp

That's it. npx downloads and runs the server on first use, caches it afterward. No global install needed, no config files to edit for the server itself.

Editor setup

Claude Code (CLI / desktop app)

Option A — one command:

claude mcp add animation-workflow --transport stdio -- npx -y animation-workflow-mcp

Option B — edit ~/.claude/settings.json manually:

{
  "mcpServers": {
    "animation-workflow": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "animation-workflow-mcp"]
    }
  }
}

Verify it's connected:

claude mcp list

Cursor

Edit (or create) ~/.cursor/mcp.json:

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

Or per-project — create .cursor/mcp.json at the root of your project with the same content. Restart Cursor after saving.

Windsurf

Edit ~/.windsurf/mcp.json (or ~/.codeium/windsurf/mcp_config.json depending on version):

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

Then reload the MCP panel (Windsurf → Cascade → MCP Servers → Refresh).

Antigravity

Add to your Antigravity MCP config file:

{
  "mcpServers": {
    "animation-workflow": {
      "transport": "stdio",
      "command": "npx",
      "args": ["-y", "animation-workflow-mcp"]
    }
  }
}

OpenAI Codex (CLI)

Codex CLI reads ~/.codex/config.json:

{
  "mcpServers": {
    "animation-workflow": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "animation-workflow-mcp"]
    }
  }
}

Any other MCP client

The server speaks the Model Context Protocol over stdio. Use this command as the server process:

npx -y animation-workflow-mcp

Or if you prefer a global install:

npm install -g animation-workflow-mcp

Then use animation-workflow-mcp as the command (no npx needed).

Auto-trigger (no need to mention the MCP)

By default you'd have to say "use the animation-workflow MCP". These steps make the AI reach for it automatically whenever you mention anything animation-related.

Claude Code — global rule

Add to ~/.claude/CLAUDE.md:

## Animation Workflow

You have access to the `animation-workflow` MCP server with 45 pre-built animation skills.

Always use it when the user asks about any animation, scroll effect, hover effect,
page transition, loading screen, cursor effect, or text animation.

Workflow:
1. Call `lookup_skill` with a plain-English description
2. Call `get_skill` with the matched name to get the full HTML/CSS/JS
3. Implement using the returned code — do not rewrite from scratch

Trigger keywords: animate, scroll, hover, transition, reveal, cursor, trail, parallax,
sticky, stagger, gsap, lenis, loader, preloader, text reveal, counter, ticker, marquee,
image trail, magnetic, clip-path, horizontal scroll, cards stack, wipe.

Cursor / Windsurf — project rule

Create .cursor/rules/animation-workflow.mdc (or .windsurf/rules/animation-workflow.md):

---
description: Use the animation-workflow MCP for all animation requests
globs: ["**/*.html", "**/*.js", "**/*.ts", "**/*.jsx", "**/*.tsx", "**/*.css"]
---

You have access to the `animation-workflow` MCP server with 45 pre-built GSAP/Three.js/Lenis animation skills.

When the user asks about animations, scroll effects, hover effects, transitions, cursors, loaders, or text effects:
1. Call `lookup_skill` with a plain-English description
2. Call `get_skill` to get the full implementation
3. Use that code — do not write animations from scratch

Available tools

| Tool | What it does | |---|---| | list_skills | Lists all 45 skills with one-line descriptions | | lookup_skill(description) | Finds the right skill from plain English (e.g. "images that follow the cursor") | | get_skill(skill_name) | Returns the full HTML / CSS / JS implementation | | get_communication_guide(category) | Returns a category description guide |

Slash command (Claude Code only):

/mcp__animation-workflow__animate

All 45 skills

| Category | Skills | |---|---| | Scroll | smooth-scroll, horizontal-scroll, snap-scroll, parallax-scroll, parallax-image-scroll, scroll-triggered-reveal, infinite-scroll, sticky-stacking-cards, sticky-split-scroll, shrinking-headline-scroll | | Entrance | shape-scale-reveal, clip-path-bar-reveal, page-preloader, curtain-reveal, rotate-scale-entrance, stagger-text-reveal | | Hover | direction-aware-list-hover, direction-aware-card-hover, scale-hover, nav-hover-underline, text-displacement-hover, magnetic-element | | Cursor | custom-cursor, cursor-glow-follow, cursor-lens-effect, image-trail, mouse-parallax | | Text | text-clip-wipe, text-physics-explode, typewriter-reveal, gradient-text-animation, animated-counter, infinite-horizontal-ticker | | Gallery | draggable-gallery, draggable-scroll, image-explosion-scroll, ken-burns-zoom | | Transitions | slide-page-transition, overlay-wipe-transition, crossfade-page-transition, shared-element-transition | | Navigation | minimap-navigation, slide-in-menu | | WebGL | webgl-orb, threejs-image-slider |

How it works

All 45 skill files and 9 communication files are bundled into the package at publish time — embedded as strings in the JavaScript. The server reads nothing from disk at runtime, making it:

• Instant to start (no file I/O)
• Works in any directory
• No path configuration needed

Global install (optional, slightly faster startup)

If you use this in many projects, a global install avoids the npx download on first use:

npm install -g animation-workflow-mcp

Then use animation-workflow-mcp as the command in your editor config instead of npx -y animation-workflow-mcp.

Contributing / forking

If you want to add your own skills:

1. Clone the workflow repo
2. Add your skill .md file to skills/
3. Add descriptions to the relevant communication/*.md file
4. In npm-package/:

   npm run bundle   # regenerates src/skills-data.ts from your new files
   npm run build    # recompiles
   node dist/server.js  # test locally

5. Publish your own version: npm publish