HTML 转视频，在浏览器里逐帧渲染
粘贴 Claude、ChatGPT、Gemini 生成或自己写的 HTML，或拖入 .html、.zip 文件，导出为 MP4、GIF 或透明 WebM。每一帧都在本机绘制，画面流畅，也不会上传任何内容。
- ✓免费，无水印，无需注册
- ✓内容不离开浏览器
- ✓逐帧精确，最高 4K 60 fps
- ✓MP4、GIF、WebM 和 PNG
1920×1080 MP4，在你的电脑上逐帧绘制：不管电脑快慢都流畅，文件不会上传。
或者从示例开始
每个示例都是一个 HTML 文件。载入、修改、导出即可。
原理
三步完成，全程在浏览器里
工具接管页面的时钟，一次推进一帧并逐帧绘制，所以慢电脑和快电脑导出的视频完全一样。
- 01
粘贴代码，或拖入文件
带 CSS 和 JavaScript 的完整页面、一个 .html 文件，或包含图片和字体的 .zip 导出包。来自 CDN 的库照常加载。
- 02
选择格式和尺寸
MP4、GIF、WebM 或单帧 PNG；16:9、9:16 或 1:1；720p 到 4K，24、30 或 60 fps。动画有终点时，时长会自动设定。
- 03
渲染并下载
每一帧都在本机绘制和编码，完成后即可下载。不弹屏幕共享提示，不上传。
支持范围
浏览器能动起来的，都能转
只要能在浏览器标签页里动起来，就能变成视频：工具会控制 CSS、Web Animations API、计时器和 requestAnimationFrame 的时间，而所有动画库都建立在这些之上。
CSS 动画与过渡
关键帧、过渡、@property 和滤镜，时间与代码完全一致。
GSAP 与 anime.js
支持从 CDN 加载的时间线和补间动画；GSAP 时间线的时长会自动识别。
SVG 动画
用 stroke-dashoffset 做的线条描绘、形变和渐变动画。
Canvas 绘制
由 requestAnimationFrame 驱动的 2D 画布绘制和粒子系统。
Three.js 与 WebGL
3D 场景和着色器，逐帧渲染，任意尺寸。
p5.js 创意编程
生成艺术草图和创意编程作品，导出不丢帧。
Tailwind 与界面原型
用类名、计时器和 Web Animations API 做动画的产品首屏和应用界面。
AI 生成的页面
Claude、ChatGPT 或 Gemini 写成单个 HTML 文件的动画、讲解和图表。
格式
一次粘贴，导出所有格式
按用途选择文件格式。同一个页面可以渲染成任意格式，三种画幅都支持。
MP4
H.264 · 720p、1080p、4K · 24/30/60 fps
适合社交媒体、幻灯片和视频剪辑软件，到处都能播放。
GIF 动图
360p 到 720p · 10/15/25 fps · 循环播放
适合 README、Slack 消息、邮件和文档。
透明 WebM
VP9 带 Alpha 通道 · 720p 到 4K
去掉页面背景，作为叠加层用于 Premiere、DaVinci Resolve、Final Cut 或 CapCut。
PNG 静帧
1080p 或 4K · 任意时刻 · 可透明
把某一帧存成静态图：海报、缩略图或幻灯片配图。
用途
这些动画会用在哪里
社交
帖子和短视频
16:9 用于 X 和 LinkedIn，9:16 用于 TikTok、Reels 和 Shorts，1:1 用于信息流。平台只收视频，不收 HTML。
幻灯片
PowerPoint、Keynote 和 Google Slides
演示文稿能播放 MP4 或 GIF，却播放不了 HTML 动画。
剪辑
视频剪辑里的标题和叠加层
把字幕条或 Logo 动画导出为透明 WebM，直接叠在素材上。
文档
README 和文档
组件或图表的 GIF，放在读者正在看的地方。
作品集
Dribbble、Behance 和案例展示
把 CodePen 或自己项目里的动效作品导出为干净、清晰的视频。
产品
发布和演示
用 HTML 做的产品首屏或应用界面动画，导出为发布帖里的短片。
来自 AI 对话
把 Claude、ChatGPT 或 Gemini 生成的动画转成视频
- 01
要一个 HTML 文件
让 AI 生成「一个包含 CSS 和 JavaScript 的独立 HTML 文件」，并铺满窗口。说明想要的时长，让动画有明确的终点。
- 02
复制代码，或下载文件
从对话中复制整个页面，或下载 .html 文件。如果工具导出的是文件夹或 .zip（Claude Design 就是这样），保留 .zip 即可。
- 03
粘贴或拖入，然后渲染
预览会播放动画；选择 MP4、GIF 或 WebM 后渲染。需要修改时，让 AI 改好，粘贴新版本，再渲染一次。
为什么逐帧渲染
任何电脑都流畅，而且私密
录屏只能留下电脑当时显示出来的画面，丢掉的帧也一并留下。这里页面的时间会停住，直到每一帧画完。
逐帧精确
每一帧都在各自的时刻绘制，60 fps 就是每秒 60 张不同的画面，慢电脑也一样。
不上传任何内容
页面在浏览器的沙盒框架中运行，文件也在本地编码。代码不会到达任何服务器。
免费，无水印
无需账号，没有积分，视频上没有 Logo。
HTML 转视频的几种方式
| 本工具 | 在线转换器 | 命令行渲染器 | 录屏 | |
|---|---|---|---|---|
| 文件会被上传 | 否 | 是 | 否 | 否 |
| 需要账号或带水印 | 都没有 | 免费版常有 | 都没有 | 都没有 |
| 逐帧精确 | 是 | 通常是 | 是 | 否，会留下丢帧 |
| 时长 | 最长 5 分钟 | 免费版常有限制 | 不限 | 不限 |
| 透明背景 | WebM 和 PNG | 部分支持，需付费 | 支持 | 不支持 |
| 安装配置 | 无需配置，有浏览器即可 | 无需配置 | Node、Chrome 和 FFmpeg | 录屏软件 |
手里是网页链接？
把公开网页变成流畅的滚动视频，用于发布帖或作品集。
这个工具之外
一段动画只是开始，Skill 能做出整部片子
这个工具把已有的 HTML 转成视频。Motion Skill 则从更早一步开始：在 Claude Code、Codex 或 Cursor 里，Agent 读取产品资料或笔记，规划镜头，写出每一个场景，配好音乐，再渲染出成片 MP4。
- ✓从自己的素材出发，而不是空白提示词
- ✓多个场景，配着音乐剪在一起
- ✓在本地电脑上渲染，成片归自己使用
从这里接着做的 Skill
每个 Skill 做的片子类型都不同，第一个与本页最接近。
要做的片子不止一种？
可以先免费用 Motion Director。单个 Skill $4.90；订阅方案解锁全部 Skill，新上线的也包含在内。
月付
$9.90/ 月
- ✓全部完整版 Skill，风格内置
- ✓新 Skill 上线即可用
- ✓现有 Skill 的更新
- ✓渲染成果可商用
年付
省 34%$79/ 年
- ✓全部完整版 Skill，风格内置
- ✓新 Skill 上线即可用
- ✓现有 Skill 的更新
- ✓渲染成果可商用
创始终身版
创始会员优惠$169一次性
- ✓全部完整版 Skill，风格内置
- ✓新 Skill 上线即可用
- ✓现有 Skill 的更新
- ✓渲染成果可商用
- ✓一次付费，无需续费
常见问题
HTML 会被上传吗？
不会。页面在浏览器的沙盒框架中运行，与本站隔离，视频在本机编码。不会向我们发送任何内容。
支持哪些动画？
所有由页面时钟驱动的动画：CSS 动画与过渡、Web Animations API、GSAP、anime.js、SVG、Canvas、Three.js 与 WebGL、p5.js，以及使用计时器或 requestAnimationFrame 的代码。页面中嵌入的视频、iframe，以及来自禁止跨站读取的网站的图片无法渲染；遇到这些情况，请使用「改用实时录制」。
和录屏有什么区别？
录屏是实时播放页面，只能留下电脑当时显示出来的画面，页面一复杂就会卡顿。本工具会停住页面的时钟，推进到每一帧对应的时刻再绘制，因此无论电脑快慢，视频都流畅，时长也总是分毫不差。
视频最长多久、最大多大？
最长 5 分钟。MP4 和 WebM 支持 720p、1080p 或 4K，24、30 或 60 fps；GIF 支持 360p 到 720p，10、15 或 25 fps。越长越大，耗时和内存占用也越多。
怎么把 Claude 或 ChatGPT 生成的动画转成视频？
让 AI 生成一个独立的 HTML 文件，复制（或下载）后粘贴到这里并渲染。如果所用工具导出的是 .zip（比如 Claude Design），直接拖入 .zip，其中的图片、脚本和字体都会从包里读取。
能导出透明背景吗？
可以，导出为 WebM（VP9 带 Alpha 通道）或 PNG：勾选「透明背景」，页面自身的背景就会被去掉。MP4 不支持透明。Premiere、DaVinci Resolve、Final Cut 和 CapCut 等剪辑软件都能导入透明 WebM。
支持哪些浏览器？
电脑上的 Chrome、Edge 和 Firefox，以及 Android 上的 Chrome。Safari 不允许以这种方式绘制页面，因此 iPhone 和 iPad 上的所有浏览器都无法使用；请改在电脑上打开。
GIF 会循环播放吗？
会，GIF 会无限循环。想要无缝循环，把时长设为动画的一个完整周期；页面本身循环时，显示的时长就是这个周期。
视频有声音吗？
没有，导出的文件是无声的。可以在剪辑软件里加配乐，或用 Motion Director 制作一支带音乐的完整影片。Motion Director 是一个免费 Skill，适用于 Claude Code、Codex 和 Cursor。
某一帧和页面看起来不一样，为什么？
少数效果暂时无法逐帧绘制，比如叠加在页面上并带混合模式的固定定位图层。可以在电脑上的 Chrome 或 Edge 中试试「改用实时录制」，它会在播放时直接捕获标签页。
免费吗？
免费：无需注册，没有水印，视频数量不限。
下一步