TutuCut

After Effects 替代：在瀏覽器裡做文字動效、畫中畫和圖文包裝

現成範本改字換素材就能用，會寫程式還能自己寫；免費、不裝軟體、不上傳。

選一個範本開始

讓 AI 做一個 說說想要的效果，AI 寫好放進時間軸 貼上程式碼 / 匯入 .html Canvas、SVG、GSAP、Three.js 寫的網頁動畫都能放進來

點一下進編輯器，動效已經加好。帶素材槽的範本可以把影片、圖片拖到卡片上，或點「用我的素材」選檔案，進去時就已經放好。檔案只在你的裝置上，不上傳。

想做標題動效、人名條、畫中畫小視窗、照片牆這類包裝，又不想裝 After Effects？圖圖剪輯在瀏覽器裡就能做：選範本改字，把影片和圖片拖進去，匯出 MP4。會寫 HTML / CSS / GSAP 的話可以自己寫效果。做不到的：粒子、3D 攝影機追蹤、專業多層合成這類重活，仍是 After Effects 的強項。

很多人打開 After Effects 只是為了做一個標題動效、一條人名條、一個畫中畫小視窗或一面照片牆。這些在圖圖剪輯裡有現成範本：選一個、改字、把影片或圖片拖進素材槽，動效就疊在你的影片上，匯出 MP4。

範本背後是普通的 HTML、CSS 和 GSAP，點「編輯程式碼」就能改；會寫的人可以從零寫一個，也可以讓 AI 按你的描述寫。字型可以選中文字型，畫面在瀏覽器裡逐格渲染，預覽和匯出用的是同一套畫法。

不如 After Effects 的地方：沒有粒子系統、3D 攝影機追蹤、表達式和外掛生態，也打不開 .aep 專案。如果你做的是電影級合成或複雜特效，After Effects 仍然是對的工具；做日常的影片包裝，這裡更快。

圖圖剪輯和 After Effects 比

對比項TutuCutAfter Effects
怎麼寫動效普通 HTML / CSS / JS（Canvas、SVG、GSAP、Three.js） 未核實
要會什麼改範本不用會程式，自己寫會 HTML 就行 未核實
和實拍影片、圖片一起剪同一條時間軸，素材能直接進動效 未核實
要安裝什麼什麼都不裝，打開網頁就用 未核實
AI 幫你寫內建 AI 助手，寫好直接放進時間軸 未核實
費用免費，無浮水印 未核實
用資料在伺服器上批次渲染不支援 未核實

核對於 2026-10-04。每一格旁的 ↗ 是出處，點開可以自己看。

常見問題

能開啟 After Effects 的 .aep 專案或範本嗎？
不能。.aep 是 Adobe 的專案格式，我們讀不了。可以用我們的範本，或者把效果用 HTML / CSS / GSAP 重新寫一遍 —— 把想要的效果描述給 AI，它會寫好放進時間軸。
有哪些現成的動效範本？
有標題、人名條、倒數計時、資料圖表、畫中畫小視窗、照片牆、裝置樣機、圖文分割畫面等。帶素材槽的那些可以直接把你的影片和圖片拖進去；所有範本都能改字、改顏色，也能打開程式碼自己改。
做出來的動效能和影片一起剪嗎？
能。動效是時間軸上的一段，背景透明，疊在影片上；可以拖動、裁剪、調時長，改字和顏色在右側屬性面板裡。預覽和匯出用同一套畫法，看到的就是匯出的。
需要付費或註冊嗎？
不需要。編輯和匯出免費、沒有浮水印、不用註冊，AI 助手對沒登入的人也開放。只有把專案存到雲端時需要登入。
手機上能用嗎？
能。在手機瀏覽器裡打開就行：選範本、改字、換素材都有觸控操作（長按、拖動），匯出也在手機上完成。寫程式碼這類細活建議用電腦。

相關工具