Artreeus/curosr-gsap-master-mcp-server

🎯 GSAP Master MCP Server for Cursor IDE

By Artreeus - AI-powered GSAP animation assistance directly in Cursor IDE!

Transform Cursor into your personal GSAP animation expert with AI-powered intent analysis, complete API coverage, and production-ready patterns.

🎉 ALL GSAP PLUGINS NOW 100% FREE thanks to Webflow! Including SplitText, MorphSVG, DrawSVG, and more!

⚡ Quick Start (3 Steps)

1️⃣ Clone This Repo

git clone https://github.com/Artreeus/curosr-gsap-master-mcp-server.git
cd curosr-gsap-master-mcp-server

2️⃣ Install & Build (One-Time Setup)

npm install
npm run build

3️⃣ Add to Cursor

Windows: Edit C:\Users\YourUsername\.cursor\mcp.json
Mac/Linux: Edit ~/.cursor/mcp.json

Add this (replace the path with YOUR actual path):

{
  "mcpServers": {
    "gsap-master": {
      "command": "node",
      "args": [
        "C:\\Users\\YourName\\Desktop\\curosr-gsap-master-mcp-server\\dist\\index.js"
      ]
    }
  }
}

Then restart Cursor!

📖 Detailed instructions:

🚀 What You Get - 6 Powerful Tools

🧠 1. AI Animation Creator

Just describe what you want in natural language:

• "Fade in portfolio cards one by one when scrolling"
• "Create a hero title that reveals character by character"
• "Build smooth hover effects for navigation"

Features:

• 🎯 Advanced intent analysis
• ⚙️ Framework-specific code (React, Vue, Vanilla)
• 📱 Mobile-optimized by default
• ⚡ 60fps performance guaranteed

📚 2. GSAP API Expert

Complete documentation for every GSAP feature:

• Core methods (gsap.to, timeline, etc.)
• All plugins (ScrollTrigger, SplitText, DrawSVG, MorphSVG, Draggable)
• Performance tips and best practices
• Advanced examples and use cases

🛠️ 3. Complete Setup Generator

One-command environment setup:

• React, Next.js, Vue, Nuxt, Svelte, Vanilla
• All plugins and dependencies
• Performance configurations
• Starter code and patterns

🔧 4. Expert Debugger

AI-powered troubleshooting:

• Performance issues (lag, stuttering)
• Mobile compatibility problems
• ScrollTrigger positioning issues
• Timeline sequencing problems

⚡ 5. Performance Optimizer

Transform any animation for maximum smoothness:

• 60fps desktop optimization
• Mobile-smooth variants
• Battery-efficient versions
• Memory leak prevention

🎨 6. Production Patterns

Battle-tested animation systems:

• Hero sections with layered animations
• Complete scroll systems
• Advanced text effects
• Interactive UI components
• Loading sequences
• Page transitions

💡 Example Usage

Ask Cursor's AI:

Create Scroll Animation:

"Create a smooth parallax hero section with staggered text reveals"

Debug Performance:

"My GSAP animations are laggy on mobile Safari - help me fix it"

Generate Setup:

"Generate a complete GSAP setup for React with ScrollTrigger"

Learn:

"Teach me how to use GSAP timelines"

🎯 Perfect For

• Frontend Developers - Professional animation implementation
• Designers - Bring designs to life with code
• Agencies - Rapid prototyping and client work
• Students - Learn GSAP best practices
• Teams - Consistent animation patterns

🌟 Why This MCP Server?

🧠 AI-Powered Intelligence

• Understands natural language requests
• Analyzes intent and generates perfect code
• Explains techniques and best practices

⚡ Performance-First

• Every animation optimized for 60fps
• Mobile-responsive by default
• Memory leak prevention
• GPU acceleration techniques

🎯 Production-Ready

• Battle-tested patterns
• Industry-specific customizations
• Complete error handling
• Professional code structure

📚 Comprehensive Coverage

• Every GSAP method and plugin
• All animation properties
• Advanced techniques
• Framework integrations

🎨 Animation Types Supported

• Scroll-Based - Parallax, reveals, pins, progress bars
• Text Effects - Character reveals, typewriter, morphing
• Interactive - Hover, click, drag, touch gestures
• SVG Animations - Path drawing, shape morphing, motion paths
• Complex Sequences - Choreographed timelines, scene transitions
• Data Visualization - Charts, counters, progress indicators

📦 Requirements

• Cursor IDE with MCP support
• Node.js 18+ (Download)
• No additional setup required!

✅ Verify Installation

After restarting Cursor:

1. Open Cursor Settings (Ctrl+, or Cmd+,)
2. Navigate to Tools & MCP
3. You should see "gsap-master" with a green toggle ✅

🎪 Live Examples

Try these after installation:

Hero Section Animation

"Create a hero section with parallax background, staggered text reveals, and floating CTA button"

Portfolio Grid

"Build a portfolio grid that reveals cards one by one with hover effects when scrolling into view"

Text Animation

"Create a typewriter effect that reveals text character by character with a blinking cursor"

🐛 Troubleshooting

Server not showing up?

1. Make sure you ran npm install and npm run build
2. Check the path in your mcp.json is correct
3. Restart Cursor completely
4. Check that Node.js is installed: node --version

Need help?
Open an issue - I'm happy to help!

🤝 Contributing

Found a bug? Have a feature request?

• 🐛 Issues: GitHub Issues
• 💡 Features: Share your ideas and use cases
• 🔧 Pull Requests: Contributions welcome!

📈 Stats

• 6 Professional Tools for complete GSAP mastery
• 100+ Animation Patterns built-in
• 60fps Performance guaranteed
• All Frameworks supported
• 100% Free - including all premium plugins!

🏆 Created By

Artreeus - Making GSAP animation development easier for everyone!

Original concept inspired by bruzethegreat's work, adapted and improved for Cursor IDE.

📜 License

MIT License - Use it anywhere, anytime, for any project!

Transform Cursor into your personal GSAP animation expert today! 🎯⚡

⭐ Star this repo if you find it useful!