拜拜了 Remotion/Hyperframes，让 AI 用代码做视频，5 分钟生成 B 站 UP 主专业级视频！

原文链接：https://mp.weixin.qq.com/s/bXLDuQxk0ekWjTpUg8baWw 作者：轩辕之风 | 公众号：轩辕的编程宇宙 发布时间：2026-04-24

摘要

轩辕之风把 HTML 视频做到了一个网站里——一句话描述需求，AI 自动完成逐字稿→分镜→画面代码生成→配音→合成全流程，5 分钟产出 B 站 UP 主专业级知识讲解视频。核心突破：一条 1 分钟视频成本仅 1-2 块钱（vs Remotion/Hyperframes 烧 Claude Pro Token），全流程可见可编辑（不爽哪帧单独重画，不用整条重来），内置多音色配音。网站 svganimate.ai，注册送 50 积分。

什么是 HTML 视频？

不走传统剪辑路线（PR/AE/剪映处理镜头素材、调色、转场），而是用网页代码写每一帧画面，浏览器渲染后录制成视频。

核心优势：

• 文字和图表永远清晰（矢量，不是像素堆出来的）
• 改一帧不用动整条时间线（代码改哪帧动哪帧）
• 整个制作流程可以让 AI 全包（写代码是 AI 现阶段最成熟的能力）

天然适合知识内容。

全流程自动化：一句话 → 完整视频

输入一句话描述需求，AI 自动完成：

1. 逐字稿 + 分镜：扩展成完整讲解旁白，拆成分镜脚本，每个分镜的旁白、画面提示词可自定义修改
2. 画面生成：每个分镜转成独立 HTML 页面（完整布局/排版/动画），自动套用选定视觉风格
3. 合成导出：按时间轴拼接所有画面 + AI 旁白音频 → 导出可直接播放/上传的视频

整个过程只需写一句话，其余 AI 全包。

两个关键选项：风格 + 音色

视觉风格

分析了 B 站大 UP 主的优秀视频风格，也集成了 Anthropic 审美风格。每种风格对应完整配色/字体/排版语言，AI 生成时严格遵守，保证整条视频从头到尾视觉统一。

旁白音色

内置多种中英文音色，点击试听后选定，AI 自动按逐字稿合成完整旁白音轨。支持关掉配音自己录，字幕也可开关。

vs Remotion / Hyperframes：三个硬伤被解决

维度	Remotion/Hyperframes	svganimate.ai
成本	走 AI Skills 路线，烧 Claude Pro Token，一条视频没做完额度就没了	1 分钟视频 1-2 块钱
可控性	黑盒，不满意只能整条重新生成，再赌一次运气	每个环节可见可编辑：逐句改稿、单分镜重画、单独重合成配音
音频	侧重画面，音频自己想办法	内置多音色配音，一键开关灵活配置

新增动画类型

网站动画创作能力大升级，目前覆盖十几种动画类型：

• 新增：3D 动画（分子结构、产品立体演示）、手绘动画（铅笔速写/水彩涂鸦风）、线条绘制动画（Logo 描边、轨迹绘制）
• 已有：地图动画、数据可视化、流程图、产品演示、文字动画、Logo 动画、火柴人、加载动画、网页小游戏

适合谁用

• 知识讲解：知识点 → 有脚本/分镜/旁白的完整视频
• 课堂教学：课程内容 → 适合课堂演示的画面和讲解节奏
• 故事讲解：故事主题 → 带旁白、分镜清晰的短视频
• 产品介绍：功能/流程/卖点清晰演示
• 数据故事：数据动起来，比静态图更有冲击力

不需要会视频剪辑，不需要动效软件。 所有内容生成后可继续编辑（逐字稿、分镜提示词、画面、配音）。

体验入口

网站地址：https://svganimate.ai/ 注册免费送 50 积分，可免费创作 5 个动画内容。