用 HTML 寫腳本做影片：Hyperframes 實戰

📌 本文重點

• 用 HTML/TypeScript 把影片當「程式」來維護
• Hyperframes 將腳本轉成可由 Agent 操控的影片時間軸
• 適合 PRD/demo、教學文件與 SaaS 行銷影片自動化

用 TypeScript/HTML 寫「腳本」，讓 Hyperframes 自動渲染成影片時間軸，工程師和產品團隊可以把影片當程式一樣維護、生成、版本控管。

專案連結：heygen-com/hyperframes on GitHub

---

核心功能：把 HTML 當「影片腳本」來寫

Hyperframes 的一句話定位，就寫在專案首頁：Write HTML. Render video. Built for agents.

💡 關鍵： 用你已熟悉的 HTML/TypeScript 寫腳本，就能直接生成可維護、可版本控管的影片時間軸。

1. 用 HTML/TypeScript 描述「場景」

你不需要學一套新語言，只要會寫基本 HTML + 一點 TypeScript 就能描述影片：

• 文字：標題、段落、註解
• 圖片：產品截圖、Logo、示意圖
• 版面：位置、大小、對齊、動畫時間

概念有點像「React for video」，只是畫面不是立刻出現在瀏覽器，而是被轉成可渲染的影片時間軸。

你可以馬上做的事：

• 想像你平常寫的 landing page，把那套 HTML 思維搬到「影片畫面描述」上
• 打開一個 PRD 或 Markdown 文件，先用 HTML 把幾個關鍵畫面（標題 + 截圖 + 說明文字）寫成簡單的段落

2. Hyperframes 轉成時間軸，可被 Agent 動態更新

Hyperframes 負責兩件事：

1. 解析你的 HTML/TypeScript 標記
2. 把它轉成一個「每一秒要顯示什麼」的時間軸，供後端渲染成影片

因為是程式化的時間軸，AI Agent 可以：

• 根據使用者輸入，動態生成新的 HTML 段落
• 修改某段文案 / 圖片，重算時間軸，只重渲染需要改的片段
• 大量生成「同版面、不同內容」的客製化影片

你可以馬上做的事：

• 在腦中把「Premiere 的時間軸」換成「一個可被 AI 修改的 JSON」
• 思考：你手上的哪類影片，其實只是在不同客戶之間改幾行字、改幾張圖？那些都可以交給 Agent + Hyperframes 自動跑

3. 為多代理系統設計的「影片引擎」

Hyperframes 是純 TypeScript 開源專案，設計上就是給 Agent / workflow 用：

• 可在 Node.js 環境跑，方便接各家 LLM API（包含 Gemini Interactions API、Claude、OpenAI 等）
• HTML 腳本可存 Git 版本控管，配合 CI/CD 產生最新版本影片資產
• 適合作為「一個工具節點」，掛在你原有的多代理系統後面

你可以馬上做的事：

• 把 Hyperframes 想成「你的 AI pipeline 裡的一個 render-video step」
• 在系統設計圖上加一個方塊：Agent → 產生 HTML → Hyperframes → 影片檔

---

適合誰用：3 個具體場景

1. 產品 demo 腳本自動化（從 PRD 產生影片）

場景：你有詳細的 PRD / feature spec，現在要做：

• 版本更新介紹影片
• 產品 demo 給內部/客戶

做法：

1. 用 LLM 讀 PRD（例如 Gemini Interactions API / Claude），生成一份 HTML 腳本：
2. 每個 section = 一個場景
3. 為每個場景標註標題、說明文字、要顯示的截圖檔名
4. 把這份 HTML 餵給 Hyperframes 轉成影片時間軸
5. 配合螢幕錄影或靜態截圖，渲染出完整 demo 影片

可以立刻行動：先選一份最常更新的產品功能說明，試著寫一版最陽春的 HTML 腳本（只有標題 + 一段文字），跑通「文字 → 影片」流程。

---

2. 教學 / 文件影片化（Markdown → HTML → 影片）

場景：你有大量技術文件或教學文章，只停留在文字。

做法：

1. 先把 Markdown 轉成 HTML（用現成工具或自己寫 parser 都可以）
2. 用程式規則把特定標題階層變成影片「章節」
3. Hyperframes 把每一章節變成一個場景，搭配插圖或 code snippet 截圖

這樣，你就能：

• 一鍵更新「教學影片」：只要 Markdown 更新，重新跑 pipeline 即可
• 給客戶或新同事一份「看得懂」的版本

可以立刻行動：挑一篇 README 或 API 文件，先用任何 Markdown → HTML 工具轉出 HTML，作為 Hyperframes 的 input 範例。

---

3. SaaS 行銷頁 A/B 測試影片 + 客製化影片批量生成

場景：你有 SaaS 產品，要測試不同文案 / 不同主打功能的影片版本，甚至為不同產業客戶客製化介紹。

做法：

• 固定版面：Logo 位置、背景、CTA 位置等寫死在 HTML 模板
• 動態部分：標題、優點列表、案例截圖由 Agent 依據「產業 / Persona」填入
• Hyperframes 讀模板 + 動態內容，批量生成 N 支影片

