VibeCoding
← 返回首頁

Agentic Video 就是 HTML：開源 HyperFrames

Bin Liu
Bin Liu
@liu8in
♥514🔁 78
𝕏 (Twitter)🔥🔥🔥
查看原文 ↗

Agentic Video 就是 HTML：開源 HyperFrames

AI Agent 可以撰寫文字、編寫程式、進行對話並自主運作——但它們始終無法編輯影片——現在，它們可以了。

今天，我們開源了 HyperFrames——這是一個專為 AI Agent 打造、基於 HTML 的影片工具鏈與渲染框架。

有了 HyperFrames，Claude Code 現在就是我們內部的影片編輯器。

試著將 HyperFrames Skill 賦予你的 Agent，它們將能立即透過撰寫 HTML（以及 JS + CSS）來製作影片，然後將其渲染為 MP4、MOV 或 WebM 格式。

用 HTML 編輯影片？什麼意思？

對貝多芬而言，交響樂就是一切；對莎士比亞而言，戲劇就是一切——而對 Agent 來說，HTML 就是一切。

AI Agent 不應該去學習 After Effects 或 DaVinci Resolve，因為那些基於 JSON 或 XML 的工具根本不是為 Agent 設計的，它們是為人類設計的。

Agent（LLM）是在網路上訓練出來的。它們看過數十億頁的 HTML、數百萬個 CSS 與 JavaScript 動畫、成千上萬個 GSAP 程式碼片段、SVG 組合以及 Canvas 實驗。網頁是它們訓練資料中規模最大、數量級最高的創意媒介。

當你讓 Agent 撰寫 HTML、CSS 和 JavaScript 時，它們是在使用自己的母語工作。

因此，我們取用它們最優秀的作品，加上一組輕量的 HyperFrames data- 屬性，就完成了。HTML 從此成為最適合 Agent 的原生影片編輯工具鏈。

我們有證據。這是我們的發布影片——透過提示 Claude Code 使用 HyperFrames 所製作：

HyperFrames 的背景故事

HeyGen 最初是透過幫助數百萬人建立 AI 分身來取代攝影機——但我們很快就發現，分身只是故事的一半。人們仍然需要加入複雜的動態圖形、B-roll（輔助鏡頭）和視覺敘事，才能讓影片引人入勝。

精通影片編輯非常困難。它總是涉及複雜的時間軸、圖層、關鍵影格——這些技能需要多年才能學會。對大多數人來說，After Effects 甚至更難。因此，我們採取了不同的途徑，開始嘗試使用 HTML 和 JavaScript 為使用者的影片製作動態圖形。

我們最終選擇了採用 GSAP——一個 JavaScript 動畫函式庫。我們將其整合到我們的影片編輯器中，讓使用者可以將可編輯的動態圖形加入到他們的影片中：

當時，Agent 的能力還不夠好。透過撰寫 HTML+CSS+JS 動畫來製作動態設計仍然相當具有挑戰性。這需要大量的來回溝通，且通常需要工程師手動構建它們。

（沒錯，你沒聽錯，是手寫程式碼。）

但我們已經知道，程式碼 → 影片就是未來的方向。

因此，我們開始嘗試進一步自動化動態圖形和 B-roll 的方法，並開始將它們整合到我們的 Video Agent 中。結果非常成功。這成為使用者最讚不絕口的功能：

「這些說明性的動畫太棒了！」

如你所見，加入動態圖形後，製作品質大幅提升：

有了這樣的成功，我們知道我們走對了方向：我們的 Video Agent 已經能夠將多媒體 asset 整合進連續的場景中，並透過動態圖形來闡述想法。這一切都是透過程式碼生成完成的。但當時的模型還不足以獨立產出可靠或具創意的成果。

接著，2025 年 11 月到了，Gemini 3 和 Opus 4.5 釋出了預覽版。

我們將它們換入我們的 Agent 中——結果令人驚豔。Video Agent 開始穩定且高質量地產出動態圖形和多場景的 B-roll。

此外，透過純粹的 HTML+CSS+JavaScript，我們能夠製作出長篇影片，它們美觀且引人入勝，且完全由最基礎的 HTML 原件和 JavaScript 動畫構建而成。幾乎達到了生產等級。

就在那時，我們開始收斂出 HyperFrames 的早期版本。

HyperFrames 是如何運作的？

HyperFrames 之所以得名，是因為它將 HTML (HyperText Markup Language) 轉化為影片影格 (Video Frames)：Hyper---Frames。

在標準的網頁語法之上，HyperFrames 只需要在 HTML 元素中加入少量的 data- 屬性，我們就能定義影片的時間軸：

