AI导哈

GSAP动画生成服务器

高性能GSAP动画生成服务器，将自然语言请求转化为生产就绪的60fps优化动画代码。

  • by glorynguyen
  • JavaScript
  • 本地部署
  • 5 星标
  • 更新于
在 GitHub 查看 glorynguyen/gsap-mcp

使用说明

⚡ 终极GSAP主MCP服务器

这 终极GSAP主MCP服务器 是一种高性能的模型上下文协议（MCP）实现，它赋予人工智能模型（如克劳德）在GreenSock动画平台（GSAP）上的“手术精度”。

它将自然语言动画请求转换为生产就绪、60fps优化的代码。无论您是需要复杂的滚动触发序列、逐个字符的文本显示，还是基于物理的可拖动界面，此服务器都能提供所需的专家级知识和实现逻辑。

✨ 特征

  • 🧠 高级意图分析：理解复杂的自然语言请求（例如。， “让这些卡片一张一张地淡出，当它们碰到屏幕中间时会有轻微的反弹”).
  • 🚀 生产就绪代码：使用GPU加速生成代码(force3D)，内存管理(clearProps)，以及适当的框架生命周期处理（React useGSAP、清理等）。
  • 📚 完整的API数据库：深入了解每个核心方法、简化函数和插件（ScrollTrigger、SplitText、MorphSVG、DrawSVG等）。
  • 🔧 性能优化：自动将滞后的动画重构为高性能的60fps序列。
  • 🛠️ 专家调试：分析代码片段的布局抖动、缺少插件注册或逻辑错误。
  • 🎁 包括所有插件：为GSAP时代更新了知识库，其中 SplitText、MorphSVG和DrawSVG现在都是免费的。
  • 🧈 Lenis平滑滚动：内置支持Lenis与ScrollTrigger的集成，包括设置、React挂钩和最佳实践。

🛠 包含的工具

工具 说明
understand_and_create_animation 旗舰工具。 将任何动画创意转换为功能齐全的GSAP代码。
get_gsap_api_expert 为任何GSAP方法或插件提供深入的技术文档和示例。
generate_complete_setup 为React、Next.js、Vue或Vanilla生成样板，包括插件注册。
debug_animation_issue 识别并修复错误、性能瓶颈和逻辑错误。
optimize_for_performance 参考现有的GSAP代码，以确保60fps的平滑度和GPU加速。
create_production_pattern 生成经过战斗测试的模式，如英雄序列、加载屏幕和滚动系统。

🚀 安装和设置

由于此包发布为 @vinhnguyen/gsap-mcp，您可以使用 npx 无需手动安装即可运行它。

1.克劳德桌面配置

打开您的Claude Desktop配置文件：

  • macOS： ~/Library/Application Support/Claude/claude_desktop_config.json
  • 窗户： %APPDATA%\Claude\claude_desktop_config.json

2.添加服务器

将以下条目添加到 mcpServers 章节：

{
  "mcpServers": {
    "gsap-master": {
      "command": "npx",
      "args": [
        "-y",
        "@vinhnguyen/gsap-mcp"
      ]
    }
  }
}

3.重启克劳德

重新启动Claude Desktop应用程序，您将看到⚡ 图标表示GSAP主工具已准备好使用。

Continue.dev（VS代码扩展）

将以下内容添加到您的 ~/.continue/config.yaml:

mcpServers:
  - name: gsap-mcp
    command: npx
    args:
      - "-y"
      - "@vinhnguyen/gsap-mcp"

📖 使用示例

1.自然语言创造

用户： “我想要一个英雄部分，其中标题字母随机弹出，然后标题完成后字幕从左侧滑入。”

AI（使用 understand_and_create_animation): 将生成 gsap.timeline() 使用 SplitText 对于角色，应用 back.out 轻松和交错的随机开始时间，然后是字幕动画。

2.性能重构

用户： “我的滚动动画在移动设备上很慢。这是代码：[代码片段动画 top 和 left 属性]。"

AI（使用 optimize_for_performance): 将重构代码以使用 x 和 y （转换），添加 force3D: true，并实施 ScrollTrigger.batch 为了获得更好的性能。

3.设置生成

用户： “使用ScrollTrigger和SplitText设置一个新的Next.js项目。”

AI（使用 generate_complete_setup): 将提供终端安装命令 gsap.registerPlugin 样板和a useGSAP 组件的包装器。

📈 性能标准

此服务器生成的每一段代码都符合以下标准：

  • GPU加速：用途 x, y, scale，以及 rotation 而不是布局属性(top, width, height).
  • 内存管理：包括 clearProps 以及在框架挂钩中进行适当的清理。
  • 减少运动：尊重 prefers-reduced-motion 媒体查询。
  • 效率：使用GSAP的内部自动收报机和针对滚动事件的优化批处理。

📄 许可证

麻省理工学院

由Vinh Nguyen创建-由GSAP Surgical Precision提供技术支持。 ⚡

相关 MCP