heygen-com/hyperframes

HyperFrames – 將 HTML + CSS 轉換為決定性 MP4 影片

是什麼 – 一個開源的 Node.js 框架，讓您以普通的網頁標記（HTML、CSS、媒體檔案，以及任何可跳轉的動畫庫）來描述影片。HyperFrames 隨後將該描述渲染為完全可重複的 MP4，可透過 CLI 本地執行，或透過雲端/Lambda 後端執行。它附帶一組 技能，AI 編碼代理（Claude、Gemini、Cursor 等）可載入，因此可向 LLM 指示「建立一個 10 秒的產品介紹」，代理將自動產生所需的 HTML，拉取資源，進行 lint 檢查，預覽，最後呼叫 hyperframes render。

---

核心概念

概念	作用
基於 HTML 的組合	您撰寫一個普通的 HTML 檔案，並加入特殊的 data-* 屬性（如 data-start、data-duration、data-track-index 等），以定義影片時間軸與軌道佈局。
可跳轉的動畫適配器	HyperFrames 可驅動 GSAP、Lottie、Three.js、Anime.js、CSS WAAPI 或自訂適配器，所有這些都強制為 可跳轉，以便渲染器能決定性地跳轉至任意幀。
媒體 OS（/media-use）	一個統一的資源管理器，可從本地檔案解析影像、音訊、影片、TTS、音樂等，或在所需資源缺失時呼叫生成模型。
技能路由	/hyperframes 技能是一個微小的意圖層，將自然語言請求映射至 10 多個創作工作流程（產品發佈影片、無臉說明、PR→影片等）之一。
CLI	`npx hyperframes init

---

主要功能（「創作工作流程」）

• 產品發佈影片 – 將網站或腳本轉換為 30–90 秒的行銷剪輯。
• 無臉說明 – 從純文字生成視覺說明，由 LLM 創造圖形。
• PR→影片 – 輸入 GitHub PR URL，生成變更日誌風格的示範。
• 嵌入字幕 / 說話頭重製 – 為現有影片添加字幕或圖形覆蓋。
• 動態圖形 – 短暫、無旁白的動感作品（Logo 冲刺、圖表擊中等）。
• 音樂→影片 – 將節奏驅動的影片與音訊軌道同步。
• 幻燈片 / 演示文稿 – 輸出互動式、可導航的簡報，而非平面影片。
• 通用影片 – 用於任何更長或包含多場景組合的通用工作流程。
• Remotion→HyperFrames – 從基於 React 的 Remotion 組合單向遷移。

---

如何試用（快速入門）

# 1. 為 AI 代理安裝 HyperFrames 技能集
npx skills add heygen-com/hyperframes   # 互動式選擇器（僅核心技能）
# 或非互動式執行
npx hyperframes skills update          # 直接安裝核心集

# 2. 向代理提出提示，例如：
# "使用 /hyperframes，建立一個 10 秒的產品介紹，包含淡入標題、背景影片和微弱的背景音樂。"

# 3. 代理將產生 HTML 組合，為您執行 `hyperframes preview` 檢查，然後：
cd my-video
npx hyperframes render   # 產生決定性的 video.mp4

如果您更喜歡手動操作，相同的 CLI 無需任何 AI 也可使用：

npx hyperframes init my-video
cd my-video
npx hyperframes preview   # 瀏覽器中即時重載
npx hyperframes render    # 產生 MP4（需要 FFmpeg）

---

生態系統與可擴展性

• 領域技能 – 小型、按需載入的模組（/hyperframes-animation、/hyperframes-keyframes、/hyperframes-audio、/media-use、/figma 等），由路由組合。
• 目錄與註冊表 – hyperframes catalog 允許您瀏覽和安裝可重用的模組（過渡、效果、設計令牌），並可向上游貢獻新模組。
• 設計橋接（frame.md） – 一種「設計→影片」規範，鏡像品牌的網頁設計系統，使 LLM 在組合時能尊重品牌令牌。
• 雲端與無伺服器渲染 – 可選的 HeyGen 基礎設施託管渲染，或自託管 AWS Lambda 函數。

---

適合誰使用

• AI 驅動的內容流水線 – 希望 LLM 自動產生行銷影片、PR 示範或資料視覺化剪輯的公司。
• 設計→影片團隊 – 已維護網頁風格設計系統並需要決定性方式導出動態圖形的設計師。
• 開發影片即程式碼工具的開發者 – 偏好 HTML/CSS 而非專有動畫圖形 DSL 的任何人。
• 教育者 / 愛好者 – 技能系統使無需撰寫程式碼即可輕鬆實驗 LLM 驅動的影片創作。

---

安裝與需求

• Node.js ≥ 22（套件已發布在 npm 上，名為 hyperframes）。
• 本地渲染需要 FFmpeg 在主機上。
• 可選：Bun（用於 Codex 插件打包腳本）。

---

更多資訊

• 快速入門: https://hyperframes.heygen.com/quickstart
• 展示（可重混的成品影片）: https://hyperframes.heygen.com/showcase
• 沙盒（線上編輯器）: https://www.hyperframes.dev/
• 文件 / 入門: https://hyperframes.heygen.com/introduction
• Discord 社群: https://discord.gg/EbK98HBPdk

---

總結 – HyperFrames 提供一種決定性、以 HTML 為先的影片創作方式，透過技能路由與 AI 編碼代理緊密整合。它讓 LLM 能在熟悉的 Web 開發堆疊中生成、預覽和渲染動態圖形，無需離開。