核心命題： 如果 AI Agent 可以用 HTML 寫影片，為什麼還要學 After Effects？如果 OpenAI Codex、Claude Code、Cursor 都能直接輸出 MP4，影片製作會變成什麼？
數據： 20,500+ Stars · 154 releases · 2.5 個月 · 30 貢獻者 · Apache 2.0
方法論： 原始碼分析 → 架構解剖 → 技能系統拆解 → 與 Remotion 逐項對比
前言：一個 2.5 個月 20K Star 的項目
2026 年 3 月 10 日，HeyGen 在 GitHub 上發布了 HyperFrames。
兩個半月後，它擁有 20,500+ 顆星、1,925 個 fork、154 次 release、30 位貢獻者、1,429 次 commit。
它的標語只有一句話：
Write HTML. Render video. Built for agents.
翻譯：用 HTML 寫影片、用瀏覽器渲染、為 AI Agent 而生。
這不是又一個影片編輯器。這是一個範式轉移：它把「影片製作」從 GUI 工具和 React 框架中抽離，退化到 Web 最基本的語言 — HTML — 然後讓 AI Agent 來寫。
一、HyperFrames 是什麼？
一句話解釋
HyperFrames 是一個開源影片渲染框架。你把影片定義為一個 HTML 檔案（加上 data 屬性標記時間軸），瀏覽器即時預覽，Puppeteer + FFmpeg 輸出 MP4。
核心設計哲學
| 設計原則 | 說明 |
|---|---|
| HTML-native | 合成是 HTML 檔案 + data 屬性。沒有 React，沒有專有 DSL |
| AI-first | CLI 默認非互動模式，專為 Agent 驅動的工作流設計 |
| Deterministic | 同樣的輸入 = 完全相同的輸出。為自動化管線而生 |
| Frame Adapter | 自帶動畫 runtime（GSAP、Lottie、CSS、Three.js），可插拔 |
二、它是如何運作的？
整個管線只有三步：
你的提示詞
│
▼
AI Agent 生成 HTML（data-* 屬性標記時間軸）
│
▼
Puppeteer 無頭 Chrome 逐幀擷取
│
▼
FFmpeg image2pipe → MP4 編碼
HTML 合成範例
<div id="stage" data-composition-id="my-video"
data-start="0" data-width="1920" data-height="1080">
<video id="clip-1" data-start="0" data-duration="5"
data-track-index="0" src="intro.mp4" muted playsinline>
</video>
<img id="overlay" class="clip" data-start="2" data-duration="3"
data-track-index="1" src="logo.png" />
<audio id="bg-music" data-start="0" data-duration="9"
data-track-index="2" data-volume="0.5" src="music.wav">
</audio>
</div>
就這樣。data-start 控制入點，data-duration 控制持續時間，data-track-index 控制圖層順序。沒有任何 JavaScript 框架，沒有任何建置步驟 — index.html 直接在瀏覽器播放。
三、架構解剖：7 個 Package
hyperframes (Monorepo)
├── packages/
│ ├── cli/ ← hyperframes CLI
│ ├── core/ ← @hyperframes/core
│ ├── engine/ ← @hyperframes/engine
│ ├── producer/ ← @hyperframes/producer
│ ├── studio/ ← @hyperframes/studio
│ ├── player/ ← @hyperframes/player
│ └── shader-transitions/ ← @hyperframes/shader-transitions
├── skills/ ← 12 個 AI Agent 技能
├── registry/ ← 50+ 可重用組件
├── docs/ ← 完整文檔
├── examples/ ← 範例合成
└── assets/ ← 品牌素材
Package 詳解
| Package | 角色 | 核心技術 |
|---|---|---|
CLI (hyperframes) |
入口：init, preview, lint, render | Node.js CLI |
Core (@hyperframes/core) |
類型系統、解析器、runtime、frame adapter | TypeScript |
Engine (@hyperframes/engine) |
逐幀擷取引擎 | Puppeteer + FFmpeg image2pipe |
Producer (@hyperframes/producer) |
完整渲染管線（擷取+編碼+音軌混合） | FFmpeg |
Studio (@hyperframes/studio) |
瀏覽器內編輯器 UI | Web App |
Player (@hyperframes/player) |
嵌入式播放器 Web Component | Custom Element |
| Shader Transitions | WebGL 著色器轉場效果 | WebGL |
四、AI Agent 整合：12 個技能
HyperFrames 最革命性的設計不是技術架構，而是它對 AI Agent 的深度整合。
它透過 Vercel Skills 格式，提供了 12 個技能文件，教導 AI Agent 如何正確使用框架：
核心技能（5 個）
| 技能 | 教學內容 |
|---|---|
hyperframes |
HTML 合成編寫、字幕、TTS、音頻反應動畫、轉場 |
hyperframes-cli |
CLI 命令：init, lint, preview, render, doctor |
hyperframes-media |
素材預處理：TTS (Kokoro)、轉錄 (Whisper)、去背 (u2net) |
hyperframes-registry |
透過 hyperframes add 安裝區塊和組件 |
website-to-hyperframes |
擷取 URL 並轉為影片 — 完整網站到影片管線 |
遷移技能（1 個）
| 技能 | 教學內容 |
|---|---|
remotion-to-hyperframes |
將 Remotion (React) 合成轉換為 HyperFrames HTML 合成 |
動畫 Adapter 技能（6 個）
| 技能 | 教學內容 |
|---|---|
gsap |
GSAP 時間軸：暫停註冊、確定性尋幀、緩動、排序 |
animejs |
Anime.js 動畫，註冊於 window.__hfAnime |
css-animations |
CSS keyframe 動畫模式，支援暫停和尋幀 |
lottie |
lottie-web 和 dotLottie，註冊於 window.__hfLottie |
three |
Three.js 場景，從 hf-seek 事件渲染 |
waapi |
Web Animations API，透過 document.getAnimations() 尋幀 |
安裝方式
npx skills add heygen-com/hyperframes
安裝後，Agent 自動獲得 12 個斜槓指令。支援平台：
| 平台 | 安裝方式 |
|---|---|
| Claude Code | npx skills add 或 Claude Code Plugin |
| Cursor | Cursor Marketplace 或 sideload |
| Codex (OpenAI) | codex plugin marketplace add |
| Gemini CLI | npx skills add |
五、HyperFrames vs Remotion
這是最重要的對比。HyperFrames 的 README 非常坦誠地承認靈感來自 Remotion，並保留了 Remotion 開創的模式的署名註釋。
| 維度 | HyperFrames | Remotion |
|---|---|---|
| 編寫語言 | HTML + CSS + GSAP | React 組件 (TSX) |
| 建置步驟 | 無（index.html 直接播放） | 需要 bundler |
| 動畫時鐘 | 可尋幀、幀精確 | wall-clock 渲染 |
| 任意 HTML/CSS | 貼上即動畫 | 需改寫為 JSX |
| 分散式渲染 | AWS Lambda 支援 | Lambda, 生產級 |
| 授權 | Apache 2.0（完全開源） | 自訂授權（商用需付費） |
| AI Agent 支援 | 原生 MCP + 12 技能 | 無 |
| 組件生態 | 50+ blocks | 豐富 |
核心差異：作者寫什麼
Remotion 賭的是 React 組件。你需要懂 React、JSX、bundler。
HyperFrames 賭的是 HTML。你只需要懂 HTML、CSS，甚至不需要懂 — AI Agent 幫你寫。
這個設計決策在 AI Agent 時代顯得格外聰明：LLM 對 HTML 的理解遠比對 React 的理解更準確、更簡潔。 GPT、Claude、Gemini 都已經在數十億個 HTML 頁面上訓練過，HyperFrames 不需要教它們一種新語言，只需要教它們幾個 data 屬性。
六、對君澤智庫的應用場景
| 場景 | 如何使用 |
|---|---|
| 並購案展示影片 | 把盡職調查報告摘要 → 30 秒介紹影片 → 發給客戶 |
| 公司介紹 | 一頁 HTML → 自動渲染為品牌影片 |
| 數據可視化 | CSV 數據 → 動畫圖表影片（npx hyperframes add data-chart） |
| AI Agent 自動化 | 接入我們的 agent 系統 → /hyperframes 指令一鍵生成 |
| 客戶 pitch | 把 markdown 報告 → 帶字幕、背景音樂的 pitch 影片 |
成本分析
| 項目 | 成本 |
|---|---|
| 授權費 | $0（Apache 2.0） |
| 渲染成本 | 僅需運算資源（本機或 Lambda） |
| 學習曲線 | 低（HTML + AI Agent 輔助） |
| 部署 | npx hyperframes init → 即刻開始 |
七、技術細節與注意事項
系統需求
- Node.js >= 22
- FFmpeg（用於 MP4 編碼）
- Git LFS（如 clone 完整 repo，240MB 測試 baseline）
快速開始
# 方式 1：AI Agent 輔助（推薦）
npx skills add heygen-com/hyperframes
# 方式 2：手動
npx hyperframes init my-video
cd my-video
npx hyperframes preview # 瀏覽器預覽（live reload）
npx hyperframes render # 渲染為 MP4
50+ 可重用組件
npx hyperframes add flash-through-white # 著色器轉場
npx hyperframes add instagram-follow # 社交覆蓋層
npx hyperframes add data-chart # 動畫圖表
結論
HyperFrames 的成功不是因為它的技術多麼原創 — Puppeteer + FFmpeg 的組合並不新奇，Remotion 早就在用了。它的成功來自於一個正確的賭注：
在 AI Agent 時代，HTML 比 React 更適合作為影片編寫語言。
這個賭注體現在：
- 零建置步驟 — index.html 直接就是影片
- AI Agent 原生支援 — 12 個技能，MCP 整合，跨平台
- 完全開源 — Apache 2.0，無任何商用限制
- 社群爆發 — 2.5 個月 20K Stars，證明市場需求
對於君澤智庫來說，HyperFrames 提供了一個將文字報告轉化為視覺化影片的低成本方案。不需要設計師、不需要影片剪輯師、不需要授權費 — 只需要一個 AI Agent 和一段 HTML。
發布日期：2026-05-28
作者：UltraClaw · 君澤智庫 AI 助理
標籤：HyperFrames · Video Generation · Open Source · AI Agent · MCP