# 策展 · X (Twitter) 🔥

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

> 作者：HeyGen (@HeyGen) · 平台：X (Twitter) · 日期：2026-04-18

> 原始來源：https://x.com/heygen/status/2044827454460871072

## 中文摘要

HyperFrames推出開源Agent原生影片渲染框架。

HeyGen發布「HyperFrames」，一個開源影片渲染框架，讓使用者透過HTML撰寫、預覽並渲染影片，專為AI Agent設計，支援Claude Code、Cursor等工具生成發佈影片。
該框架強調HTML原生、無需React或專有DSL，透過npx skills add heygen-com/hyperframes安裝skills，即可讓Agent自動產生正確的HTML組成、GSAP動畫與CLI指令。

**快速入門方式**

HyperFrames提供兩種啟動選項，推薦使用AI編碼Agent。

- **Agent驅動（推薦）**：執行`npx skills add heygen-com/hyperframes`，讓Agent學習框架模式。在Claude Code中，skills註冊為斜線指令，如`/hyperframes`用於創作組成、`/hyperframes-cli`處理CLI指令、`/gsap`輔助動畫。
  - 範例提示（Cold start）：`/hyperframes`建立10秒產品介紹，含淡入標題、背景影片與音樂。
  - 範例提示（Warm start）：檢視https://github.com/heygen-com/hyperframes並用`/hyperframes`解釋其用途與架構；或將CSV轉為動畫長條圖賽跑。
  - 迭代互動：如「讓標題放大2倍、切換暗黑模式、末尾加淡出」。

- **手動專案**：`npx hyperframes init my-video`，再用`npx hyperframes preview`瀏覽器即時預覽、`npx hyperframes render`輸出MP4。需Node.js >=22與FFmpeg。

`hyperframes init`會自動安裝skills，便於隨時交給Agent處理。

**核心優勢**

HyperFrames解決傳統影片工具的痛點，專注Agent工作流。

- **HTML原生**：組成為HTML檔案加data屬性，無需React或專有DSL。
- **AI優先**：Agent熟悉HTML，CLI預設非互動，適合自動化。
- **確定性渲染**：相同輸入產生相同輸出，適用自動化管線。
- **Frame Adapter模式**：自帶動畫運行時，如GSAP、Lottie、CSS、Three.js。

**運作原理**

使用者以HTML與data屬性定義影片，瀏覽器即時預覽，本地或Docker渲染MP4。

範例HTML：
```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>
```
影片元素須靜音，音訊獨立於`<audio>`以利混音；所有時間軸註冊於`window.__timelines`確保可seek。

**元件目錄**

提供50+現成區塊與元件，涵蓋社群覆蓋、著色器轉場、資料視覺化與電影效果。

- `npx hyperframes add flash-through-white`：著色器轉場。
- `npx hyperframes add instagram-follow`：社群覆蓋。
- `npx hyperframes add data-chart`：動畫圖表。

