HTML 转 GIF，在浏览器里逐帧渲染
粘贴 HTML、CSS 或 SVG 动画，导出为循环 GIF，用于 README、Slack 消息、邮件或文档。每一帧都在本机绘制，不上传任何内容。
- ✓无限循环
- ✓360p 到 720p，最高 25 fps
- ✓免费，无水印
- ✓不上传任何内容
854×480 GIF，在你的电脑上逐帧绘制：不管电脑快慢都流畅，文件不会上传。
或者从示例开始
每个示例都是一个 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
渲染并下载
每一帧都在本机绘制和编码，完成后即可下载。不弹屏幕共享提示，不上传。
做出小而清晰的 GIF
尽量短
2 到 6 秒就够了；GIF 的体积会随帧数一起增长。
只循环一个周期
把时长设为动画的一个完整周期，循环衔接处就不会跳。
15 fps、480p
默认设置适合大多数文档和聊天；快速运动用 25 fps，需要细节用 720p。
纯色效果最好
GIF 每帧只有 256 种颜色，大面积渐变和照片会出现色带。这类内容用 MP4 更小也更清晰。
这个工具之外
一段动画只是开始，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 的更新
- ✓渲染成果可商用
- ✓一次付费，无需续费
常见问题
怎么把 CSS 动画转成 GIF？
粘贴页面（HTML 及其 CSS），选择 GIF，把时长设为一个周期，然后渲染。GIF 逐帧绘制，因此画面流畅，时长与设定完全一致。
GIF 为什么这么大？
每一帧都单独保存一套 256 色调色板。可以缩短时长、降低帧率或尺寸，或改用 MP4，体积往往只有 GIF 的十分之一。
GIF 支持透明背景吗？
不支持：GIF 的透明只有「透明」和「不透明」两种，柔和的边缘会出现锯齿。需要透明时，请用同一工具导出 WebM 或 PNG。
会上传任何内容吗？
不会。页面在浏览器中运行，GIF 也在浏览器中编码。