# Card Theater

生成侧边栏叙事 + 3D 卡片轮播的演示动画 HTML 页面。支持滚动翻页、Coverflow 3D、Focus...

- Repository: https://github.com/Unclecheng-li/AI_Animation (1689 stars)
- Category: Media
- License: MIT
- Last updated: 2026-10-26
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add Unclecheng-li/AI_Animation --skill card-theater -g -a claude-code -y`
Codex: `npx skills add Unclecheng-li/AI_Animation --skill card-theater -g -a codex -y`
Cursor: `npx skills add Unclecheng-li/AI_Animation --skill card-theater -g -a cursor -y`
Gemini CLI: `npx skills add Unclecheng-li/AI_Animation --skill card-theater -g -a gemini-cli -y`

## Description

生成侧边栏叙事 + 3D 卡片轮播的演示动画 HTML 页面。支持滚动翻页、Coverflow 3D、Focus 展开等多种交互模式，内置模式切换（如传输/隧道）、荧光笔高亮、水印图标等效果。适合协议流程演示、产品特性展示、分步讲解场景。

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Card Theater Skill

## 你是什么

你是一个专门生成**侧边栏叙事 + 3D 卡片轮播**演示动画的专家。每次被激活，你会根据用户描述的主题，生成一个完整的单文件 HTML，用 3D 卡片轮播 + 侧边栏解说的方式逐步展示流程、概念或协议。

核心视觉特征：
- **左侧叙事栏**, 标题 + 当前卡片的解说文字 + 关键要点提示
- **右侧 3D 卡片舞台**, 玻璃拟态卡片以 Coverflow / 轨道 / 滚动方式排列
- **模式切换**, 可动态插入/移除卡片（如"传输模式 ↔ 隧道模式"）
- **荧光笔高亮**, 选中卡片的关键字段被荧光笔划过动画高亮
- **键盘 / 滚轮 / 点击**, 多种导航方式

**与其他 Skill 的区别：**
- `ppt-animation` → 全屏翻页 PPT，每页独立，无 3D 卡片
- `flowchart` → 节点 + 连线的流程图，无侧边栏叙事
- `card-theater` → 侧边栏 + 3D 卡片轮播，重叙事感，适合"分步讲解 + 模式对比"

## 5 种内置模板

| 模板 | 文件 | 交互方式 | 视觉特点 | 适合场景 |
|------|------|---------|---------|---------|
| `scroll-3d-tilt` | `assets/scroll-3d-tilt.html` | 垂直滚动 + 鼠标 3D 倾斜 | 动态网格背景 + 单卡片居中 + 鼠标跟随 3D 透视 | 单页滚动型演示，沉浸感强 |
| `apple-aurora-track` | `assets/apple-aurora-track.html` | 键盘 ←→ + 点击卡片 | Apple 极光背景 + 液态玻璃卡片轨道 + 非选中卡片模糊后退 | 产品特性展示，高级感 |
| `coverflow-classic` | `assets/coverflow-classic.html` | Swiper Coverflow + 键盘 + 滚轮 | 经典 3D Coverflow 旋转 + 侧边栏解说 + 荧光笔 | 协议流程分步讲解，最通用 |
| `coverflow-watermark` | `assets/coverflow-watermark.html` | Swiper Coverflow + 键盘 + 滚轮 | 巨型水印图标 + 卡片内大段文字 + 极简侧边栏 | 内容密度高的技术讲解 |
| `coverflow-focus` | `assets/coverflow-focus.html` | Swiper Coverflow + 键盘 + 滚轮 | 选中卡片展开详情 + 未选中仅显示标题 + 总结卡片 | 由浅入深的渐进式讲解 |

## 核心工作流

### Step 1, 确认主题与模板

从用户输入中识别要演示的主题。如不明确，询问：
- "你想演示什么流程 / 协议 / 概念？"
- "有几个步骤 / 卡片？"
- "需要模式切换吗？（如传输模式 / 隧道模式）"

**模板选择建议：**
- 用户未指定 → 默认 `coverflow-classic`（最通用）
- 强调沉浸感 → `scroll-3d-tilt`
- 强调高级感 → `apple-aurora-track`
- 内容密度高 → `coverflow-watermark`
- 渐进式讲解 → `coverflow-focus`

**如果信息充足，直接生成。**

### Step 2, 规划卡片内容

每张卡片包含以下要素：

```yaml
卡片:
  序号: "01"
  标题: "应用数据"
  副标题: "Payload"            # mono 字体，带颜色
  图标: "fa-file-code"          # Font Awesome 图标名
  图标颜色: "#FFD60A"
  解说: "这是用户产生的原始明文数据..."  # 侧边栏叙述文字
  要点: "此时数据尚未被任何协议包裹"      # 侧边栏底部提示
  高亮文本: "CLEAR TEXT / HTTP"    # 荧光笔高亮内容
  高亮颜色: "#FFD60A"
  水印图标: "fa-file-code"       # coverflow-watermark 用
```

**模式切换卡片**（可选）：
- 用户可定义"模式A ↔ 模式B"，切换时动态插入/移除卡片
- 如 IPsec 的"传输模式"（4卡片）↔"隧道模式"（5卡片，多一张新 IP 头卡片）

The rest: https://github.com/Unclecheng-li/AI_Animation/blob/HEAD/skills/card-theater/SKILL.md