# 动画开发计划 — OpenClaw vs Hermes Agent

**视频项目**：`2026-04-18-hermes-vs-openclaw`
**总时长估算**：约 4.5–5 分钟
**分辨率**：1920×1080 @ 30fps
**动画引擎**：GSAP 3.15（本地 gpu-local）
**图表库**：ECharts
**背景基色**：深宇宙黑 `#060810`
**录制方案**：x11grab on gpu-local（capture_v10 方案）

---

## Slide 开发进度总览

| Slide | 对应段落 | 类型 | 状态 |
|-------|---------|------|------|
| S-HOOK | S01–S07 | 新闻 Ticker + Logo 出现 + 分屏 | ⬜ 待做 |
| S-INTRO | S08–S09 | 机构信息卡 + GitHub 折线图 | ⬜ 待做 |
| S-SLOGAN | S10–S11 | Slogan 拆解动画 | ⬜ 待做 |
| S-LAYERS | S12–S15 | 两层架构图 + Code Walkthrough × 1 | ⬜ 待做 |
| S-DSPY | S16–S17 | GitHub Roadmap + 费用计算器 | ⬜ 待做 |
| S-GEAR | S18–S20 | 仪表盘对比图 + 透明度信息图 | ⬜ 待做 |
| S-DATA | S21 | 柱状图对比（33% → 97%）| ⬜ 待做 |
| S-SCORE | S22–S25 | 评分矩阵 + 并发动画 + Code Walkthrough × 2 | ⬜ 待做 |
| S-VERDICT | S26–S28 | 天平动画 + 日历翻页 | ⬜ 待做 |
| S-CHOICE | S29–S30 | 用户分路 flowchart | ⬜ 待做 |
| S-CTA | S31–S32 | 互动按钮卡 + 片尾 | ⬜ 待做 |

---

## 详细动画方案

### S-HOOK｜S01–S07｜开场（约 40 秒）

**类型**：新闻 Ticker + Logo 出现 + 分屏对比 + 大字冲击

**场景设计**：
- **S01**：黑底全屏，顶部滚动新闻条（stock ticker 风格），循环播放社区"OpenClaw 被淘汰"评论原句，Ticker 从右侧飞入
- **S02**：Hermes logo（Nous Research）从屏幕中央放大出现，背后光晕扩散
- **S03**：模拟一条 Twitter/X 帖子卡片从右飞入，文字打字机效果显示
- **S04**：OpenClaw logo 出现，右侧依次 pop in 三个 badge：`LightRAG` / `Harness` / `Skills`
- **S05/S06**：屏幕劈成左右两半——左边 Hermes repo clone 代码雨动画，右边 OpenClaw；S06 加浏览器缩略图快速翻页动画（"扒文章"）
- **S07**：大字 `"真实情况"` 中央 zoom in 出现

**GSAP 关键效果**：`gsap.from` ticker 无限循环、`gsap.to` logo scale 放大、`SplitText` 打字机、屏幕分割 clip-path

---

### S-INTRO｜S08–S09｜Hermes 是什么（约 18 秒）

**类型**：机构信息卡 + GitHub 增长折线图

**场景设计**：
- **S08**：Nous Research logo 从左滑入，右侧模型列表逐条 fade in：`Hermes` / `NOMOS` / `Psyche`，每条配小图标
- **S09**：**ECharts 折线图动画**
  - X轴：`2月25日` → `7周后`
  - Y轴：`0` → `95,000 ⭐`
  - 曲线实时绘制（橙色/金色），终点打 `"95k ⭐"` 标注气泡
  - 背景灰色虚线：其他 2026 年 AI 框架对比基准线

**数据**：开源日期 `2026-02-25`，7周内 `95,000 stars`，增速为 2026 年 AI 框架最快

---

### S-SLOGAN｜S10–S11｜核心卖点拆解（约 12 秒）

**类型**：大字 Slogan 动画 + 问题引导

**场景设计**：
- **S10**：全屏居中，英文大字 `"The Agent That Grows With You"` 逐词出现，下方中文 `"跟你一起成长的 AI"` 跟进
- **S11**：Slogan 缩小到顶部，下方放大镜图标出现，文字 `"仔细拆一下"` 弹出；剪刀动画切开 `"Grows"` 一词，变红色高亮，引出问题 `"什么级别的进化？"`

**GSAP 关键效果**：`SplitText` 逐词入场、`gsap.to` scale 缩小、`clip-path` 剪刀切割

---

### S-LAYERS｜S12–S15｜进化两层机制（约 30 秒）

**类型**：分层架构图 + **Code Walkthrough**（第 1 次）

**场景设计**：
- **S12**：竖向两层架构图动画
  - 第一层（蓝色实线框）：`Runtime Skill Accumulation` — `✅ 真实存在`
  - 第二层（灰色虚线框）：`DSPy / GEPA Optimization` — `🚧 大部分 Planned`
  - 两层之间分界线从左画到右，右侧标注 `"差距很大 →"`
