图图剪辑

Remotion 替代方案：用 HTML 写动效，在浏览器里剪成视频

不装 Node.js、不写 React，HTML / CSS / GSAP 动效和你的视频图片放在同一条时间轴上。

选一个模板开始

粘贴代码 / 导入 .html Canvas、SVG、GSAP、Three.js 写的网页动画都能放进来 让 AI 做一个 说说想要的效果，AI 写好放进时间轴

点一下进编辑器，动效已经加好。带素材槽的模板可以把视频、图片拖到卡片上，或点「用我的素材」选文件，进去时就已经放好。文件只在你的设备上，不上传。

图图剪辑可以当 Remotion 的替代：用 HTML、CSS、Canvas、GSAP 或 Three.js 写动效，在浏览器里直接放进时间轴，和实拍视频、图片一起剪，导出 MP4。不用装 Node.js、不用写 React，AI 也能帮你写。做不到的：不能在服务器上用数据批量渲染上千条，这件事 Remotion 更合适。

Remotion 用 React 组件写视频，要先装 Node.js、建工程、写代码再渲染。图图剪辑换了一条路：动效就是一段普通的 HTML，CSS 动画、Canvas、SVG、GSAP、Three.js 写的都能直接粘进来，在浏览器里逐帧画出，和你的视频、图片、字幕放在同一条时间轴上剪，导出 MP4 或 GIF。

素材可以直接进动效：代码里写 tutu-asset 记号，就能引用素材库里的图片、视频、GIF 和字体；模板里也有现成的素材槽（直播小窗、照片墙、设备样机……），把视频拖上去就放好了。全部在你的浏览器里处理，素材不上传。

我们不如 Remotion 的地方也写清楚：Remotion 能在服务器（包括 AWS Lambda）上用数据批量渲染成千上万条视频，我们没有这种批量渲染接口；它的 React 组件生态也更大。如果你要的是「一条数据出一条视频、全自动出片」，选 Remotion；如果是「做一条带动效的视频、边看边改」，这里更省事。

图图剪辑和 Remotion 比

对比项图图剪辑Remotion
怎么写动效普通 HTML / CSS / JS（Canvas、SVG、GSAP、Three.js） React 组件
要会什么改模板不用会代码，自己写会 HTML 就行 React
和实拍视频、图片一起剪同一条时间轴，素材能直接进动效 支持拖放编辑
要安装什么什么都不装，打开网页就用 Node.js，用命令行建工程
AI 帮你写内置 AI 助手，写好直接放进时间轴 可配合编程 AI 使用
费用免费，无水印 个人、3 人及以下公司、非营利组织免费；其余需公司许可
用数据在服务器上批量渲染不支持 支持（包括 AWS Lambda）

核对于 2026-10-04。每一格旁的 ↗ 是出处，点开可以自己看。

常见问题

图图剪辑能直接打开 Remotion 工程吗？
不能。Remotion 工程是 React 代码，要在 Node.js 里打包渲染；图图剪辑跑的是普通 HTML。迁移的做法是把动画部分改写成一个 HTML 页面：用 GSAP 时间线或 window.__seek(t) 按时间画一帧，参数从 __PARAMS__ 读，素材用 tutu-asset 记号引用。也可以把想要的效果告诉 AI，让它直接写一个。
需要安装什么吗？
不需要。打开网页就能用，不装 Node.js、不建工程、不用命令行。动效在你的浏览器里逐帧画出并导出，素材和代码都不上传。
动效里能用我自己的视频和图片吗？
能。代码里写 tutu-asset 记号引用素材库里的图片、视频、GIF 和字体；带素材槽的模板直接把文件拖上去就行。视频槽可以打开「带声音」，声音会作为单独一段音频跟着动效。素材丢了会显示占位并提醒你重新关联，导出前会拦住，不会悄悄导出缺图的版本。
能批量出几百条视频吗？
不能自动批量渲染。图图剪辑一次编辑一条视频；如果你需要用一张表格的数据自动生成成百上千条视频，Remotion 的服务器 / Lambda 渲染更合适。
Remotion 收费吗？图图剪辑呢？
按 Remotion 官方许可证，个人、3 人及以下的公司和非营利组织可以免费使用，更大的公司需要购买公司许可。图图剪辑编辑和导出都免费、没有水印、不用注册。

相关工具