這是一個基於 HyperFrames 的影片 HTML 程式碼的超簡單範例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
  <style>
    body { margin:0; width:1920px; height:1080px; overflow:hidden; background:#0D1B2A; }
    .scene { position:absolute; inset:0; width:1920px; height:1080px; overflow:hidden; background:#0D1B2A; }
    #scene2 { z-index:2; opacity:0; }

    .s1 { display:flex; flex-direction:column; justify-content:center; width:100%; height:100%; padding:120px 160px; gap:20px; box-sizing:border-box; }
    .s2 { display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:100%; padding:100px 160px; gap:32px; box-sizing:border-box; }
  </style>
</head>
<body>
  <div id="root" data-composition-id="hyperframes-intro"
       data-width="1920" data-height="1080" data-start="0" data-duration="5">
    <div id="scene1" class="scene">
      <div class="s1">
        <div class="s1-title">HTML is Video</div>
        <div class="s1-sub">Compose. Animate. Render.</div>
      </div>
    </div>

    <div id="scene2" class="scene">
      <div class="s2-title">Start composing.</div>
    </div>
  </div>
  <script>
    window.__timelines = window.__timelines || {};
    var tl = gsap.timeline({ paused: true });

    // Scene 1 — title entrance
    tl.from(".s1-title", { x:-40, opacity:0, duration:0.5, ease:"power3.out" }, 0.25);
    tl.from(".s1-sub", { y:15, opacity:0, duration:0.4, ease:"power2.out" }, 0.5);

    // Blur crossfade transition
    var T = 2.2;
    tl.to("#scene1", { filter:"blur(8px)", scale:1.03, opacity:0, duration:0.35, ease:"power2.inOut" }, T);
    tl.fromTo("#scene2",
      { filter:"blur(8px)", scale:0.97, opacity:0 },
      { filter:"blur(0px)", scale:1, opacity:1, duration:0.35, ease:"power2.inOut" }, T + 0.08);

    // Fade out
    tl.to(".s2-title", { y:-12, opacity:0, duration:0.3, ease:"power2.in" }, 4.5);
    tl.to(".s2-cmd", { y:-8, opacity:0, duration:0.3, ease:"power2.in" }, 4.6);

    window.__timelines["hyperframes-intro"] = tl;
  </script>
</body>
</html>

這是一個不到 70 行程式碼的完整影片組合。場景一淡入標題，場景二模糊交叉淡入到 CTA（行動呼籲）——全部在 5 秒內完成。data-start 和 data-duration 控制時間，data-track-index 控制圖層，GSAP 驅動動畫。其他一切都只是 HTML、CSS 和 JS：

任何在瀏覽器中能運作的東西，在 HyperFrames 中也能運作。CSS 動畫、GSAP 時間軸、Lottie、Three.js、D3 視覺化、Google Fonts——Agent 可以使用它已經熟悉的任何網頁技術。沒有封裝器，也沒有需要學習的繁重框架。

當然，我們在建構 HyperFrames 時考慮得更多，我們將在未來幾週內發布更詳細的技術部落格。

這就是 HyperFrames：

一行指令，讓你的 Agent 成為影片編輯器：

npx skills add heygen-com/hyperframes

為什麼要開源？

影片是最有效的溝通媒介之一，Agent 應該能夠透過豐富的視覺化效果來製作影片，以與人類溝通。但目前的阻力非常巨大，因為現今所有的影片製作工具都不是為 Agent 設計的。

我們開源 HyperFrames 是為了徹底消除這種阻力：任何 Agent、任何 LLM、無需 API 金鑰、即時影片，全部在本地完成。

從根本上來說，我們相信 HTML 是影片未來的格式。我們致力於與擁有相同信念的廣大社群一起建構這個未來。

感謝！

向 HyperFrames v1.0.0 背後那支規模雖小但極其強大的團隊致敬：Abhay (@AbhayZala7)、Jake (@JakeFromHeyGen)、James (@Rames_Jusso)、Miguel (@Miguel07Code) 和 Vance Ingalls。

特別感謝過去 3 個月提供支援的每一個人：

@joshua_xu_ @yanrong @kimsanovv7 @davidttjjss @toolstelegraph @yaboinick @emse_jianle @jieun @JeaneCarlosX

我們也從一些最優秀的開源專案中汲取了靈感：@greensock、@Remotion、@openclaw 等。我們將目前所建構的一切——核心引擎、Studio、渲染器、Skills、範例——全部以 Apache 2.0 授權開源。

我們全力投入 HyperFrames，並將持續與任何想要為 HyperFrames 做出貢獻的人進行開發與合作。

在 X 上閱讀原文 ↗Gemini 翻譯