codemotion

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";

参考资源

• PRD 文档
• TTS API 文档
• 组件参考
• 效果展示