支援哪些寫法？

常見的四種寫法都能直接用：定義 window.__seek(t) 按秒畫一格；用 GSAP 建一條暫停的時間軸放進 window.__timelines；Three.js 場景在 __seek 裡按時間擺好再渲染；或者一般的 requestAnimationFrame 迴圈。整頁只有一塊畫布時直接取畫布，否則把整頁（SVG、CSS、文字）畫成一格。

能用 CDN 上的函式庫嗎？

GSAP（含 CustomEase、MotionPath、MorphSVG、DrawSVG、SplitText 外掛）和 Three.js 已經內建，程式碼裡指向它們的 CDN 網址會自動換成內建的那份。其他外部函式庫載入不到，因為沙盒不能連網。

匯出的影片有聲音嗎？

動效本身不帶聲音，程式碼裡播放的音訊不會被錄進去。你可以在時間軸上另外加音樂或配音，和動效一起匯出。

程式碼出錯了怎麼辦？

預覽頂部和片段上會提示出錯，錯誤原文顯示在程式碼對話框裡；點「讓 AI 修」，AI 會讀你的程式碼、改好後再看一眼效果。改好之前預覽停在最後一格正常畫面，不影響別的片段。

程式碼會上傳嗎？

不會。程式碼和專案一起存在你的瀏覽器裡，在本機渲染和匯出。只有你主動把專案存到雲端時，它才會和專案一起上傳。

HTML 轉影片

把網頁動畫、Canvas、Three.js 程式碼變成 MP4

選一個範本開始

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

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

把 Canvas、SVG、GSAP、Three.js 寫的網頁動畫貼進來，按時間逐格畫出，疊在影片上匯出 MP4 或 GIF。在瀏覽器裡完成，免費無浮水印。

貼上一段網頁動畫程式碼，或者匯入一個 .html 檔案，它就成了時間軸上的一段動效：背景透明，疊在你的影片或圖片上面，和別的片段一樣能移動位置、縮放、調透明度、加關鍵影格和進場出場動畫。

編輯器按時間逐格去畫它，而不是錄螢幕：同一時刻永遠畫出同一格畫面，預覽裡看到的就是匯出的樣子。程式碼裡的 Math.random、Date 和 requestAnimationFrame 會換成確定的時鐘；GSAP 和 Three.js 已經內建，不用寫外部連結的腳本。

程式碼在隔離的沙盒裡執行，不能連網，外部連結的圖片和字型載入不到，需要時用 data: 網址內嵌。作品自己宣告的參數（文字、顏色、數值）會出現在右邊的參數面板裡，改完直接匯出 MP4 或 GIF。

常見問題

支援哪些寫法？: 常見的四種寫法都能直接用：定義 window.__seek(t) 按秒畫一格；用 GSAP 建一條暫停的時間軸放進 window.__timelines；Three.js 場景在 __seek 裡按時間擺好再渲染；或者一般的 requestAnimationFrame 迴圈。整頁只有一塊畫布時直接取畫布，否則把整頁（SVG、CSS、文字）畫成一格。
能用 CDN 上的函式庫嗎？: GSAP（含 CustomEase、MotionPath、MorphSVG、DrawSVG、SplitText 外掛）和 Three.js 已經內建，程式碼裡指向它們的 CDN 網址會自動換成內建的那份。其他外部函式庫載入不到，因為沙盒不能連網。
匯出的影片有聲音嗎？: 動效本身不帶聲音，程式碼裡播放的音訊不會被錄進去。你可以在時間軸上另外加音樂或配音，和動效一起匯出。
程式碼出錯了怎麼辦？: 預覽頂部和片段上會提示出錯，錯誤原文顯示在程式碼對話框裡；點「讓 AI 修」，AI 會讀你的程式碼、改好後再看一眼效果。改好之前預覽停在最後一格正常畫面，不影響別的片段。
程式碼會上傳嗎？: 不會。程式碼和專案一起存在你的瀏覽器裡，在本機渲染和匯出。只有你主動把專案存到雲端時，它才會和專案一起上傳。

選一個範本開始

常見問題

相關工具