AI导哈

GSAP动画代码生成器

一个用于生成GSAP动画代码的MCP服务器，无运行时依赖，纯静态代码生成。

  • by bl00dclot
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 bl00dclot/gsap-mcp

使用说明

gsap mcp

MCP服务器用于生成GSAP动画代码——无运行时依赖性，纯静态代码生成。

安装

npm install
npm run build

配置

添加到您的Claude桌面配置(~/.claude/claude_desktop_config.json):

{
  "mcpServers": {
    "gsap": {
      "command": "node",
      "args": ["/absolute/path/to/gsap-mcp/dist/index.js"]
    }
  }
}

工具（18）

核心（4）

工具 描述 示例输入
gsap_tween 生成gsap.to/from/fromTo tween { "target": ".box", "method": "to", "properties": { "opacity": 1, "x": 100 } }
gsap_timeline 构建多步骤GSAP时间表 { "steps": [{ "target": ".a", "method": "to", "properties": { "x": 100 } }] }
gsap_easing 查找并预览GSAP缓解功能 { "action": "lookup", "ease": "power2.out" }
gsap_preset 生成常见的动画预设（fadeIn、slideUp等） { "preset": "fadeIn", "target": ".hero" }

插件（7）

工具 描述 示例输入
gsap_scrolltrigger ScrollTrigger驱动的滚动动画 { "target": ".section", "mode": "standalone", "trigger": ".section" }
gsap_splittext 分割文本字符/单词/行动画 { "target": ".heading", "splitType": "chars", "animation": "from" }
gsap_morphsvg 使用MorphSVGPlugin进行SVG形状变形 { "target": "#shape1", "shape": "#shape2" }
gsap_drawsvg SVG笔划绘制动画 { "target": ".path", "from": "0%", "to": "100%" }
gsap_motionpath 沿运动路径设置元素动画 { "target": ".dot", "path": "#circuit" }
gsap_flip FLIP动画状态转换 { "targets": ".cards", "action": "full" }
gsap_textplugin 文本替换和混乱效果 { "target": ".text", "text": "Hello!", "type": "replace" }

开发人员（7）

工具 描述 示例输入
gsap_analyze 性能、最佳实践、可访问性的静态分析 { "code": "gsap.to('.box', { width: 100 })" }
gsap_controls 播放/暂停/反转/寻道控制代码 { "action": "play", "target": "timeline" }
gsap_utilities GSAP实用方法（夹具、贴图范围、捕捉等） { "method": "clamp", "params": { "min": 0, "max": 100, "value": 150 } }
gsap_matchmedia 使用gsap.matchMedia（）的响应式动画 { "breakpoints": [{ "name": "Mobile", "query": "(max-width: 768px)", "animations": [] }] }
gsap_debug 调试工具：标记、GSDevTools、日志记录、慢动作 { "action": "slowmo", "options": { "timeScale": 0.25 } }
gsap_performance FPS监控、代码优化、帧分析 { "action": "monitor", "options": { "metrics": ["fps"] } }
gsap_framework_integration React/Vue/Angular/Svelte的框架特定代码 { "framework": "react", "type": "hook" }

建筑

gsap-mcp/
├── src/
│   ├── index.ts                  # Entry point — registers all 18 tools
│   ├── generators/
│   │   ├── code-builder.ts       # Fluent builder for imports + body assembly
│   │   └── templates.ts          # formatGsapVars, formatPosition, wrapInFunction
│   ├── knowledge/
│   │   ├── easings.ts            # Easing function database
│   │   ├── properties.ts         # CSS/GSAP property mappings + performance data
│   │   └── best-practices.ts     # Optimization rules, performance tips, pitfalls
│   └── tools/
│       ├── core/                 # Tween, timeline, easing, presets
│       ├── plugins/              # ScrollTrigger, SplitText, MorphSVG, etc.
│       └── dev/                  # Analyze, controls, utilities, debug, etc.
├── tests/                        # Mirrors src/ structure, 23 test files
├── dist/                         # Built output (tsc)
├── package.json
└── tsconfig.json

关键设计决策：

  • 无GSAP运行时依赖关系 --服务器使用静态知识库和模板构建器生成代码字符串。它从不自行导入或执行GSAP。
  • 可测试的核心功能 --每个工具都导出一个 generateXxxCode(params) 无需MCP基础设施即可直接测试的功能。
  • MCP SDK模式 --每个工具导出一个 registerXxxTool(server) 调用的函数 server.registerTool() 使用Zod v4输入模式。
  • 代码生成器 --流畅的构建器，管理导入、插件注册和正文行，然后用 build() （完整）或 buildSnippet() （仅限身体）。

发展

# Run all tests
npx vitest run

# Watch mode
npx vitest

# Type-check
npx tsc --noEmit

# Build
npx tsc

# Dev mode (tsx)
npx tsx src/index.ts

添加新工具

  1. 创建 src/tools/<category>/<name>.ts
  2. 出口 generateXxxCode(params): XxxResult （可测试的核心逻辑）
  3. 出口 registerXxxTool(server: McpServer) （MCP注册）
  4. 添加导入+注册调用 src/index.ts
  5. 创建 tests/tools/<name>.test.ts
  6. 跑 npx tsc --noEmit && npx vitest run

许可证

麻省理工学院

相关 MCP