可以立刻行動：先寫一份「固定版面 + placeholder 文案」的 HTML 模板，想好幾種 Persona，讓 Agent 幫你填字，再交給 Hyperframes 渲染。

💡 關鍵： 把版面固定、內容變數化，可以穩定批量生成多版本影片，適合 A/B 測試和客製化行銷。

---

怎麼開始：從 clone 專案到跑出第一支影片

以下示範的是一條最小可用 pipeline：手寫 HTML → Hyperframes → 影片檔。

1. 安裝與跑官方範例

1. 先 clone 專案：

bash
git clone https://github.com/heygen-com/hyperframes.git
cd hyperframes

1. 安裝依賴（專案使用 pnpm，可改用 npm/yarn 依 README 說明）：

bash
pnpm install

1. 跑官方範例（實際 script 名稱請以 repo README 為準，大致會類似）：

bash
pnpm demo
# 或
pnpm examples:simple

執行成功後，你應該會在 output/ 或指定目錄下看到一支簡單的 mp4 影片。這一步的目標只有一個：先確認環境能渲染出影片。

---

2. 寫一個最小 HTML → 影片 pipeline

建立一個新檔 scripts/simple.ts，示範概念（示意程式碼，實際 API 以官方文件為準）：

import { render } from "hyperframes";
import fs from "node:fs";

const html = `
  <scene duration="5">
    <layer>
      <text x="50" y="80" fontSize="42" align="center">
        用 HTML 寫腳本做影片
      </text>
      <text x="50" y="55" fontSize="24" align="center">
        這支影片是 Hyperframes 渲染出來的
      </text>
    </layer>
  </scene>
`;

async function main() {
  const videoBuffer = await render({
    html,
    width: 1920,
    height: 1080,
    fps: 30,
  });

  fs.writeFileSync("output/simple.mp4", videoBuffer);
}

main();

然後在 package.json 新增指令：

{
  "scripts": {
    "simple": "ts-node scripts/simple.ts"
  }
}

執行：

pnpm simple

目標：確認自己可以從一段自訂 HTML，產生一支 mp4，並理解 HTML 每一行大概對應到畫面什麼東西。

---

3. 接上自己的 LLM / Agent

接下來，把「寫 HTML 腳本」交給 LLM 或 Agent：

1. 準備一份輸入：PRD、Markdown、網站 HTML 等
2. 在程式裡呼叫任意 LLM（本地模型或雲端 API 皆可）：

``ts
async function generateHtmlFromPrd(prdText: string): Promise<string> {
const prompt =請根據以下 PRD 產生一段 Hyperframes 用的 HTML 腳本，
拆成多個 ，每個 scene 3-5 秒，場景中包含主標題和一句說明：\n\n${prdText}`;

 const res = await callYourLLM(prompt); // 可接 Gemini Interactions API / Claude / OpenAI
 return res.html; // 規劃好讓模型回傳一整段 HTML

}
“`

1. 把 html 換成 LLM 輸出的內容，其他 render 流程不變。

建議實作順序：

1. 先用手寫 HTML 確認渲染流程 OK
2. 再加上 LLM 生 HTML
3. 最後才整合到完整 Agent / workflow 中

💡 關鍵： 先跑通「手寫 HTML → 影片」再接 LLM，可以把問題範圍縮小在腳本品質，而不是整條 pipeline。

---

實戰 workflow 範例：網站 → 腳本 → 影片

假設你已經有一個「website cloner」Agent（或直接用 Gemini/Claude 爬一個網址），可以這樣串：

1. 抓網站內容：
2. 把目標 landing page HTML 抓回來
3. 抽出主要標題、副標、幾個關鍵區塊文字
4. LLM 產生影片腳本 HTML：
5. prompt：
   > 幫我把下面網站內容濃縮成 60 秒產品介紹影片腳本，輸出 Hyperframes HTML，拆成 4-5 個 scene，依序介紹痛點、解法、功能、CTA。
6. Hyperframes 渲染影片：
7. 把上一段產出的 HTML 餵給 Hyperframes
8. 輸出一支 mp4，直接用在：
   • A/B 測試新版本 landing page
   • 業務寄給潛在客戶的「快速介紹影片」

這整條線只要串完一次，以後對任何網址都能做到「自動 clone 成一支介紹影片」，只需要調整 prompt 和場景模板。

---

小結：把影片當程式來維護

Hyperframes 的價值在於：讓影片變成一個可以被 HTML / TypeScript、LLM、Agent 操控的「程式」，而不是一次性輸出的二進位檔。

如果你身在工程或產品團隊，習慣用 Git 管規格、用 CI/CD 部署後端，Hyperframes 讓你用同樣思維管理影片資產，從文字文件一路自動化輸出可用的影片成果。

🚀 你現在可以做的事

• clone Hyperframes 專案並跑一次官方範例，確認能成功輸出 mp4
• 手寫一份最小 HTML 腳本，跑通「HTML → Hyperframes → 影片」流程
• 挑一份 PRD 或 README，嘗試讓你的 LLM 產生第一版影片腳本 HTML 並渲染出影片