内容
# ⚡ 終极 GSAP 主控 MCP 服务器
**终极 GSAP 主控 MCP 服务器** 是一款高性能的模型上下文协议（MCP）实现，为 AI 模型（如 Claude）提供了对 GreenSock Animation Platform（GSAP） 的“外科手术般的精确”控制。
它将自然语言动画请求转换为生产就绪的、优化为 60fps 的代码。无论您需要复杂的滚动触发序列、逐个字符的文本显示，还是基于物理的 Draggable 接口，该服务器都提供所需的专家级知识和实现逻辑。
## ✨ 功能
- **🧠 高级意图分析**：理解复杂的自然语言请求（例如，*“让这些卡片逐一淡入，并在它们到达屏幕中间时带有轻微的弹跳”*）。
- **🚀 生产就绪代码**：生成具有 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 桌面配置
打开您的 Claude 桌面配置文件：
- **macOS:** `~/Library/Application Support/Claude/claude_desktop_config.json`
- **Windows:** `%APPDATA%\Claude\claude_desktop_config.json`
### 2. 添加服务器
在 `mcpServers` 部分添加以下条目：
```json
{
"mcpServers": {
"gsap-master": {
"command": "npx",
"args": [
"-y",
"@vinhnguyen/gsap-mcp"
]
}
}
}
```
### 3. 重启 Claude
重启 Claude 桌面应用程序，您将看到一个 ⚡ 图标，指示 GSAP 主控工具已准备就绪。
### Continue.dev（VS Code 扩展）
将以下内容添加到您的 `~/.continue/config.yaml`：
```yaml
mcpServers:
- name: gsap-mcp
command: npx
args:
- "-y"
- "@vinhnguyen/gsap-mcp"
```
## 📖 使用示例
### 1. 自然语言创建
**用户：** *"我想要一个英雄部分，其中标题字母随机弹出，然后副标题从左侧滑入，当标题完成后。"*
**AI（使用 `understand_and_create_animation`）：** 将使用 `SplitText` 生成 `gsap.timeline()`，为字符应用 `back.out` 缓动和交错的随机开始时间，然后是副标题动画。
### 2. 性能重构
**用户：** *"我的滚动动画在移动设备上很卡。以下是代码：[代码片段，动画 `top` 和 `left` 属性]。"*
**AI（使用 `optimize_for_performance`）：** 将重构代码以使用 `x` 和 `y`（变换），添加 `force3D: true`，并实施 `ScrollTrigger.batch` 以提高性能。
### 3. 设置生成
**用户：** *"为 Next.js 项目设置一个新的 ScrollTrigger 和 SplitText。"*
**AI（使用 `generate_complete_setup`）：** 将提供安装的终端命令、`gsap.registerPlugin` 样板和组件的 `useGSAP` 包装器。
## 📈 性能标准
此服务器生成的每个代码都遵守以下标准：
- **GPU 加速**：使用 `x`、`y`、`scale` 和 `rotation` 代替布局属性（`top`、`width`、`height`）。
- **内存管理**：包括 `clearProps` 和框架钩子中的适当清理。
- **减少动作**：尊重 `prefers-reduced-motion` 媒体查询。
- **效率**：使用 GSAP 的内部计时器和优化的滚动事件批处理。
## 📄 许可证
MIT
---
*由 Vinh Nguyen 创建 - Powered by GSAP Surgical Precision.* ⚡
