| name | codemotion |
| description | CodeMotion - AI驱动的科普视频与演示创作工作流。
使用场景： - 创建科普动画视频（数学/物理/AI/数据可视化） - 生成技术教程讲解视频 - 制作演示文稿（PPT转网页/从零创建） - 为B站/抖音/YouTube制作视频内容 - 添加AI配音和字幕同步
触发词： - "做一个视频"、"创建科普视频"、"Remotion" - "创建演示文稿"、"PPT转网页"、"做slides" - "/codemotion"
|
CodeMotion
AI驱动的科普视频与演示创作工作流。
核心能力
| 能力 | 说明 |
|---|
| Remotion 视频 | React代码驱动，精准控制 |
| TTS 音画同步 | 6+服务商，毫秒级同步 |
| 多平台适配 | 9:16/16:9/1:1/4:5 |
| HTML 演示 | 零依赖单文件 |
Skill 系统架构
codemotion/
├── skills/
│ ├── SKILL.md # ⭐ 主入口
│ │
│ ├── core/ # 核心引擎
│ │ ├── tts-universal/ # ⭐ TTS 适配层（6个服务商）
│ │ ├── script-to-scene/ # ⭐ 场景拆解
│ │ ├── remotion-pro/ # ⭐ Remotion 代码生成
│ │ └── viewport-master/ # ⭐ 多比例适配
│ │
│ ├── content/ # 内容类型
│ │ ├── science-animation/ # ⭐ 科普动画视频
│ │ └── presentation/ # ⭐ HTML 演示文稿
│ │
│ └── output/ # 输出分发
│ ├── multi-platform/ # ⭐ 多平台发布
│ └── web-deploy/ # ⭐ 网页部署
│
└── shared/ # 共享资源
├── components/ # ⭐ 可复用组件库
│ ├── TTSPlayer.tsx # 逐字字幕播放器
│ ├── animations/ # 动画组件
│ │ ├── StepByStep.tsx
│ │ ├── ValueFlyIn.tsx
│ │ ├── SlidingWindow.tsx
│ │ ├── CameraMotion.tsx
│ │ └── StaggeredReveal.tsx
│ ├── ui/ # UI 组件
│ │ ├── Title.tsx
│ │ ├── FocusBox.tsx
│ │ ├── ProgressBar.tsx
│ │ └── ProgressDots.tsx
│ └── 3d/ # 3D 组件
│ ├── NeuralNetwork3D.tsx
│ └── PixelGrid.tsx
│
└── presets/ # 预设配置
├── 3b1b-colors.ts # 3Blue1Brown 配色
└── viewport-rules.ts # 多平台视口规则
主流程
1. 理解意图
用户输入想法后，CodeMotion 判断：
科普视频 → science-animation skill
演示文稿 → presentation skill
数据可视化 → science-animation (data-viz mode)
2. 内容输入
根据内容类型，收集必要信息：
科普视频模式：
- 主题是什么
- 目标时长
- 风格偏好（3Blue1Brown/科技感/简约）
- TTS 选择
演示文稿模式：
- 内容或主题
- 风格偏好（展示风格预览让用户选择）
- 是否需要 PPT 转换
3. 生成与交付
科普视频：
→ 场景拆解 (script-to-scene)
→ TTS 音频生成 (tts-universal)
→ Remotion 代码生成 (remotion-pro)
→ 预览 (npm run dev)
→ 渲染视频 (remotion render)
→ 多平台适配 (viewport-master)
→ 发布 (multi-platform)
演示文稿：
→ 风格选择
→ HTML 生成
→ 浏览器预览
→ 可选：部署/导出PDF
Skill 子系统
| Skill | 路径 | 职责 |
|---|
tts-universal | skills/core/tts-universal/ | TTS 服务商统一接口 |
script-to-scene | skills/core/script-to-scene/ | 脚本拆解为场景配置 |
remotion-pro | skills/core/remotion-pro/ | Remotion 代码生成 |
viewport-master | skills/core/viewport-master/ | 多比例适配 |
science-animation | skills/content/science-animation/ | 科普动画视频 |
presentation | skills/content/presentation/ | HTML 演示文稿 |
multi-platform | skills/output/multi-platform/ | 多平台分发 |
web-deploy | skills/output/web-deploy/ | 网页部署 |
TTS 服务商选择
| ID | 服务商 | 特色 | 免费额度 |
|---|
edge | Edge TTS | 免费，零配置 | 无限 |
minimax | MiniMax | 音色克隆 | 按量付费 |
volcengine | 火山引擎 | 公式朗读 | 有免费 |
elevenlabs | ElevenLabs | 英文 | $0.10/千字 |
aliyun | 阿里 Qwen3 | 高额度 | 50万字/月 |
tencent | 腾讯混元 | 企业级 | 按量付费 |
3Blue1Brown 风格规范
用于科普视频的视觉标准：
背景：#000000 (纯黑)
正值：#58C4DD (蓝)
负值：#FF6B6B (红)
高亮：#FFFF00 (黄)
结果：#83C167 (绿)
文字：#FFFFFF (白)
字体：JetBrains Mono
动画原则：
- 元素依次出现，非整体淡入
- 相机平滑过渡，无抖动
- 逐字字幕跟随语音
快速开始
创建科普视频
/codemotion
"我想做一个关于卷积神经网络的科普视频，5分钟左右"
创建演示文稿
/codemotion
"做一个关于 AI 发展的演示文稿"
目录结构
所有 Skills 位于 skills/ 目录下，可被 Claude Code 自动加载。
共享组件位于 shared/components/，可直接在 Remotion 项目中引用：
import { TTSPlayer, Title, NeuralNetwork3D } from "codemotion/shared/components";
import { COLORS_3B1B } from "codemotion/shared/presets";
参考资源
