用 AI + Remotion 生成教学动画视频
一、缘起
最近思维有些空洞，很久没冒出新点子，于是又给自己做了一次小型头脑风暴，想找点有意思的事情做。
最近的几条线索同时撞在了一起：
一是我在学技术时，发现市面上很多教程动画做得相当不错，比如“小白 debug”那种风格，画面、节奏、讲解都很顺。我开始好奇：他们到底是怎么做出来的？
二是我准备帮女朋友复习期末，但人不在身边，仅靠语音和文字很难把一些概念讲得生动，特别是需要画图、需要演示过程的内容。我开始想：有没有一种形式，能更直观、更有画面、更便于反复看？
三是前段时间在抖音上刷到“用 HTML 生成动画”的内容，当时没仔细看，但留下了印象。
这三条线索叠加在一起，我开始顺着想：能不能让 AI 直接生成讲解动画？
二、第一步验证：让 AI 生成一道错题的讲解动画
我先做了最便宜的验证：让 AI 用 HTML / CSS / JavaScript 写出一段讲解动画，然后浏览器打开看效果。
结果出乎意料地不错。动画节奏、信息层级、文字出现方式，配合一点动效，看起来已经接近一个简单的科普视频片段。
这一步让我相信：
这条路至少“可视化讲解”这一块是成立的。
于是做了一个简单的gem，用于专门生成这类内容，将上传的题目变成动画讲解的html:
你是一位资深的'HTML教学动画生成专家'，致力于将抽象概念、课程脚本和教学主题转化为可直接运行的高质量HTML动画页面，用于教学视频录制。
核心目标：
生成逻辑清晰、视觉直观且动效顺滑的代码。你不仅是开发者，更是教学编导、可视化设计师和动效设计师。
工作原则：
1. 教学优先：动画必须服务于知识理解，而非单纯炫技。
2. 逻辑转化：将用户想法转化为清晰的教学逻辑、易懂的视觉隐喻和顺滑的动画节奏。
3. 补全能力：当用户描述模糊时，主动补全合理细节并直接给出可运行版本。
输出规范：
1. 默认交付标准：生成一个完整的单文件HTML，包含HTML、CSS和JavaScript，不依赖任何外部资源（CDN、外部图片或字体）。
2. 画面标准：默认16:9横屏布局（1920×1080布局思路），现代简洁风格，所有文字使用中文。
3. 内容结构：
- 动画设计说明：说明教学目标、视觉隐喻及分镜思路。
- 分镜时间线：列表展示各时间段的画面内容、动作及旁白建议。
- 完整代码：提供包含'!DOCTYPE html'、'style'、'script'标签的完整闭合代码块。
- 修改建议：简述如何微调文案、颜色和动画速度。
技术与动效要求：
- 自动播放：页面加载后动画必须自动开始。
- 节奏控制：开头提出问题，每个知识点停留5-10秒，关键点停留1-2秒，结尾总结停留3-5秒。
- 视觉风格：默认采用深色背景、高对比文字和重点色突出，支持'科技感'、'黑板风'等多种可选风格。
- 代码稳定性：布局稳定，不产生溢出，关键参数集中以便用户修改。
三、为什么这件事可能有市场价值
只是好玩还不够，我接着往现实意义上想。
第一，市场上确实有大量这种内容生产需求。我在招聘软件上能看到，作业帮、搜题软件等公司一直在大量招人录制题目讲解视频。这说明这类内容是有真实价值的，但目前主要靠人工产出。
第二，这种内容对“偏想象”“偏画图”的科目特别有用，比如：
- 物理的受力、运动、电路
- 几何的辅助线、空间结构
- 地理的洋流、地形、气候
- 函数图像、坐标轴变化
- 化学反应过程
文字解析很难讲清楚的内容，动画能直接“演”出来。
第三，如果能把这种生产流程批量化、自动化，就能在两方面体现价值：
一方面让讲解更生动，更可视化； 另一方面节省大量人力成本。
这就不只是“做着玩”，而是有现实落点的方向，且对于学生来说是具有真实意义的。
四、第一版方案的问题：HTML 路线的局限
第一版方案是“让 AI 生成完整 HTML 动画”，但越往下想，问题越明显。
1. 对用户不友好
HTML 对程序员还算友好，但对普通用户来说：
- 每次都要复制代码
- 还要改文件名后缀
- 用浏览器打开
- 想保存还得自己录屏
这条链路用户几乎走不下去。
2. 不可分享
视频是天然适合传播的格式，HTML 不是。要分享给老师、学生、家长，最自然的形式还是“一个能直接播放、能下载、能转发的视频文件”。
3. 每次都生成完整 HTML，是一种浪费
每次让 AI 写一整份 HTML 至少带来两个问题：
- 样式每次都不一样，风格不稳定
- token 消耗大，成本不低
更合理的做法应该是：
把模板沉淀下来，AI 只负责“内容”，不负责“画面”。
五、第二版方案：模板化 + JSON 化讲解脚本
顺着上面的问题继续推演，我得出一套更合理的设计思路。
1. 不同类型的内容对应不同模板
比如：
- 错题讲解模板
- 概念解释模板
- 公式推导模板
- 图像变化模板
- 流程演示模板
- 对比类模板
模板由开发者预先设计好，保证视觉风格统一、动画质量稳定。
2. 问题内容 JSON 化
每次 AI 不再写动画代码，而是输出一段结构化的 JSON 讲解脚本。比如：
- 题目
- 关键条件
- 学生错误及错因
- 正确步骤
- 关键提醒
- 方法总结
- 旁白文本
3. AI 的角色变成“教学编导”，而不是“前端工程师”
AI 负责：
- 理解题目
- 拆解知识点
- 设计讲解逻辑
- 生成分镜和旁白
视频框架负责：
- 渲染稳定的画面
- 控制时间线
- 合成最终视频
这样既稳定，又省 token，还能保证风格统一。
到这里整个方向已经从“好玩的尝试”变成了一个像产品的东西。
六、意外的发现：Remotion 已经替我把路铺好了
带着上面的想法继续查，我发现已经有一个非常成熟的工具：Remotion。
它不仅印证了我前面所有的设想，还顺带解决了我接下来打算思考的一个问题：配音同步。
Remotion 是什么
Remotion 是一个用 React 编写视频的程序化视频框架。它的核心思想是：
视频不是在剪辑软件里拖时间线，而是用代码描述每一帧。
你写 React 组件、CSS、SVG、Canvas，Remotion 按帧渲染这些画面，最后输出真正的视频文件，比如 MP4 或 WebM。
它为什么正好契合我的设想
1. 模板化天然支持
每一类讲解都可以做成一组组件，画面统一、动画稳定，复用性极强。
2. JSON 数据驱动视频
视频可以由一份 JSON 数据生成，AI 只需要生成数据，不需要写视觉。
3. 可以本地预览
它提供 Remotion Studio，可以像浏览网页一样实时预览动画。我担心的“看不到效果不敢动手”的问题，被它解决了。
4. 可以直接导出 MP4
不需要录屏，命令行一行就能输出视频，体验对用户极其友好。
5. 原生支持音频
可以在视频里加入旁白、背景音乐、按帧控制音量，意味着 TTS 配音可以非常自然地接进来。
6. 适合接入 AI
社区已经有 “Prompt to Motion Graphics” 这类 SaaS Starter Kit，说明 AI + Remotion 已经是被验证的工作流。
我自己验证的结果
我已经在本地跑通了一个 Demo：
- 写了一份 JSON 描述错题讲解
- 设计了 5 个场景：标题、题目、错误、正确步骤、总结
- Remotion 把它渲染成了一条大约 48 秒的视频
- 改 JSON 就能换成另一道题
- 一键导出 MP4
也就是说：
整条链路在我的电脑上已经走通了。
七、对未来的判断：为什么不会被通用 AI 视频模型降维打击
因为之前也有做过ai漫剧，对视频模型也有一定了解，有着一个担心的点：Veo、Seedance、Hailuo 这类视频模型越来越强，再投喂教学视频会不会形成降维打击？
最后得到的判断是：
在视觉表现力上，视频模型会越来越强； 但在“教学准确性、可控性、可编辑性、批量稳定性”上，程序化视频路线仍然有明显优势。
它们的本质区别是：
| 维度 | 程序化视频（Remotion） | 通用视频模型 |
|---|---|---|
| 核心强项 | 精确、可控、可编辑、可批量 | 镜头感、画面氛围、真实感 |
| 适合内容 | 错题、公式、图表、流程、课程 | 广告、短片、故事、实拍感 |
| 教学准确性 | 强，可校验 | 需要大量审核 |
| 修改成本 | 极低，改 JSON 即可 | 高，往往需要重新生成 |
| 批量生成 | 边际成本低，稳定 | 成本和筛选压力较大 |
教育内容不能只追求“像”，必须“对”。这就让程序化视频在教学场景里反而更有竞争力。
更现实的做法是：
用程序化视频负责核心讲解，用视频模型生成局部增强素材（开场氛围、过渡镜头、生活化比喻画面）。
形成混合方案，而不是二选一。
八、系统构思：可以这样做这个项目
把前面所有的思考整理之后，整个项目的轮廓已经比较清晰。
一句话定位
用 AI 生成结构化教学内容，用 Remotion 把它稳定地视频化，让每一道错题、每一个知识点，都能变成一段可观看、可保存、可分享的讲解视频。
不是“AI 视频生成器”，而是：
学习内容的视频化引擎。
系统分三层
第一层：内容理解层（AI 负责）
输入题目、知识点、错题图、学生答案，输出：
- 题目结构化解析
- 知识点标签
- 错误类型识别
- 正确解题步骤
- 关键提醒
- 同类题方法
- 旁白稿
- 分镜 JSON
第二层：视频表达层（Remotion 负责）
读取结构化 JSON，使用对应模板，渲染：
- 动画画面
- 公式推导
- 高亮和标注
- 字幕
- 旁白音频
- 背景音乐（可选）
- 最终 MP4
第三层：学习管理层（产品层）
视频不是孤立存在的，可以接入：
- 错题本
- 学生个性化复习
- 知识点掌握度
- 老师备课素材
- 班级共享内容
- 自动复习推送
三层组合起来，才不是“一个视频工具”，而是“一个学习系统”。
生产流水线
用户输入题目 / 知识点 / 错题图
↓
AI 理解内容 → 生成结构化 JSON
↓
AI 生成旁白文本
↓
TTS 批量生成每一幕音频
↓
按音频长度回填每一幕时长
↓
Remotion 渲染画面 + 音频 + 字幕
↓
输出 MP4
↓
保存到学生错题本，可下载、可分享
九、护城河和长期价值
如果继续往下做，这件事的护城河不会只是“做了几套漂亮模板”，而会沉淀在更深的地方。
第一，题型模板库。每一类题对应最适合的视觉表达方式。
第二，错因分析库。讲对答案不难，难的是讲“为什么会错”。能识别常见错误类型，并自动生成针对性讲解。
第三，分镜生成质量。AI 不只是写旁白，而是真正能设计教学节奏：什么时候展示、什么时候高亮、什么时候停顿、什么时候总结。
第四，可编辑工作流。老师和家长可以快速修改题目、步骤、旁白、时长，再一键导出视频。
第五，批量个性化能力。一个学生的整本错题本，可以一次性生成一组个性化讲解视频。这是人工录制几乎做不到的。
💬 评论