用HTML寫影片：HyperFrames如何向從未開過After Effects的人打開motion graphics的大門

HyperFrames是HeyGen開放原始碼的影片工具，能把HTML、CSS和動畫轉成MP4。了解如何編寫網頁並把它渲染成影片、motion graphics的民主化真正讓誰受益，以及它的真實邊界在哪裡。

一句話說清HyperFrames是什麼

這是HeyGen的一個開源框架，能把HTML、CSS和動畫轉成MP4檔案。它的口號比任何解釋都更準確：「Write HTML. Render video. Built for agents.」

你寫一個網頁，加上一些告訴系統每個元素何時開始、持續多久的屬性，執行一個命令，就得到一個影片。

重要的不是技術上的新意——Remotion用React做類似的事已經好多年了。重要的是它為誰打開了門。HTML和CSS是地球上被教授得最多的語言。而更相關的是：它們也是AI代理最擅長寫的語言。

真正要緊的部分：民主化不會自動發生

我想在這裡停一下，因為這是我們每次遇到這種工具都會掉進的陷阱。

一項技術可以取得，不代表它能讓我們自由。它給我們的自由是可能。差別在於：我們是學會使用這些知識，還是繼續消費那個工具默認產出的東西。

用一個眾所周知的例子想。當手機鏡頭變好之後，不是所有人都變成攝影師。多數人只是更快地拍了更多普通的照片。真正成為攝影師的，是那些用鄉民的快門權去學習構圖、光線和timing的人——這些都是相機永遠不會白送的。

代理生成的motion graphics也一樣。HyperFrames替你移除了軟體的障礙，但它不替你移除這份工作：知道自己想講什麼、每個鏡頭該多長、一個文案什麼時候才適合出現、以及為什麼三秒的轉場會毀掉一段十五秒廣告的觀看率。

工具讓執行民主化。判斷力仍然屬於你，也仍然是最難得的。

具體是怎麼運作的

一個HyperFrames合成就是一個index.html檔案。在瀏覽器裡打開就能看到。這是官方文件裡舉的例子：

<div id="stage" data-composition-id="launch" data-start="0" data-width="1920" data-height="1080">
  <video class="clip" data-start="0" data-duration="6" data-track-index="0"
         src="intro.mp4" muted playsinline></video>

  <h1 id="title" class="clip" data-start="1" data-duration="4" data-track-index="1">
    Launch day
  </h1>

  <audio data-start="0" data-duration="6" data-track-index="2"
         data-volume="0.5" src="music.wav"></audio>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
  <script>
    const tl = gsap.timeline({ paused: true });
    tl.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1);
    window.__timelines = window.__timelines || {};
    window.__timelines.launch = tl;
  </script>
</div>

如果你從剪輯軟體來的，再看一遍就能認出所有東西：data-track-index是你的時間軸上的軌道，data-start是片段開始的地方，data-duration是它持續多久。這是一條用純文字寫出來的時間軸，而不是用滑鼠拖出來的。

引擎在無頭Chrome裡打開這段HTML，逐幀前進抓取每一幀，再交給FFmpeg拼成MP4。因為每一幀都是透過定位時間上的精確位置生成的，而不是即時播放，所以結果是確定性的：同一個檔案永遠只會生成同一段影片。這正是讓你能自動化渲染、不會出意外的原因。

安裝

首先兩個前提：Node.js 22或更高和FFmpeg。如果沒有，先裝——Node從nodejs.org，FFmpeg從ffmpeg.org或你系統的套件管理員（Mac用brew install ffmpeg，Windows用winget install ffmpeg）。

這些就緒後，整個流程是三個命令：

# 1. 建立新專案
npx hyperframes init my-video
cd my-video

# 2. 在瀏覽器裡看結果（附即時重載）
npx hyperframes preview

# 3. 匯出為MP4
npx hyperframes render

不需要全域安裝任何東西：npx會現場下載並執行。如果啟動時出問題，npx hyperframes doctor會檢查環境並告訴你缺了什麼。

要安裝那些教你的AI代理使用這個框架的skills——如果你不想手寫HTML，這是推薦的路徑：

npx skills add heygen-com/hyperframes --full-depth

會打開一個沒有預選的選取器；你只需要Core Skills組就夠了，因為/hyperframes路由器會在你要求時安裝各自的工作流程。不要略過--full-depth：沒有這個旗標，下載到的可能是幾小時前的過時版本。

之後想保持安裝最新：

npx hyperframes skills update

最後，往一個既有專案裡加入目錄中的現成區塊：

npx hyperframes add flash-through-white   # 著色器轉場
npx hyperframes add instagram-follow      # 社群疊層
npx hyperframes add data-chart            # 動畫圖表

非程式設計師的真正路徑：skills

這是讓它對內容創作者——而不只是開發者——有趣的地方。

HyperFrames發布二十個skills——指令包——教AI代理（Claude Code、Cursor、Codex、Gemini CLI）如何用這個框架做影片。你在上一步已經裝了它們，所以從現在起你的互動不是寫HTML，而是描述影片。

使用/hyperframes，建立一個10秒的產品片頭：標題淡入、背景影片、輕柔的環境音樂。

代理規劃結構、寫HTML、接上動畫、加入音訊、檢查錯誤並渲染。你負責檢查和修改。這正是導演和剪輯師的工作模式：你決定，別人執行，最終品質取決於你要求得有多具體、判斷結果有多準。

值得記住這些skills的名字，因為它們基本上就是一份格式選單：

/hyperframes — 路由器。永遠先讀它；它識別你想要什麼類型的片並呼叫正確的工作流程。
/product-launch-video — 產品或網站促銷片，最長約3分鐘（30-90秒最佳）。
/faceless-explainer — 沒有相機也沒有產品，用從零產生的視覺說明一個概念。
/motion-graphics — 無旁白的短片，10秒以內：動態排字、一個動效資料、logo sting、lower-third。可匯出MP4或透明疊層。
/embedded-captions — 在既有的相機影片上覆上設計好的字幕。
/talking-head-recut — 把訪談或Podcast打包成帶 lower-third、資料callout、pull-quote和畫中畫的節目。
/music-to-video — 讓影片和音軌的節拍同步。
/slideshow — 可翻頁、帶reveals和導覽的簡報，不是渲染影片。
/general-video — 其他一切：長片、多場景、sizzle reel。