用代码生成讲解视频
做一个讲解大模型训练过程的 1 分钟短视频需要多少时间？用对方法，5 分钟就够：不需要找素材，不需要自己配音配字幕。
短视频和 B 站上有大量知识科普类动画视频，但自己做这样的视频并不容易——要学习各种专业软件，做各种交互动效。有没有可能点一下按钮，就把脑子里的想法变成教学视频？
一条完整的知识讲解视频，光有动画片段远远不够，还需要：
- 写逐字稿：把一个知识点拆解清楚，组织成口语化、有节奏的讲解
- 拆分镜：每一段话配什么画面，画面之间怎么过渡
- 配旁白：找音色、念稿、对时长
- 画面渲染：每一个分镜都要单独制作，风格还要保持统一
- 添加字幕：给视频添加字幕，并进行校对
- 合成导出：把几十个画面 + 几十段音频按时间轴拼起来
这一套流程下来，做一个 5 分钟的视频，少说也要折腾一两天。而这一连串工作，AI 都能做。svganimate.ai 把整套视频创作流程做成了「HTML 视频」功能。
该网站此前已有 SVG 动画生成能力，可以一句话生成精美的科普动画片段，画面精美且没有版权风险——做视频时素材库里找不到的片段都可以用它生成。而 HTML 视频更进一步：不只是做单个片段，而是把整段视频（包括旁白、分镜、场景切换）一次做完。
一、什么是 HTML 视频？
PR、AE、剪映擅长处理镜头素材、调色、转场。但知识讲解视频根本不需要这些，它需要的是清晰的文字、精准的图表、层次分明的信息布局。
HTML 视频走的是另一条路：把每一帧画面用网页代码写出来，让浏览器把这些网页「跑」出来，然后录制成视频。视频里看到的每一个字、每一条线、每一个动画不是剪出来的，是代码输出的。
这种技术方案有几个好处：
文字和图表永远清晰。 不管什么分辨率，因为它们是矢量的，不是像素堆出来的。
改一帧不用动整条时间线。 哪个分镜数据写错了？改那一帧的代码，其他不动。传统剪辑里，调一个画面可能牵一发动全身。
整个制作流程可以让 AI 全包。 写代码是 AI 现阶段最成熟的能力。把视频变成代码，就是把视频制作变成了 AI 最擅长的事。
这就是为什么 HTML 视频天然适合知识内容。
二、一句话，生成完整讲解视频
只需要输入一句话描述需求，系统就能自动创作一条知识讲解类视频。如果已经有详细脚本，也可以直接交给它完成。
整个流程，AI 自动做完下面这几件事：
第一步：逐字稿 + 分镜
AI 先把主题扩展成一段完整的讲解旁白，再把这段旁白拆成一段一段的分镜脚本。每个分镜的旁白、画面提示词都可以自定义修改，不满意可以不断调整。
第二步：画面生成
每一个分镜都会被转成一个独立的 HTML 页面，包含完整的布局、排版、动画效果，并且自动套用选定的视觉风格：
第三步：合成导出
按时间顺序把所有画面拼接起来，配上 AI 生成的旁白音频，最后导出成一个可以直接播放、上传的视频文件。
整个过程，只需要写一句话，剩下的 AI 全包。
三、生成前可以先选风格和音色
为了让生成的视频更符合预期，生成前有两个关键选项：视觉风格和旁白音色。
视觉风格
不同 UP 主有自己专属的视觉风格。svganimate.ai 把常见的一些大 UP 主优秀的视频视觉风格进行了分析，可以直接套用做出那样专业的画面和动效。
Anthropic 的风格最近也比较火，很多网站都在采用这种审美，也被集成了进去。
每一种风格都对应一套完整的配色、字体、排版语言，AI 在生成画面时会严格遵守，保证整条视频从头到尾视觉统一。
旁白音色
内置多个不同风格的中英文音色，点击试听后即可选定，AI 会用这个音色为整条视频生成旁白：
四、和 Remotion、Hyperframes 比，好在哪？
先介绍这两个同类方案：
- Remotion：一个用 React 写视频的开源框架，可以配合 Claude 之类的大模型用 skills 的方式跑，让 AI 写 React 代码，然后渲染成视频。
- Hyperframes：一个 HTML 视频工具，思路类似，也是配合 AI skills 来生成。
方向是一致的，都是用网页/代码作为画面源头来产出视频。但实际用下来，它们有几个比较硬的痛点：
优势 1：成本极低
Remotion 和 Hyperframes 走的是 AI skills 的路子，真用起来非常烧 Token。Claude Pro 五小时的额度，有时候一条视频都没做完就烧光了，更别说迭代调整。
而网站方案一条 1 分钟左右的视频，成本只要 1~2 块钱。
优势 2：全流程可见、可干预，告别黑盒
skills 方式的整个过程是个黑盒：给一个输入，吐一个视频出来，中间过程无从干预。哪一段画面不满意？哪一句旁白想改？只能整条重新生成，再烧一波 Token，再赌一次运气。
网站方案做了完全相反的设计：每一个环节都可见、可编辑。
- 逐字稿生成完，可以逐句修改
- 分镜拆完，可以调整某一个分镜的提示词
- 某一帧画面不满意，可以单独重画那一个分镜，其他不动
- 旁白觉得节奏不对，可以单独重新合成
灵活性比黑盒方案高了一大截，迭代成本也低了一大截。
优势 3：自带多音色配音，也支持关掉自己配
Remotion 和 Hyperframes 主要侧重画面，音频部分基本要自己想办法。网站方案生成视频的同时把声音也一起配上了，内置多种中英文音色，AI 自动按逐字稿合成完整旁白音轨。需要自己配音的创作者，也完全可以一键关闭自带配音。字幕同样可以开关或替换。
五、HTML 视频适合谁用？
HTML 视频特别适合下面几类场景：
- 知识讲解：把一个知识点直接变成有脚本、有分镜、有旁白的讲解视频
- 课堂教学：围绕课程内容生成适合课堂演示的分镜画面、讲解旁白和教学节奏
- 故事讲解：把一个故事主题转成带旁白、分镜清晰、节奏完整的讲解短视频
- 产品介绍：用一个视频清晰演示产品的功能、流程和卖点
- 数据故事：把数据用动画的方式讲出来，比单纯发一张图更有冲击力
不需要会视频剪辑，也不需要会动效软件。 只要能用一句话描述想讲什么，AI 就能搞定从逐字稿到最终视频的全部环节。生成完成后，所有内容都可以继续编辑：逐字稿、分镜提示词、画面、配音，按需要反复调整。
六、配套动画能力
除了 HTML 视频，网站的动画创作能力也覆盖了多种具体场景，描述一句话就能直接生成对应类型的动画。
3D 动画
带 3D 立体感的动画，适合做抽象概念可视化、产品立体演示、科幻风视觉等场景，比如呈现分子结构：
手绘动画
铅笔速写、水彩涂鸦风格的动画，适合做温暖的、有人情味的科普内容、儿童教育、绘本风讲解等：
线条绘制动画
「逐笔描绘」的线条动画，特别适合 Logo 描边、地图路线、轨迹绘制等需要「画出来」过程感的场景：
加上地图动画、数据可视化、流程图、产品演示、文字动画、Logo 动画、火柴人、加载动画、网页小游戏等，目前工具页已经覆盖了十几种主流的动画类型。