- **S13**：第一层高亮，右侧流程图逐步出现：
  ```
  任务完成 → LLM 提炼步骤 → 写成 .md 文件 → 下次检索注入
  ```
  箭头依次 draw in
- **S14–S15**：**Code Walkthrough** — VS Code 风格编辑器
  - 文件树：`hermes/skills/` 目录
  - 滚动到一个自动生成的 skill 文件
  - 蓝色高亮行：`# Auto-generated by Hermes at runtime`
  - 气泡注释：`"不是学技能——是写操作日记"`
  - 动画演示：.md 文件图标被"拖入"对话框（表示下次注入 context）

**GSAP 关键效果**：`DrawSVG` 画箭头、`gsap.from` 卡片入场、Code Walkthrough scroll + highlight

---

### S-DSPY｜S16–S17｜DSPy 真实情况（约 22 秒）

**类型**：**Code Walkthrough**（第 2 次）+ 费用计算器信息图

**场景设计**：
- **S16**：**Code Walkthrough** — 打开 Hermes GitHub README Roadmap 区域
  - 高亮 Phase 1：绿色 `✅ Done`
  - 高亮 Phase 2–5：灰色，气泡注释：`"还没做出来"`
- **S17**：右侧弹出**费用计算器动画**
  - 滚轮转动，数字跳动：`$2 ~ $10 / 次`
  - 加文字：`+ 人工 review PR`
  - 底部总结卡片 pop in：`"进化成本：不是免费的"`

**GSAP 关键效果**：Code Walkthrough scroll + 双色高亮、`gsap.to` 数字计数动画

---

### S-GEAR｜S18–S20｜手动挡 vs 自动挡（约 22 秒）

**类型**：仪表盘对比信息图 + 透明度模块卡

**场景设计**：
- **S18**：屏幕左右各一辆车仪表盘 SVG
  - 左（Hermes）：`AUTO` 档，绿灯，方向盘自动旋转动画
  - 右（OpenClaw）：`MANUAL` 档，蓝灯，手握方向盘图标
  - 各自说明文字从下方滑入
- **S19**：左边 Hermes 仪表盘内出现 `?` 符号旋转动画（表示黑盒）；右边 OpenClaw 展开 4 个文件图标依次亮起：`MEMORY.md` / `USER.md` / `Skills/` / `Harness`
- **S20**：4 个模块卡片 pop in，每张卡片含图标 + 一行说明；最后大字 `"累一点，但完全掌控"` 从中央出现

**GSAP 关键效果**：SVG 旋转动画、`gsap.from` stagger 卡片入场

---

### S-DATA｜S21｜33% → 97% 数据（约 14 秒）

**类型**：柱状图 + 数字计数器（高冲击力）

**场景设计**：
- 左右两根柱子从底部同时增长：
  - 左（Harness 前）：红色柱，停在 `33%`，数字跳到 `33%`
  - 右（Harness 后）：绿色柱，增长到 `97%`，数字跳到 `97%`
- 两柱之间连线，标注 `+64%`，向上箭头 draw in
- 底部标注：`子任务成功率 / Telegram 自动化项目实测`

**GSAP 关键效果**：`gsap.to` 柱高 + 数字计数、`DrawSVG` 连线箭头

---

### S-SCORE｜S22–S25｜对比评分（约 45 秒）

**类型**：评分矩阵信息图 + 并发架构动画 + Smart Approval 示意 + **Code Walkthrough**（第 3 次）

**场景设计**：
- **S22**：**评分矩阵**逐行出现（stagger 动画）：

  | 维度 | OpenClaw | Hermes |
  |------|----------|--------|
  | Skill 系统 | 手动维护 | ✅ AI 自主创建 |
  | 并发架构 | ✅ Node.js Event Loop | Python GIL ⚠️ |
  | 安全模型 | ✅ 三级隔离 | Smart Approval ✅ |
  | 代码质量 | ✅ 模块化 | 11,741行单文件 ❌ |
  | 上手难度 | 需调教 | ✅ 开箱即用 |
  | 可控性 | ✅ 完全透明 | 黑盒进化 |

  底部总结卡 pop in：`OpenClaw 4胜 / Hermes 1胜 / 1平`

- **S23**：并发架构对比动画
  - 左（Node.js）：Event Loop 圆形图，多任务箭头并发流转
  - 右（Python）：GIL 锁图标，任务排队等待，`⚠️ GIL 限制` 标注

- **S24**：Smart Approval 示意动画
  - 命令 `rm -rf /` 飞入
  - 小模型图标闪一下审查
  - 打上 `🚨 危险！已阻止` 标签
  - 气泡：`"OpenClaw 没有这个，确实是创新"`