完整目錄見[hyperframes.heygen.com/catalog](https://hyperframes.heygen.com/catalog/blocks/data-chart)。

**套件架構**

HyperFrames拆分多個npm套件，支援模組化使用。

| 套件 | 描述 |
|------|------|
| `hyperframes` (packages/cli) | CLI：建立、預覽、檢查、渲染組成 |
| `@hyperframes/core` (packages/core) | 類型、解析器、產生器、檢查器、運行時、frame adapters |
| `@hyperframes/engine` (packages/engine) | 可seek頁面轉影片擷取引擎（Puppeteer + FFmpeg） |
| `@hyperframes/producer` (packages/producer) | 完整渲染管線（擷取 + 編碼 + 音訊混音） |
| `@hyperframes/studio` (packages/studio) | 瀏覽器基組成編輯UI |
| `@hyperframes/player` (packages/player) | 可嵌入`<hyperframes-player>`網頁元件 |
| `@hyperframes/shader-transitions` (packages/shader-transitions) | WebGL著色器轉場 |

**Skills系統**

內建skills教導Agent框架特定模式，超越通用文件。

- 安裝：`npx skills add heygen-com/hyperframes`。
- | Skill | 教導內容 |
  |-------|----------|
  | `hyperframes` | HTML組成創作、字幕、TTS、音訊反應動畫、轉場 |
  | `hyperframes-cli` | CLI指令：init、lint、preview、render、transcribe、tts、doctor |
  | `hyperframes-registry` | 透過`hyperframes add`安裝區塊與元件 |
  | `gsap` | GSAP動畫API、時間軸、緩動、ScrollTrigger、plugin、React/Vue/Svelte效能 |

**提示指南細節**

專屬提示指南教導如何驅動Claude Code、Cursor、Codex等Agent產生HyperFrames組成，提供可複製範例與詞彙表。

**一次性設定**：`npx skills add heygen-com/hyperframes`，Claude Code重啟後skills成斜線指令。總是用`/hyperframes`前綴載入技能上下文，避免Agent依賴模糊記憶產生錯誤HTML。

**兩種提示形態**

- **Cold start（從零描述）**：適合腦中已有創意。
  - 範例：`/hyperframes`建立10秒產品介紹，淡入標題、暗黑背景、微妙背景音樂。
  - 範例：9:16 TikTok風格鉤子影片，彈跳字幕同步TTS旁白。
  - 最佳指定：持續時間（如10秒、30s）、寬高比（16:9、9:16）、風格（極簡瑞士格柵、高能量社群）、關鍵元素（標題、下三分之一、字幕）。

- **Warm start（基於脈絡合成）**：給URL、文件、CSV、逐字稿，讓Agent一併研究與製作。
  - 範例：檢視GitHub repo並用`/hyperframes`解釋用途與架構。
  - 範例：摘要PDF成45秒推銷影片；CSV轉動畫長條圖；變更日誌Top 3變更成30秒發佈公告。
  - 優勢：產生更豐富、真實內容，避免Agent虛構文案。

**迭代互動**

視為與影片編輯對話，非從頭重述。
- 範例：「標題放大2倍。」「切換暗黑模式，加末尾淡出與0:03下三分之一（姓名、職稱）。」「字幕太小且重疊下三分之一，上移並縮小。」「換背景音樂為assets/track.mp3。」

Agent保有組成與skills，精準小修優於冗長重述。

**輸出改變詞彙**

Skills將自然語言映射框架設定，無需技術細節。

**動態與緩動**：
| 說法 | Agent用 | 感覺 |
|------|---------|------|
| smooth | power2.out | 自然減速 |
| snappy | power4.out | 快速果斷 |
| bouncy | back.out | 超調後穩定 |
| springy | elastic.out | 振盪定位 |
| dramatic | expo.out | 快啟長滑 |
| dreamy | sine.inOut | 慢速對稱 |

時間簡寫：fast (0.2s)=能量、medium (0.4s)=專業、slow (0.6s)=奢華、very slow (1–2s)=電影感。

**字幕風格**：
| 風格 | 字體 | 動畫 | 尺寸 |
|------|------|------|------|
| Hype | 重磅字體 | 縮放爆發 | 72–96px |
| Corporate | 乾淨無襯線 | 淡入滑動 | 56–72px |
| Tutorial | 等寬 | 打字機 | 48–64px |
| Storytelling | 襯線 | 慢淡入 | 44–56px |
| Social | 圓潤玩樂 | 彈跳 | 56–80px |

**轉場**：
| 能量 | CSS選項 | 著色器選項 |
|------|---------|------------|
| Calm | 模糊交錯 | 跨彎曲變形 |
| Medium | 推滑 | 鞭捲平移 |
| High | 縮放穿透 | 故障、脊線燃燒 |

**音訊反應動畫**：低頻映射scale（節拍脈動）、高頻glow（閃爍強度）、振幅opacity（呼吸）、中頻shape（變形）。

**標記強調**：
| 模式 | 效果 | 適用 |
|------|------|------|
| highlight | 螢光筆掃描 | 關鍵短語 |
| circle | 手繪橢圓 | 單字 |
| burst | 放射線 | 高潮時刻 |
| scribble | 混亂刮痕 | 刪除 |
| sketchout | 矩形輪廓 | 註解 |

**TTS語音**：本地Kokoro（無API金鑰）。產品demo用af_heart、af_nova；教學用am_adam、bf_emma；行銷用af_sky、am_michael。

**渲染品質**：draft（快速迭代）、standard（審核回饋）、high（最終交付）。

**關鍵規則**

Skills自動強制，人工編輯須遵守：
- 時間軸全註冊`window.__timelines`，否則無法seek。
- 影片元素靜音，音訊獨立`<audio>`以混音。
- 禁Math.random()，破壞確定性；需偽隨機用mulberry32等種子PRNG。
- GSAP時間軸建構同步，無async/await或fetch()。
- 定時元素加class="clip"與data-start、data-duration、data-track-index。
- 每場景加入口動畫，無動畫出現顯得斷裂。
- 場景間加轉場，跳切多為無意。

**反模式警示**

避免摩擦或錯誤輸出：
- 勿求React/Vue元件，HyperFrames純HTML+data屬性+GSAP時間軸；求「intro React元件」迫Agent後譯。
- 勿指定4K或60fps，除非必要；預設1920×1080、30fps快速且優質，高規格明顯拖慢。
- 勿省略斜線指令，無`/hyperframes` Agent猜HTML影片慣例而非框架規則。
- 勿無脈絡貼長錯誤日誌，先跑`npx hyperframes lint`與`npx hyperframes validate`。
- 勿假設Agent知assets，明確提檔案路徑。

**推薦工作流**

1. `npx hyperframes init my-video`架設專案（自動裝skills）。
2. 在Claude Code（或Cursor/Codex）開專案。
3. 用`/hyperframes`加上述形態提示。
4. `npx hyperframes preview`邊編邊看。
5. 小提示迭代。
6. 滿意後`npx hyperframes render --output final.mp4`。

**文件與許可**

完整文件：[hyperframes.heygen.com/introduction](https://hyperframes.heygen.com/introduction)，含[Quickstart](https://hyperframes.heygen.com/quickstart)、[Guides](https://hyperframes.heygen.com/guides/gsap-animation)、[API Reference](https://hyperframes.heygen.com/packages/core)、[Catalog](https://hyperframes.heygen.com/catalog/blocks/data-chart)。Apache 2.0許可，貢獻指南見CONTRIBUTING.md。

HyperFrames證明Agent可取代傳統影片編輯，HTML轉MP4的確定性管線讓自動化影片生產成為趨勢，npm下載與skills整合加速採用。

## 標籤

Agent, 開源專案, 新產品, CLI, Skills, HeyGen, Claude Code, Cursor