VibeCoding
← 返回首頁

HyperFrames推出開源Agent原生影片渲染框架

HeyGen
HeyGen
@HeyGen
♥8,134🔁 1,867
𝕏 (Twitter)🔥🔥
📎 來源文章 ↗查看原文 ↗
AI 中文摘要Claude 生成

HyperFrames推出開源Agent原生影片渲染框架。

HeyGen發布「HyperFrames」，一個開源影片渲染框架，讓使用者透過HTML撰寫、預覽並渲染影片，專為AI Agent設計，支援Claude Code、Cursor等工具生成發佈影片。
該框架強調HTML原生、無需React或專有DSL，透過npx skills add heygen-com/hyperframes安裝skills，即可讓Agent自動產生正確的HTML組成、GSAP動畫與CLI指令。

快速入門方式

HyperFrames提供兩種啟動選項，推薦使用AI編碼Agent。

  • Agent驅動（推薦）：執行npx skills add heygen-com/hyperframes，讓Agent學習框架模式。在Claude Code中，skills註冊為斜線指令，如/hyperframes用於創作組成、/hyperframes-cli處理CLI指令、/gsap輔助動畫。

  • 手動專案：npx hyperframes init my-video，再用npx hyperframes preview瀏覽器即時預覽、npx hyperframes render輸出MP4。需Node.js >=22與FFmpeg。

hyperframes init會自動安裝skills，便於隨時交給Agent處理。

核心優勢

HyperFrames解決傳統影片工具的痛點，專注Agent工作流。

  • HTML原生：組成為HTML檔案加data屬性，無需React或專有DSL。
  • AI優先：Agent熟悉HTML，CLI預設非互動，適合自動化。
  • 確定性渲染：相同輸入產生相同輸出，適用自動化管線。
  • Frame Adapter模式：自帶動畫運行時，如GSAP、Lottie、CSS、Three.js。

運作原理

使用者以HTML與data屬性定義影片，瀏覽器即時預覽，本地或Docker渲染MP4。

範例HTML：

<div id="stage" data-composition-id="my-video" data-start="0" data-width="1920" data-height="1080">
  <video id="clip-1" data-start="0" data-duration="5" data-track-index="0" src="intro.mp4" muted playsinline></video>
  <img id="overlay" class="clip" data-start="2" data-duration="3" data-track-index="1" src="logo.png" />
  <audio id="bg-music" data-start="0" data-duration="9" data-track-index="2" data-volume="0.5" src="music.wav"></audio>
</div>

影片元素須靜音，音訊獨立於<audio>以利混音；所有時間軸註冊於window.__timelines確保可seek。

元件目錄

提供50+現成區塊與元件，涵蓋社群覆蓋、著色器轉場、資料視覺化與電影效果。

  • npx hyperframes add flash-through-white：著色器轉場。
  • npx hyperframes add instagram-follow：社群覆蓋。
  • npx hyperframes add data-chart：動畫圖表。

完整目錄見hyperframes.heygen.com/catalog。

套件架構

HyperFrames拆分多個npm套件，支援模組化使用。

套件 描述
hyperframes (packages/cli) CLI：建立、預覽、檢查、渲染組成
@hyperframes/core (packages/core) 類型、解析器、產生器、檢查器、運行時、frame adapters
@hyperframes/engine (packages/engine) 可seek頁面轉影片擷取引擎（Puppeteer + FFmpeg）
@hyperframes/producer (packages/producer) 完整渲染管線（擷取 + 編碼 + 音訊混音）
@hyperframes/studio (packages/studio) 瀏覽器基組成編輯UI
@hyperframes/player (packages/player) 可嵌入<hyperframes-player>網頁元件
@hyperframes/shader-transitions (packages/shader-transitions) WebGL著色器轉場

Skills系統

內建skills教導Agent框架特定模式，超越通用文件。

  • 安裝：npx skills add heygen-com/hyperframes。
  • Skill 教導內容
    hyperframes HTML組成創作、字幕、TTS、音訊反應動畫、轉場
    hyperframes-cli CLI指令：init、lint、preview、render、transcribe、tts、doctor
    hyperframes-registry 透過hyperframes add安裝區塊與元件
    gsap GSAP動畫API、時間軸、緩動、ScrollTrigger、plugin、React/Vue/Svelte效能

提示指南細節

專屬提示指南教導如何驅動Claude Code、Cursor、Codex等Agent產生HyperFrames組成，提供可複製範例與詞彙表。

一次性設定：npx skills add heygen-com/hyperframes，Claude Code重啟後skills成斜線指令。總是用/hyperframes前綴載入技能上下文，避免Agent依賴模糊記憶產生錯誤HTML。

