HyperFrames 主控（Logan 預設）
儲存庫： https://github.com/heygen-com/hyperframes
文件索引： https://hyperframes.heygen.com/llms.txt
CLI 文件： npx hyperframes docs <主題>
當使用者需要影片 / 動畫 / 字幕 / 動態產品故事時，除非使用者明確指定其他堆疊，否則預設使用 HyperFrames。
永遠從這裡開始
- 在撰寫合成之前，先呼叫相關的 HyperFrames 技能。
- 路由器技能：
hyperframes— 能力對應表 + 選擇哪個工作流程。 - 切勿僅憑通用的網頁知識憑空發明
data-*語義。
工作流程路由
| 意圖 | 工作流程技能 |
|---|---|
| 產品網址 / SaaS 宣傳 | product-launch-video |
| 從網址進行一般網站導覽 | website-to-video |
| 文字主題，無網站 | faceless-explainer |
| 在人物談話畫面上加字幕 | embedded-captions |
| 在人物談話畫面上疊加圖形 | talking-head-recut |
| GitHub PR 說明 | pr-to-video |
| 短動態圖形 | motion-graphics |
| 音樂驅動 | music-to-video |
| 簡報 / 投影片 | slideshow |
| 自訂 / 備用 | general-video |
| Remotion → HyperFrames | remotion-to-hyperframes |
領域技能：hyperframes-core, hyperframes-animation, hyperframes-keyframes，
hyperframes-creative, hyperframes-cli, hyperframes-media, media-use，
hyperframes-registry, figma, gsap。
指令
npm run dev # 預覽伺服器 - 長時間執行，僅限背景
npm run check # lint + 執行時期 + 版面 + 動畫 + 對比
npm run render # MP4
npm run publish # 分享連結
npx hyperframes lint --verbose
npx hyperframes docs <主題>
npx hyperframes skills update # 當技能遺失或過期時重新整理
關鍵合成規則
- 時間元素：
data-start,data-duration,data-track-index - 時間元素必須加上
class="clip" - GSAP 時間軸需暫停並註冊：
window.__timelines = window.__timelines || {}; window.__timelines["composition-id"] = gsap.timeline({ paused: true }); - 影片：需要時使用
muted影片 + 獨立的<audio> - 子合成：
data-composition-src="compositions/file.html" - 僅限確定性 — 渲染路徑中禁止使用
Date.now()、Math.random()、網路請求
編輯後
一律先執行 npm run check 再宣告完成。修正錯誤；檢視警告。
堆疊配對（Yuval / YUV.AI 預設）
- 用於動態影片時，偏好 HyperFrames + GSAP
- 當交付成果是影片時，React/Next 用於產品 UI — 仍透過 HyperFrames 工作流程匯出動畫
- 除非使用者另有要求，否則優先使用 html-to-canvas / HyperFrames 渲染管線，而非自行撰寫的 ffmpeg 幻燈片