影片 · 趨勢
用 HyperFrames 把 Claude 做的影片算繪成 MP4：實測教學
這週談 Claude Opus 5.5 影片的貼文，常會提到 HyperFrames 或 Remotion 這類算繪工具：Claude 用程式碼寫出影片，再由算繪工具把它變成 MP4。HyperFrames 是 HeyGen 推出的開源算繪工具。2026 年 9 月 28 日，在 Google Trends 的 90 天檢視中，HyperFrames 名列與 Remotion 相關、上升最快的搜尋之一。
我們照小商家會使用的方式來測試。2026 年 9 月 28 日，我們把在 claude.ai 用過的同一份咖啡館 Reel 需求說明，連同 HyperFrames 命令列工具，交給一個執行 Opus 5.5 的 Claude Code 工作階段。Ciyo 並不提供 Claude Opus 5.5；照片來自 Ciyo，其他一切都在一台 MacBook 上執行。
HyperFrames 做的事
HyperFrames 會讀取一個元素帶有時間屬性的 HTML 頁面，在無頭（headless）Chrome 裡一格一格播放，再用 ffmpeg 把這些畫面編碼成 MP4。因為每一格都是從頁面計算出來，而不是即時錄製，所以同一個檔案每次都會產生同一支影片。
這個專案以 Apache 2.0 授權開源。它的 GitHub 儲存庫建立於 2026 年 3 月，0.8.81 版於 2026 年 9 月 27 日發布。它提供 Claude Code 外掛和命令列工具；我們透過 npx 使用命令列工具，所以沒有在全域安裝任何東西。
| 比較項目 | claude.ai | Claude Code + HyperFrames |
|---|---|---|
| 由誰算繪 | Claude 自己的腳本，在對話的沙箱裡執行 | 你電腦上的 HyperFrames |
| 你保留什麼 | MP4 | MP4 和一個可編輯的 HTML 組合 |
| 修改一行 | 再要求一次，它會重新算繪 | 編輯 HTML 後再算繪一次 |
| 同一個檔案，同一支影片 | 未測試 | 是：在我們的測試中逐位元組相同 |
需求說明和照片
我們在 Ciyo 以 2K 製作產品照，得到 1440 × 2560 像素，比 Reel 需要的 1080 × 1920 還大。接著我們把在 claude.ai 用過的同一份咖啡館需求說明交給 Claude Code，只多加一條指示：使用 HyperFrames 命令列工具，並從它自己的說明文件學習格式。
請透過 npx -y hyperframes@0.8.81 使用 HyperFrames CLI。從 npx -y hyperframes@0.8.81 docs 學習組合的格式（data-attributes、compositions、gsap、rendering）。不要在全域安裝 skills、外掛或任何東西，也不要發布。最終影片請交付為 fernhollow-reel-hyperframes.mp4。Claude 一步一步做了什麼
整個工作花了 5 分 44 秒。Opus 讀了說明文件，用 init 建立專案骨架，寫了一個包含四條軌道的 HTML 檔：照片、標題、優惠和片尾卡。每一條都是一個帶有開始時間和長度的元素，由 GSAP 負責其中的動畫。
算繪之前，它執行了 HyperFrames 的 check 指令，結果沒有錯誤、有四個關於結構的警告；它也在指定的時間點用 snapshot 拍下靜態畫面。在這些畫面裡，價格蓋到了杯子的上緣，所以它移動了縮放的錨點，並把標題縮小。它還移除了一個把「New for autumn」變成全大寫的樣式，讓文字完全照原文呈現。
算繪結果的量測
在搭載 M1 Max 晶片的 MacBook Pro 上，render 指令花了 59 秒。MP4 是 1080 × 1920、每秒 30 格、450 格、15.0 秒、16.4 MB，沒有音軌。五行文字全部正確。
接著我們把同一個專案再算繪一次。這次花了 28 秒，而且檔案逐位元組完全相同：SHA-256 校驗碼一樣，450 格中 450 格都相同。這正是程式碼影片對商家有用的地方：你改一個價格，就只有那個價格會變。
算繪工具不會幫你修設計
HyperFrames 讓算繪精確，但不會讓設計變好。這支 Reel 和 Opus 在 claude.ai 做的那支有同樣的習慣：開場畫面沒有文字，第一行在 0.5 秒才開始淡入，片尾卡在照片上蓋了一層深色遮罩，讓杯子的亮度降到 255 中的大約 43。
好消息是，每一項修正都只是在一個檔案裡做小小的編輯。請 Claude 在第一格放上名稱、在片尾卡讓產品保持明亮，再重新算繪，一分鐘內就能完成。
開始前要知道的事
HyperFrames 需要你的電腦上有 Node 22、Chrome 和 ffmpeg；它的 doctor 指令會檢查這些。這個專案從 CDN 載入 GSAP、從 Google Fonts 載入兩套字型，並使用了一套 macOS 系統字型，所以在另一台電腦上算繪時，畫面可能會不一樣，除非你使用它的 Docker 選項。命令列工具也會蒐集匿名的使用遙測資料，你可以用 hyperframes telemetry disable 關閉。
| 指令 | 做了什麼 |
|---|---|
| npx hyperframes docs | 顯示組合的格式 |
| npx hyperframes init | 建立專案檔案 |
| npx hyperframes check | 在算繪前找出版面和對比的問題 |
| npx hyperframes snapshot | 在指定時間點算繪靜態畫面 |
| npx hyperframes render | 寫出 MP4 |
HyperFrames 與 Claude
HyperFrames 是什麼？
HeyGen 推出的開源工具，能在無頭 Chrome 裡一格一格地把 HTML、CSS 和 JavaScript 動畫算繪成 MP4 或 WebM。
用 Claude 做影片一定要用它嗎？
在 claude.ai 裡不需要：Opus 5.5 會用自己的腳本算繪出 MP4。在你電腦上的 Claude Code 裡，HyperFrames 這類算繪工具會把 HTML 變成影片，並讓原始檔保持可編輯。
算繪一次要多久？
在一台 M1 Max 的 MacBook Pro 上，我們 15 秒、1080 × 1920 的 Reel 第一次花了 59 秒，第二次花了 28 秒。
Ciyo 有提供 HyperFrames 或 Opus 5.5 嗎？
沒有。Ciyo 負責做產品照。Opus 5.5 和 HyperFrames 是在本機電腦上的 Claude Code 裡執行。
從一張值得動起來的照片開始
在 Ciyo 以 2K 生成產品靜態圖，再讓程式碼圍繞它做出動態。