兩種提示形態

  • Cold start（從零描述）：適合腦中已有創意。

    • 範例：/hyperframes建立10秒產品介紹，淡入標題、暗黑背景、微妙背景音樂。
    • 範例：9:16 TikTok風格鉤子影片，彈跳字幕同步TTS旁白。
    • 最佳指定：持續時間（如10秒、30s）、寬高比（16:9、9:16）、風格（極簡瑞士格柵、高能量社群）、關鍵元素（標題、下三分之一、字幕）。

  • Warm start（基於脈絡合成）：給URL、文件、CSV、逐字稿，讓Agent一併研究與製作。

    • 範例：檢視GitHub repo並用/hyperframes解釋用途與架構。
    • 範例：摘要PDF成45秒推銷影片；CSV轉動畫長條圖；變更日誌Top 3變更成30秒發佈公告。
    • 優勢：產生更豐富、真實內容，避免Agent虛構文案。

迭代互動

視為與影片編輯對話，非從頭重述。

  • 範例：「標題放大2倍。」「切換暗黑模式，加末尾淡出與0:03下三分之一（姓名、職稱）。」「字幕太小且重疊下三分之一，上移並縮小。」「換背景音樂為assets/track.mp3。」

Agent保有組成與skills，精準小修優於冗長重述。

輸出改變詞彙

Skills將自然語言映射框架設定，無需技術細節。

動態與緩動：

說法 Agent用 感覺
smooth power2.out 自然減速
snappy power4.out 快速果斷
bouncy back.out 超調後穩定
springy elastic.out 振盪定位
dramatic expo.out 快啟長滑
dreamy sine.inOut 慢速對稱

時間簡寫：fast (0.2s)=能量、medium (0.4s)=專業、slow (0.6s)=奢華、very slow (1–2s)=電影感。

字幕風格：

風格 字體 動畫 尺寸
Hype 重磅字體 縮放爆發 72–96px
Corporate 乾淨無襯線 淡入滑動 56–72px
Tutorial 等寬 打字機 48–64px
Storytelling 襯線 慢淡入 44–56px
Social 圓潤玩樂 彈跳 56–80px

轉場：

能量 CSS選項 著色器選項
Calm 模糊交錯 跨彎曲變形
Medium 推滑 鞭捲平移
High 縮放穿透 故障、脊線燃燒

音訊反應動畫：低頻映射scale（節拍脈動）、高頻glow（閃爍強度）、振幅opacity（呼吸）、中頻shape（變形）。

標記強調：

模式 效果 適用
highlight 螢光筆掃描 關鍵短語
circle 手繪橢圓 單字
burst 放射線 高潮時刻
scribble 混亂刮痕 刪除
sketchout 矩形輪廓 註解

TTS語音：本地Kokoro（無API金鑰）。產品demo用af_heart、af_nova；教學用am_adam、bf_emma；行銷用af_sky、am_michael。

渲染品質：draft（快速迭代）、standard（審核回饋）、high（最終交付）。

關鍵規則

Skills自動強制，人工編輯須遵守：

  • 時間軸全註冊window.__timelines，否則無法seek。
  • 影片元素靜音，音訊獨立<audio>以混音。
  • 禁Math.random()，破壞確定性；需偽隨機用mulberry32等種子PRNG。
  • GSAP時間軸建構同步，無async/await或fetch()。
  • 定時元素加class="clip"與data-start、data-duration、data-track-index。
  • 每場景加入口動畫，無動畫出現顯得斷裂。
  • 場景間加轉場，跳切多為無意。

反模式警示

避免摩擦或錯誤輸出：

  • 勿求React/Vue元件，HyperFrames純HTML+data屬性+GSAP時間軸；求「intro React元件」迫Agent後譯。
  • 勿指定4K或60fps，除非必要；預設1920×1080、30fps快速且優質，高規格明顯拖慢。
  • 勿省略斜線指令，無/hyperframes Agent猜HTML影片慣例而非框架規則。
  • 勿無脈絡貼長錯誤日誌，先跑npx hyperframes lint與npx hyperframes validate。
  • 勿假設Agent知assets，明確提檔案路徑。

推薦工作流

  1. npx hyperframes init my-video架設專案（自動裝skills）。
  2. 在Claude Code（或Cursor/Codex）開專案。
  3. 用/hyperframes加上述形態提示。
  4. npx hyperframes preview邊編邊看。
  5. 小提示迭代。
  6. 滿意後npx hyperframes render --output final.mp4。

文件與許可

完整文件：hyperframes.heygen.com/introduction，含Quickstart、Guides、API Reference、Catalog。Apache 2.0許可，貢獻指南見CONTRIBUTING.md。

HyperFrames證明Agent可取代傳統影片編輯，HTML轉MP4的確定性管線讓自動化影片生產成為趨勢，npm下載與skills整合加速採用。