HyperFrames：HeyGen 的開源框架，將影片當作 HTML 來編寫

HyperFrames 是 HeyGen 推出的開源影片渲染框架，讓您使用標準的 HTML、CSS 和 JavaScript 編寫影片，並將其渲染為 MP4、WebM 或 MOV 格式。其標語說得清楚明白：「寫 HTML，渲染影片，為代理而生。」

版本 v0.4.11（2026 年 4 月），採用 Apache 2.0 授權。HyperFrames 代表了一種從根本上不同的程式化影片創作方式——從底層就是為 AI 程式碼代理而非人類影片編輯者所設計。

目錄

1. HyperFrames 有何不同？
2. 運作原理
3. 快速入門
4. 專為 AI 代理打造
5. 設計系統預設
6. 預建元件
7. 渲染管線
8. 內建 TTS 與字幕
9. 網站擷取
10. 影格適配器模式
11. 確定性渲染
12. 當前限制
13. 開始使用

HyperFrames 有何不同？

在 HyperFrames 之前，程式驅動影片的標準方法是 Remotion，它需要 React（TSX）元件和完整的打包器管線。HyperFrames 完全去掉了這些：

核心洞察在於，AI 程式碼代理已經能流暢地「使用」HTML 和 CSS。透過移除 React 依賴和打包器，HyperFrames 讓代理能夠更輕鬆地自主編寫影片。

運作原理

HyperFrames 的構成是一個帶有特殊 data-* 屬性的 HTML 檔案，這些屬性控制時間、圖層和渲染行為。GSAP（GreenSock 動畫平台）負責處理實際的動畫。

<!-- 一個基本的 HyperFrames 構成 -->
<div data-duration="5" data-track-index="1">
  <h1>哈囉，影片世界</h1>
  <p class="slide-in">這段文字會動畫進入畫面</p>
</div>

核心屬性

構成檔案是純 HTML 檔案，您可以像任何網頁一樣在瀏覽器中預覽，然後透過 CLI 渲染成影片。

快速入門

CLI 工作流程刻意保持簡潔：

# 初始化新專案
npx hyperframes init my-video

# 在瀏覽器中即時重新載入預覽
npx hyperframes preview

# 渲染為 MP4
npx hyperframes render

這就是整個工作流程。不需要打包器配置、建置步驟或框架樣板。

專為 AI 代理打造

這是 HyperFrames 真正與眾不同的地方。該框架附帶一個安裝程式，可教導您的 AI 程式碼代理如何編寫影片：

npx skills add heygen-com/hyperframes

安裝完成後，代理即可使用三個專用斜線指令：

• /hyperframes — 從頭開始編寫新影片
• /hyperframes-cli — CLI 指令和專案設定的協助
• /gsap — GSAP 動畫協助與語法參考

這些指令可跨 Claude Code、Cursor、Gemini CLI 和 OpenAI Codex 使用。AI 代理可以從「建立一支 30 秒的產品展示影片」這樣的文字提示，直接生成渲染好的 MP4 檔案，完全無需人工介入。

HeyGen 用他們自己的發表影片驗證了這一點——整個 49.77 秒、1080p @ 30fps 的製作構成已在 GitHub 上開源，包含 17 個子構成，使用了 CSS 動畫、GSAP、Lottie、Three.js 和著色器轉場。這支影片是由 AI 代理創作的。

設計系統預設

HyperFrames 附帶八種視覺風格預設，為您的影片提供不同的美學方向：

1. Swiss Pulse — 乾淨、極簡的瑞士設計，搭配大膽的排版
2. Velvet Standard — 溫暖、高級的美學，使用豐富的漸層
3. Data Drift — 科技前衛風格，專為資料視覺化最佳化
4. Shadow Cut — 戲劇性的高對比外觀，搭配厚重的陰影
5. Neon Grid — 賽博龐克風格，帶有發光元素
6. Paper Grain — 紋理類比風格，帶有細微的顆粒疊加
7. Glassmorphism — 毛玻璃效果，搭配模糊背景
8. Mono Chrome — 單色調色板，確保品牌一致性

每個預設都會全域調整色彩、排版、間距、轉場和疊加樣式。

預建元件

HyperFrames 包含 50 多個立即可用的元件，可透過元件目錄存取。這些涵蓋了常見的影片製作需求：

