science-animation

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	逐字字幕

参考资源

• PRD.md
• 组件参考
• remotion-pro 文档
• tts-universal 文档