📅 資料整理日期：2026-10-05
⚠️ 版本／Star 數可能隨時變動，以 GitHub 官方 Repo 為準
ℹ️ 注意：本文講的是 HeyGen 開源的 HyperFrames（HTML 轉影片框架），
與另一間商業影片平台「Hyperframe.ai」是兩個不同產品。
第一部分：這是什麼？ #
| 項目 | 詳情 |
|---|---|
| 名稱 | HyperFrames |
| 開發者 | HeyGen |
| 類型 | 開源影片渲染框架（HTML/CSS/JS → 影片） |
| 授權 | Apache-2.0（免費商用，任意團隊規模） |
| GitHub | ~58.4k stars / 5.2k forks（2026-10） |
| 官網 | https://hyperframes.heygen.com/ |
| Repo | https://github.com/heygen-com/hyperframes |
核心概念：不靠時間軸編輯器，而是讓 AI agent 用 HTML、CSS、JavaScript 寫出影片。
AI 負責腳本、結構與場景配對，透過程式碼生成合成（composition），再渲染成 MP4。
第二部分：核心原理 #
| 項目 | 說明 |
|---|---|
| 輸入 | HTML / CSS / JS 檔案 |
| 渲染引擎 | Headless Chrome + FFmpeg |
| 輸出 | MP4 影片 |
| 建置步驟 | 無（檔案直接可播，不用 bundler） |
| 設計對象 | AI agent（Claude Code、Cursor、Gemini CLI、Codex） |
💡 HyperFrames 是「agent-first」設計，預設就給 AI 容易產出精緻結果的環境，
用純 HTML 而非 React 元件，AI 好寫、非開發者也較易讀懂。
第三部分：安裝與使用 #
方式 A：AI coding agent（建議） #
npx skills add heygen-com/hyperframes安裝後在 agent 內以提示詞操作，例：
Using /hyperframes, create a 10-second product intro
with a fade-in title, background video, and background music.方式 B：手動 CLI #
npx hyperframes init my-video # 建立專案
cd my-video
npx hyperframes preview # 瀏覽器預覽
npx hyperframes render # 渲染成 MP4現成 Blocks（直接加到影片） #
| 指令 | 用途 |
|---|---|
npx hyperframes add flash-through-white |
白閃轉場 |
npx hyperframes add instagram-follow |
IG 追蹤 overlay |
npx hyperframes add data-chart |
資料圖表 |
前置需求 #
| 項目 | 版本 |
|---|---|
| Node.js | 22+ |
| FFmpeg | 需安裝 |
| npx | 隨 npm 提供 |
| AI coding agent | Claude Code / Cursor / Gemini CLI / Codex（選用） |
第四部分：適用場景 #
| 使用場景 | 說明 |
|---|---|
| 產品宣傳片（product promos） | 快速產出品牌化短影片 |
| 社群短片（social clips） | IG/TikTok 尺寸與 overlay |
| 動畫解說（animated explainers） | 用程式碼生成動畫 |
| 資料視覺化（data viz） | 動態圖表轉影片 |
| 字幕／overlay | 程式化疊加文字與標籤 |
| 自動化影片工作流 | 批次、程式化生成大量影片 |
第五部分：HyperFrames vs Remotion #
| 項目 | HyperFrames | Remotion |
|---|---|---|
| 編寫方式 | 純 HTML/CSS/JS | React 元件 |
| 建置步驟 | 無（檔案直接播） | 需 bundler |
| 設計對象 | AI agent | React 開發者 |
| 授權 | Apache 2.0（免費） | 團隊 4+ 人需付費 |
| 雲端渲染規模 | Local + Lambda | 較成熟 |
| 底層引擎 | Headless Chrome + FFmpeg | 相同 |
💡 兩者底層相同，輸出品質基本持平；差別在 HyperFrames 對 AI agent 與非開發者更友善、無團隊規模收費門檻。
⚠️ 注意事項 #
| 注意事項 | 說明 |
|---|---|
| 需要寫程式能力 | 適合熟悉程式或 AI coding 工具的用戶；純 no-code 應選 HeyGen 主平台 |
| 需裝 FFmpeg | 本地渲染影片編碼依賴 FFmpeg |
| 與 hyperframe.ai 不同 | 別搞混：hyperframe.ai 是另一間商業影片平台 |
| 真影片素材需另處理 | 要放真實影片片段／手剪，仍得靠 Premiere 等傳統剪輯 |
| 版本更新快 | v0.8.x 快速迭代，API 可能變動 |
🔗 參考連結 #
| 來源 | 連結 |
|---|---|
| 官方文件 | https://help.heygen.com/en/articles/15001510-hyperframes-x-heygen |
| GitHub Repo | https://github.com/heygen-com/hyperframes |
| 官網 | https://hyperframes.heygen.com/ |
| HyperFrames vs Remotion 評測 | https://www.getmasset.com/resources/blog/hyperframes-vs-remotion-review |
資料來源：HeyGen 官方文件、GitHub 及公開評測（2026年10月）