TutuCut

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 比

對比項TutuCutRemotion
怎麼寫動效普通 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 人以下的公司和非營利組織可以免費使用，更大的公司需要購買公司授權。圖圖剪輯編輯和匯出都免費、沒有浮水印、不用註冊。

相關工具