| name | science-animation |
| description | 完整的科普动画视频生成 Skill。整合 script-to-scene + tts-universal + remotion-pro。
触发词： - "科普视频"、"科普动画" - "制作视频"、"创建动画" - "3Blue1Brown 风格" - "/science-animation"
使用场景： - 数学/物理概念讲解 - AI/机器学习可视化 - 数据结构与算法动画 - 技术教程视频
|
science-animation
AI 驱动的科普动画视频创作工作流。
核心流程
用户输入想法
│
▼
┌─────────────────────────────────────────┐
│ 1. 场景拆解 (script-to-scene) │
│ - 分析主题结构 │
│ - 拆分为多个场景 │
│ - 估算时长 │
└─────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────┐
│ 2. TTS 生成 (tts-universal) │
│ - 用户选择服务商 │
│ - 生成音频 + 时间戳 │
└─────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────┐
│ 3. Remotion 代码生成 │
│ - 场景组件 │
│ - 动画效果 │
│ - 音画同步 │
└─────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────┐
│ 4. 预览与渲染 │
│ - npm run dev 预览 │
│ - remotion render 导出 │
└─────────────────────────────────────────┘
用户交互流程
阶段 1: 内容输入
用户: "我想做一个关于卷积神经网络的科普视频，5分钟左右"
AI: 我来帮你创建这个科普视频。
┌─────────────────────────────────────────┐
│ 问题 1: 视频风格偏好？ │
│ ○ 3Blue1Brown 风格（数学/技术讲解） │
│ ○ 科技感风格（现代/酷炫） │
│ ○ 简约清晰（教育培训） │
└─────────────────────────────────────────┘
阶段 2: TTS 选择
AI: 了解了。接下来:
┌─────────────────────────────────────────┐
│ 问题 2: TTS 语音选择？ │
│ │
│ 1. Edge TTS（免费，零配置） │
│ 2. MiniMax（中文音色好，支持克隆） │
│ 3. 火山引擎（支持公式朗读） │
│ 4. ElevenLabs（英文内容） │
└─────────────────────────────────────────┘
阶段 3: 生成与预览
AI: 好的，开始生成...
✓ 正在拆解脚本为 5 个场景...
✓ 正在生成 TTS 音频（MiniMax）...
✓ 正在生成 Remotion 代码...
✓ 正在渲染预览...
视频已生成！预览地址: http://localhost:3000
场景结构:
┌─────────────────────────────────────────┐
│ Scene 1: 什么是卷积神经网络？ (15秒) │
│ Scene 2: 输入层的工作原理 (20秒) │
│ Scene 3: 卷积层如何提取特征 (25秒) │
│ Scene 4: 特征图与池化 (15秒) │
│ Scene 5: 总结 (10秒) │
│ 总计: 85秒 │
└─────────────────────────────────────────┘
使用示例
命令行触发
/science-animation
"我想做一个关于卷积神经网络的科普视频，5分钟左右"
代码调用
import { createScienceVideo } from "codemotion/skills/science-animation";
const project = await createScienceVideo({
topic: "卷积神经网络",
duration: "5分钟",
style: "3Blue1Brown",
ttsProvider: "minimax",
});
生成产物
my-cnn-video/
├── src/
│ ├── Root.tsx
│ ├── config.ts
│ ├── audioConfig.ts # ⭐ 自动生成
│ ├── scenes/
│ │ ├── Scene01.tsx
│ │ ├── Scene02.tsx
│ │ └── ...
│ └── components/
│ └── TTSPlayer.tsx
├── public/
│ └── audio/
│ ├── scene-01.mp3
│ └── ...
└── package.json
TTS 服务商选择
| 服务商 | 特色 | 推荐场景 |
|---|
| Edge TTS | 免费、零配置 | 快速原型、测试 |
| MiniMax | 音色克隆、高速 | 中文正式视频 |
| 火山引擎 | 公式朗读 | 技术教程 |
| ElevenLabs | 高质量英文 | 英文内容 |
3Blue1Brown 风格 Checklist
□ 背景：纯黑 (#000000)
□ 正值：蓝色 (#58C4DD)
□ 负值：红色 (#FF6B6B)
□ 高亮：黄色 (#FFFF00)
□ 结果：绿色 (#83C167)
□ 字体：JetBrains Mono
□ 动画：元素依次出现
□ 字幕：逐字高亮跟随语音
□ 相机：平滑过渡
可视化组件
| 组件 | 用途 |
|---|
| NeuralNetwork3D | 神经网络结构 |
| PixelGrid | 像素/特征图 |
| SlidingWindow | 卷积/池化窗口 |
| StepByStep | 计算步骤 |
| ValueFlyIn | 数值飞入 |
| TTSPlayer | 逐字字幕 |
参考资源