• 著色器轉場 — GPU 加速的交叉淡變、擦拭和效果
• 社交疊加 — Instagram、TikTok、YouTube 格式的疊加
• 資料圖表 — 動畫長條圖、折線圖和圓餅圖
• 下方三分之一 — 專業的字幕和名稱疊加
• 進度條 — 動畫時間軸指示器
• 倒數計時器 — 活動和發布倒數
• 工具提示與標註 — 引導注意力的註解

渲染管線

技術管線簡單但有效：

1. Puppeteer 啟動無頭 Chrome 實例
2. 構成的每個影格從瀏覽器中以螢幕截圖方式擷取
3. FFmpeg 將影格序列編碼為目標影片格式（MP4、WebM 或 MOV）

由於原始素材是在實際瀏覽器引擎中渲染的標準 HTML，網頁上能運作的一切——CSS 動畫、canvas、WebGL、Three.js、Lottie——都能在 HyperFrames 影片中使用。

內建 TTS 與字幕

HyperFrames 將文字轉語音和字幕生成作為一級 CLI 指令：

# 從文字生成配音音訊
npx hyperframes tts --text "您的腳本內容" --output voiceover.wav

# 從音訊生成時間軸字幕
npx hyperframes transcribe --input voiceover.wav --output captions.srt

這意味著一支完整的影片，包含旁白和字幕，可以從單一文字輸入生成。

網站擷取

一個意想不到但功能強大的特性：您可以將任何即時網站透過 HyperFrames 構成方式擷取為影片。

npx hyperframes capture https://example.com

這開啟了創意的可能性——產品頁面變成影片廣告、文件導覽、動態儀表板錄製成螢幕錄影——完全不需要手動編寫 HTML。

影格適配器模式

HyperFrames 透過其影格適配器架構支援多種動畫框架。您可以選擇適合使用情境的動畫引擎：

您可以在單一構成中混合使用不同的適配器——例如，Three.js 的 3D 開場、GSAP 動畫的主段落，以及貫穿全片的 Lottie 圖示。

確定性渲染

HyperFrames 被設計為確定性的：相同的輸入總是產生相同的輸出。沒有 Math.random()、沒有時鐘漂移、沒有影格時間抖動。這個特性對於以下方面至關重要：

• CI/CD 管線 — 在自動化建置中渲染影片，結果可預測
• AI 代理工作流程 — 代理可以反覆精煉構成，知道每次渲染都是可重現的
• 回歸測試 — 與先前的渲染進行逐影格比較

當前限制

作為一個早期專案（v0.4.x），HyperFrames 有一些重要的限制需要注意：

• 無分散式渲染 — 與 Remotion 的 Lambda 整合不同，HyperFrames 在單機上渲染。長片或複雜影片的實際渲染時間將與其長度成正比。
• 不建議 4K/60fps — 擷取再編碼的管線是為 1080p @ 30fps 設計的。更高的解析度和幀率會很慢。
• 需要 Node.js >= 22 — 不支援較舊的 Node.js 執行環境。
• 必須安裝 FFmpeg — 它不隨 npm 套件一同打包。
• 生態系統較小 — 50 多個內建元件是不錯的起點，但社群模板庫與成熟工具相比仍然有限。

開始使用

系統需求：Node.js 22 或更高版本，FFmpeg 安裝於 PATH 中。

# 建立新專案
npx hyperframes init my-first-video
cd my-first-video

# 在瀏覽器中預覽
npx hyperframes preview

# 編輯構成（它只是 HTML）
# open src/composition.html

# 渲染為影片
npx hyperframes render

加入 AI 代理技能，讓 Claude、Cursor 或 Gemini 為您創作：

npx skills add heygen-com/hyperframes

然後只需對您的代理說：「使用 Swiss Pulse 預設，建立一支 20 秒的產品發表影片，包含倒數計時器和著色器轉場。」

總結

HyperFrames 將影片創作重新定義為一種程式設計活動，而非設計活動。透過使用 HTML 作為創作格式，並保持工具鏈極簡（無打包器、無框架、無專有 DSL），它讓程式化影片對任何能編寫網頁的人來說都觸手可及——尤其是對那些越來越多為我們編寫網頁的 AI 代理而言。

它尚不能取代 Remotion 在生產級分散式渲染工作流程中的地位，但對於個人創作者、新創公司和 AI 代理管線而言，HyperFrames 提供了真正的新事物：用我們描述網頁的同一種語言來描述影片，然後無縫地將其渲染出來。

源碼可在 GitHub 取得，文件位於 hyperframes.heygen.com，而使用該工具本身創作的發表影片也在 hyperframes-launch-video 儲存庫中開源。