HyperFrames 快速上手指南

← 首頁

什麼是 HyperFrames

HeyGen 推出的開源影片渲染框架，讓你用熟悉的 HTML/CSS/JS 寫出動態影片——不需要傳統剪輯軟體，直接渲染成 MP4。

開源 HTML/CSS/JS AI 原生 HeyGen 出品

HyperFrames vs Remotion 比較

兩套框架定位不同，互補而非取代。

項目 HyperFrames Remotion
語言 HTML / CSS / JS React (JSX)
動畫引擎 GSAP / CSS / Lottie React Spring / CSS
上手門檻 低 — 前端基礎即可 中 — 需熟悉 React
AI 整合 原生 Codex Skill 需自行串接
適合場景 快速原型、AI 驅動生成 複雜品牌動畫、精細控制
結論 兩套互補 — 快速驗證用 HyperFrames，品牌精修用 Remotion

環境需求

✅
雲端主機已備妥：Node.js >= 22、FFmpeg 均已安裝，可直接跑指令。

本機開發若需自行安裝，請確認 node -v >= 22 且 ffmpeg -version 可用。

常用指令

指令 用途
npx hyperframes init 建立新專案骨架
npm run dev 啟動本機預覽伺服器（含熱重載）
npm run check 驗證時間軸語法與 clip 結構
npm run render 渲染輸出 MP4
npx skills add <skill-name> 新增 Codex Skill（AI 工作流模組）

專案結構

my-first-video/
├── compositions/ # 各場景 HTML
├── assets/ # 圖片、音樂、Lottie JSON
├── renders/ # 輸出的 MP4
├── index.html # 主入口、組合所有 composition
├── hyperframes.json # 渲染參數（尺寸、fps、duration）
└── meta.json # 專案元資料（標題、作者）

核心概念 — 六條鐵律

Hello World 範例

一個最簡單的文字淡入場景：

<!-- compositions/hello.html -->
<div
  class="clip"
  data-start="0"
  data-duration="3"
  data-track-index="0"
  style="
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    font-weight: 700;
    color: #fff;
    background: #0a1628;
    opacity: 0;
    animation: fadeIn 0.8s ease forwards;
  "
>
  Hello, HyperFrames!
</div>

<style>
@keyframes fadeIn {
  to { opacity: 1; }
}
</style>

儲存後執行 npm run dev，瀏覽器開啟 localhost:3000 可即時預覽。

Codex 整合工作流（5 步）

  1. 加入 Skill — 執行 npx skills add scene-builder 安裝 AI 場景生成模組
  2. 描述場景 — 用自然語言告訴 Codex 你要什麼，例如：「一段 5 秒的標題動畫，橘色背景，文字由下往上滑入」
  3. AI 生成程式碼 — Codex 根據 HyperFrames 規範自動輸出 composition HTML（遵守六條鐵律）
  4. 驗證 — 執行 npm run check 確認時間軸語法正確、無衝突軌道
  5. 渲染輸出 — 執行 npm run render，FFmpeg 自動合成 MP4 輸出到 renders/

雲端主機路徑

🗂
目前工作專案
/root/workspace/hyperframes-video/my-first-video/

SSH 進主機後直接 cd /root/workspace/hyperframes-video/my-first-video 開始工作。

參考資源

建立於 2026-05-16 · HyperFrames 快速上手指南