- **S25**：**Code Walkthrough** — `run_agent.py`
  - 文件树：`run_agent.py | 11,741 lines`
  - 滚动代码，红色高亮超长函数段（无注释、无分层）
  - 红色气泡：`"这不是架构——这是一大坨面"`

**GSAP 关键效果**：stagger 矩阵入场、SVG Event Loop 旋转、Code Walkthrough

---

### S-VERDICT｜S26–S28｜立场与结论（约 22 秒）

**类型**：天平动画 + 亮点标注 + 日历翻页

**场景设计**：
- **S26**：天平 SVG 动画，左侧 OpenClaw logo，右侧 Hermes logo，OpenClaw 一侧略微下沉（更重），两边都有内容（表示综合判断，非碾压）
- **S27**：Hermes 一侧天平盘上出现两颗星 ⭐ 依次亮起：
  - `AI 自主创建 Skill`
  - `LLM Smart Approval`
  - 文字：`"这两个设计，值得 OpenClaw 借鉴"`
- **S28**：日历图标翻页几个月，标注 `"届时重新评估"`，表示开放态度

**GSAP 关键效果**：`MotionPath` 天平摆动、`gsap.from` stagger 星出现

---

### S-CHOICE｜S29–S30｜受众选择（约 16 秒）

**类型**：用户分路 flowchart 动画

**场景设计**：
- 屏幕中央出现人物图标，向左右各延伸一条路径（DrawSVG 画线）
  - 左路：`初学者` → Hermes logo 亮起 → `"半天跑起来 ✅"`
  - 右路：`进阶用户` → OpenClaw logo 亮起 → `"1–2 周末，不后悔 ✅"`
- 路径像 flowchart，箭头逐步 draw in

**GSAP 关键效果**：`DrawSVG` 路径、分叉动画、logo 入场

---

### S-CTA｜S31–S32｜互动 + 片尾（约 12 秒）

**类型**：互动按钮卡 + 大字片尾

**场景设计**：
- **S31**：屏幕出现两个大按钮卡片（左右）：
  - `🚗 手动党` vs `🤖 自动党`
  - 卡片从两侧飞入，下方 `"评论区告诉我"` 文字跳动出现
- **S32**：全屏黑底，名言逐字打出：
  `"关键不是工具，是你愿不愿意学开手动的"`
  最后：吉贤头像 + `"我是吉贤，我们下期见"` + 订阅按钮动画

**GSAP 关键效果**：`SplitText` 打字机、卡片 bounce in

---

## 技术规格

| 项目 | 规格 |
|------|------|
| 分辨率 | 1920 × 1080 |
| 帧率 | 30fps |
| 动画引擎 | GSAP 3.15（本地 gpu-local `/2026-04-18-hermes-vs-openclaw/gsap-dist/`）|
| 图表 | ECharts（折线 / 柱状 / 矩阵）|
| Code Walkthrough | `code-walkthrough` skill 模板（已修好气泡定位）|
| 录制 | x11grab on gpu-local（capture_v10 方案）|
| TTS 文件 | `tts/s001.mp3` – `tts/s032.mp3`（Fish Audio S2-Pro，已完成）|
| 背景 | 深宇宙黑 `#060810` |
| 主色 | 蓝 `#4D9EFF` / 红 `#DC2626` / 橙 `#FF6B35` |
| LOGO | `assets/logo_openclaw.png`（透明）/ `assets/logo_nousresearch.png`（透明）|

## Code Walkthrough 出现位置

| 次数 | Slide | 内容 |
|------|-------|------|
| 第 1 次 | S-LAYERS（S14–S15）| Hermes 自动生成的 skill .md 文件 |
| 第 2 次 | S-DSPY（S16）| Hermes GitHub README Roadmap 区域 |
| 第 3 次 | S-SCORE（S25）| `run_agent.py` 11,741 行单文件 |

## 信息图出现位置（共 9 个）

1. 滚动新闻 Ticker（S-HOOK）
2. GitHub 增长折线图（S-INTRO）
3. 两层架构图（S-LAYERS）
4. 费用计算器（S-DSPY）
5. 仪表盘对比（S-GEAR）
6. 33% → 97% 柱状图（S-DATA）
7. 评分矩阵（S-SCORE）
8. 并发架构 Event Loop 动画（S-SCORE）
9. 用户分路 flowchart（S-CHOICE）

---

## 开发顺序建议

1. `S-DATA`（最简单，快速验证图表工具链）
2. `S-INTRO`（折线图，ECharts 基础测试）
3. `S-GEAR`（仪表盘，SVG 动画核心）
4. `S-LAYERS`（架构图 + Code Walkthrough）
5. `S-DSPY`（Code Walkthrough + 计算器）
6. `S-SCORE`（最复杂，矩阵 + Code Walkthrough）
7. `S-HOOK`（开场，依赖其他素材就位后做）
8. `S-SLOGAN` / `S-VERDICT` / `S-CHOICE` / `S-CTA`（相对独立）

---

*最后更新：2026-04-19*