Motion Skills
← 教學

HyperFrames 與 Remotion：AI 製作影片該選哪個引擎？

兩者都能讓 Agent 用程式碼寫影片並渲染成 MP4。差別在於 Agent 要寫什麼，以及授權方式：HyperFrames 使用 HTML、CSS 和 GSAP，採用 Apache 2.0 授權；Remotion 使用 React，個人和 3 人以內的公司可免費使用。

授權和價格資訊取自各專案自己的頁面，已於 2026 年 10 月 29 日核實。

HyperFrames

  • 要寫什麼： HTML、CSS 和 GSAP 時間軸，Agent 本來就寫得很熟練。
  • 渲染： 一個 CLI（npx hyperframes render）操作無頭 Chrome 和 FFmpeg 逐格渲染，結果是確定的。需要 Node.js 22 或更新版本，以及 FFmpeg。
  • 為 Agent 設計： check 會執行語法、執行階段、版面、動效和對比度檢查；snapshot 會擷取靜態畫面，讓 Agent 在渲染前先看看自己的成果。它提供 Claude Code 外掛和獨立的 Skill。
  • 授權： Apache 2.0，可免費商用。github.com/heygen-com/hyperframes

Remotion

  • 要寫什麼： React 元件，搭配以影格為單位的 Hook（useCurrentFrame）。
  • 優勢： 生態系成熟，很適合大規模的資料驅動、程式化影片，也能在 Lambda 上進行伺服器端渲染。
  • 為 Agent 設計： 官方的 Agent Skills（npx remotion skills add）能教 Claude Code、Codex 或 Cursor 寫出正確的 Remotion 程式碼。
  • 授權： 個人和 3 人以內的公司免費；4 人以上的公司需要 Company License。

授權一覽

授權 免費對象 何時需付費
HyperFrames Apache 2.0 所有人，包括商業用途 引擎本身永遠不需付費
Remotion Remotion License 個人和 3 人以內的公司 4 人以上：Remotion for Creators，每個席位每月 $25；Remotion for Automators，每次渲染 $0.01，每月最低 $100
Motion Canvas MIT 所有人，包括商業用途 函式庫本身永遠不需付費

Motion Canvas 的定位

Motion Canvas 是第三個選擇，思路不同：它是「一個使用產生器來編寫動畫的 TypeScript 函式庫」，另附一個能即時預覽動畫的編輯器。每段動畫都是你親手寫下的一連串步驟，適合想掌控每個節拍的講解片。它不像 HyperFrames 和 Remotion 的 Skill 那樣以 Agent 為核心設計，README 中也沒有描述一個命令就能渲染出 MP4 的方式，因此影片如何輸出，請查看它的文件。

我們用的是哪一個

我們的完整版 Skill 和免費的 Motion Director 執行在我們自己的開源引擎 motion-skills 上（mo，透過 npx 執行）。它的思路和 HyperFrames 相同：一支影片就是 HTML、CSS 和 GSAP，在 Chrome 中逐格渲染，再交由 FFmpeg 輸出；mo check 會在渲染前找出被截斷、被遮住或對比度不足的文字。我們早期的動效模板（現在作為範例保留在網站上）則直接以 HyperFrames 為基礎：HTML 和 CSS 讓它們易讀、方便手動修改，內建的檢查能及早發現版面問題。

如果你的團隊已經在用 React 和 Remotion，同樣的動效思路也完全適用。決定影片好壞的是手藝（節奏、字體排印、緩動、節制），而不是引擎。Remotion 的 Agent Skills 和我們的完整版 Skill 各做些什麼，請見 Remotion 的 Agent 技能與 Motion Skills 比較；從 Claude Code 出發的所有做法，請見如何用 Claude Code 製作影片。

常見問題

HyperFrames 可以免費商用嗎？

可以。HyperFrames 以 Apache 2.0 授權開源，因此可以在工作中使用，引擎本身不需付費。它需要 Node.js 22 或更新版本和 FFmpeg，並在無頭 Chrome 中渲染。

該選 HyperFrames 還是 Remotion？

如果你的 Agent 寫的是 HTML、CSS 和 GSAP，選 HyperFrames；如果你的團隊使用 React，或需要大規模渲染，選 Remotion。

Remotion 免費嗎？

個人和 3 人以內的公司免費。4 人以上的公司需要 Company License：Remotion for Creators 每個席位每月 $25，Remotion for Automators 每次渲染 $0.01，每月最低 $100。

Motion Canvas 呢？

Motion Canvas 是採用 MIT 授權的 TypeScript 函式庫，用程式碼驅動動畫，並附有即時預覽編輯器。它適合你親手撰寫的講解片，而不是由 Agent 替你寫的影片。

資料來源

本比較為獨立內容，與 HeyGen、Remotion 或 Motion Canvas 均無關聯。已於 2026 年 10 月 29 日核實。