🎯 用于Cursor IDE的GSAP主MCP服务器
作者Artreeus -直接在Cursor IDE中提供AI驱动的GSAP动画辅助！
将Cursor转变为您的个人GSAP动画专家，并进行AI驱动的意图分析，完成API覆盖范围和生产就绪模式。
🎉 所有GSAP插件现在100%免费 感谢Webflow！包括SplitText、MorphSVG、DrawSVG等！
______________________________________________________________________
⚡ 快速入门（3个步骤）
1.️⃣ 克隆此Repo
git clone https://github.com/Artreeus/curosr-gsap-master-mcp-server.git
cd curosr-gsap-master-mcp-server2.️⃣ 安装和构建（一次性安装）
npm install
npm run build3.️⃣ 添加到光标
窗户： 编辑 C:\Users\YourUsername\.cursor\mcp.json\ Mac/Linux： 编辑 ~/.cursor/mcp.json
添加以下内容（将路径替换为您的实际路径）：
{
"mcpServers": {
"gsap-master": {
"command": "node",
"args": [
"C:\\Users\\YourName\\Desktop\\curosr-gsap-master-mcp-server\\dist\\index.js"
]
}
}
}然后重新启动Cursor！
📖 详细说明： 请参阅安装.md
______________________________________________________________________
🚀 你得到了什么-6个强大的工具
🧠 1.AI动画创作者
用自然语言描述你想要什么：
- *“滚动时，投资组合卡逐一淡出”*
- *“创建一个逐个角色显示角色的英雄头衔”*
- *“为导航构建平滑的悬停效果”*
特征：
- 🎯 高级意图分析
- ⚙️ 框架特定代码（React、Vue、Vanilla）
- 📱 默认情况下移动优化
- ⚡ 60fps性能保证
📚 2.GSAP API专家
每个GSAP功能的完整文档：
- 核心方法（gsap.to、时间表等）
- 所有插件（ScrollTrigger、SplitText、DrawSVG、MorphSVG、可拖动）
- 性能提示和最佳实践
- 高级示例和用例
🛠️ 3.完成设置生成器
一个命令环境设置：
- React、Next.js、Vue、Nuxt、Svelte、Vanilla
- 所有插件和依赖项
- 性能配置
- 起始代码和模式
🔧 4.专家调试器
人工智能故障排除：
- 性能问题（延迟、卡顿）
- 移动兼容性问题
- ScrollTrigger定位问题
- 时间线排序问题
⚡ 5.性能优化器
变换任何动画以获得最大平滑度：
- 60fps桌面优化
- 移动平滑变体
- 电池效率高的版本
- 内存泄漏预防
🎨 6.生产模式
经过实战考验的动画系统：
- 带有分层动画的英雄部分
- 完整的滚动系统
- 高级文本效果
- 交互式UI组件
- 加载顺序
- 页面转换
______________________________________________________________________
💡 示例用法
询问Cursor的AI：
创建滚动动画：
"Create a smooth parallax hero section with staggered text reveals"调试性能：
"My GSAP animations are laggy on mobile Safari - help me fix it"生成设置：
"Generate a complete GSAP setup for React with ScrollTrigger"学习：
"Teach me how to use GSAP timelines"______________________________________________________________________
🎯 非常适合
- 前端开发人员 -专业动画制作
- 设计师 -用代码将设计变为现实
- 机构 -快速原型制作和客户工作
- 学生 -学习GSAP最佳实践
- 团队 -一致的动画模式
______________________________________________________________________
🌟 为什么选择MCP服务器？
🧠 人工智能驱动的智能
- 理解自然语言请求
- 分析意图并生成完美的代码
- 解释技术和最佳实践
⚡ 性能优先
- 每个动画都针对60fps进行了优化
- 默认情况下移动响应
- 内存泄漏预防
- GPU加速技术
🎯 生产准备就绪
- 久经考验的模式
- 行业特定定制
- 完整的错误处理
- 专业代码结构
📚 全面覆盖
- 每个GSAP方法和插件
- 所有动画属性
- 先进技术
- 框架集成
______________________________________________________________________
🎨 支持的动画类型
- 基于滚动 -视差、显示、图钉、进度条
- 文字特效 -字符显示、打字机、变形
- 交互式 -悬停、单击、拖动、触摸手势
- SVG动画 -路径绘制、形状变形、运动路径
- 复序列 -精心编排的时间线、场景过渡
- 数据可视化 -图表、计数器、进度指示器
______________________________________________________________________
📦 需求
- 光标IDE 支持MCP
- Node.js 18+ (下载)
- 无需额外设置！
______________________________________________________________________
✅ 验证安装
重新启动Cursor后：
- 打开 光标设置 (
Ctrl+,或Cmd+,) - 引导到 工具和MCP
- 你应该看看 “gsap主机” 带有绿色开关✅
______________________________________________________________________
🎪 现场实例
安装后尝试以下操作：
英雄部分动画
"Create a hero section with parallax background, staggered text reveals, and floating CTA button"投资组合网格
"Build a portfolio grid that reveals cards one by one with hover effects when scrolling into view"文本动画
"Create a typewriter effect that reveals text character by character with a blinking cursor"______________________________________________________________________
🐛 故障排除
服务器未显示？
- 确保你跑了
npm install和npm run build - 检查您的路径
mcp.json是正确的 - 完全重新启动游标
- 检查是否安装了Node.js：
node --version
需要帮助？\ 打开一个问题 -我很乐意帮忙！
______________________________________________________________________
🤝 贡献
发现bug了吗？有功能请求吗？
- 🐛 问题:
- 💡 特性：分享你的想法和用例
- 🔧 拉取请求：欢迎投稿！
______________________________________________________________________
📈 统计
- 6专业工具 全面掌握GSAP
- 100+动画图案 内置的
- 60fps性能 保证
- 所有框架 支持
- 100%免费 -包括所有高级插件！
______________________________________________________________________
🏆 由...创建
Artreeus -让GSAP动画开发对每个人来说都更容易！
最初的概念灵感来自bruzethegreat的工作，为Cursor IDE进行了改编和改进。
______________________________________________________________________
📜 许可证
MIT许可证-随时随地为任何项目使用它！
______________________________________________________________________
立即将Cursor转变为您的个人GSAP动画专家！ 🎯⚡
⭐ 标记此回购 如果你觉得它有用的话！