從對話到影片
- 1
請 AI 給一個 HTML 檔
告訴助理要做什麼動畫，並要求只給一個 HTML 檔。加上下方的提示詞，拿到的結果就能直接匯出。
- 2
複製程式碼
在 ChatGPT、Claude 或 Gemini 裡，按程式碼區塊上的複製按鈕。如果助理顯示的是即時預覽，請先切換到程式碼檢視。
- 3
貼上並匯出
貼到本頁最上方，依平台選擇畫面比例（Reels、Shorts 和 TikTok 用 9:16，YouTube 和簡報用 16:9），然後匯出。
讓 AI 直接寫出可匯出的版本
把這段文字接在你的需求後面，或連同已有的程式碼一起傳給 AI。這樣拿到的結果第一次就能正常算圖。
請把這個動畫改寫成一個獨立完整的 HTML 檔，我要用 htmlto.video 把它匯出成影片： - 以 16:9 的畫面比例設計。畫面必須剛好填滿瀏覽器視窗（100vw × 100vh，不出現捲軸）。所有尺寸都用 vw 和 vh，才能配合任何解析度縮放。 - 頁面載入後自動開始播放，不需要滑鼠、鍵盤或捲動操作。 - 長度固定。在第一行用註解標明長度，例如 <!-- duration: 8s -->。 - 動畫請用 CSS 動畫、Web Animations API、GSAP，或使用時間戳記參數的 requestAnimationFrame 製作。不要使用 video、audio 或 iframe。 - 所有 CSS 和 JavaScript 都內嵌在 HTML 檔案中。圖片以行內 SVG 或 data URL 嵌入。字型和函式庫只能來自允許跨來源載入的 CDN，例如 Google Fonts、cdnjs 或 jsDelivr。 - 請在單一程式碼區塊中回覆完整的 HTML。
為什麼不用螢幕錄影，或是命令列工具？
螢幕錄影會卡頓，會錄到游標，尺寸也不對。命令列工具的結果精確，但需要安裝 Node、無頭瀏覽器和 FFmpeg。本頁做的是同樣的逐格算圖，卻什麼都不必安裝。
可以算圖的內容
- CSS 動畫和轉換效果
- GSAP、anime.js、Motion 等 JavaScript 函式庫
- Canvas 2D
- 以 CSS 或 JavaScript 製作的 SVG 動畫
- WebGL 和 Three.js
- Web Animations API 和 requestAnimationFrame
目前還做不到的
- Safari、iPhone 和 iPad 無法匯出，但可以預覽。
- 頁面裡的影片、音訊和 iframe 不會被收錄。
- 所在伺服器禁止跨來源讀取的圖片和字型會缺漏。
- 需要點按、滑鼠移入或捲動才會觸發的動畫不會前進。
- 以 <animate> 等 SMIL 標籤製作的 SVG 動畫無法擷取。
- 負擔非常重的 WebGL 場景在較慢的電腦上可能會失敗。