Hyperframes：一款本地化、口噴式視頻製作神器（附詳細教程）
整理版優先睇
Hyperframes：用HTML口噴式製作視頻，門檻極低
呢篇文章係由一位AI工具愛好者分享，佢最近玩Hyperframes玩到上癮，覺得呢個工具好值得推薦。Hyperframes係由HeyGen（做AI數字人好出名嗰間公司）開源嘅視頻框架，核心概念係「寫HTML，做視頻」，同之前介紹過嘅Remotion類似，但門檻低好多。作者想解決嘅問題係：一般人想製作專業級視頻，用傳統軟件學習成本太高，用在線工具又功能受限，而家嘅視頻模型如Seedance 2.0雖然靚但價錢貴。Hyperframes提供咗一個低成本、易上手嘅選擇，尤其係佢從設計上就係為AI Agent而造，配合官方skill，你可以用自然語言叫AI幫你完成成個視頻製作流程。
Hyperframes同Remotion最大分別係：Remotion要用React同JSX，如果你唔係React開發者，學習曲線好斜；但Hyperframes只需要HTML同CSS，甚至你連呢啲都唔識，都可以用口噴方式叫AI搞掂。作者用Claude Code做例子，一句提示詞就生成咗一個視頻，全程冇寫過一行Code，就係靠自然語言同AI溝通。呢個係Hyperframes最吸引人之處：將視頻製作門檻降到最低，任何人都可以輕鬆上手。
總括嚟講，Hyperframes係一個「為Agent而生」嘅視頻框架，佢重新定義咗「視頻開發」嘅門檻。如果你係普通內容創作者、AI愛好者，或者想快速製作視頻嘅人，Hyperframes係一個非常值得試嘅工具。作者建議，如…
- Hyperframes係由HeyGen開源嘅視頻框架，核心係用HTML+CSS定義視頻，門檻極低，唔需要React知識。
- 佢由設計開始就係為AI Agent而造，官方有skill包，可以喺Claude Code等Agent度直接用自然語言叫佢做曬所有嘢。
- 功能包括：HTML定義視頻、實時預覽、一鍵渲染MP4、50+預設組件、GSAP動畫、WebGL轉場、確定性渲染等。
- 快速上手只需要Node.js同FFmpeg，5分鐘內就可以出第一個片，適合普通內容創作者同AI愛好者。
- 同Remotion相比，Hyperframes學習曲線更平、完成速度更快、AI原生支持更好，但生態暫時冇咁成熟。
Hyperframes GitHub倉庫
開源視頻框架嘅官方倉庫，包含源碼、文檔同範例。
Hyperframes係乜嘢？
呢個工具係HeyGAN推出嘅開源視頻框架，核心理念就係一句：「Write HTML. Render video. Built for agents.」即係你識寫網頁，就識做視頻，而且佢係專為AI智能體設計嘅。
Hyperframes嘅最大賣點係：你連HTML、CSS都唔使識，全程可以用口噴方式完成視頻創作。
作者用Claude Code玩咗一陣就上癮，因為佢只需要用自然語言講個需求，AI就會自動生成HTML、預覽同渲染。呢個同傳統視頻製作工具好唔同，亦同Remotion呢類要React基礎嘅框架有好大分別。
核心功能一覽
Hyperframes嘅功能都幾全面，以下係幾個最值得留意嘅點：
用HTML定義視頻——文字、圖片、視頻、音頻、時間軸全部透過HTML標籤同data屬性控制，冇任何新語法。
實時預覽，修改零成本——改完代碼瀏覽器自動刷新，睇到即時效果。
一鍵渲染MP4——基於Chrome幀捕獲API+FFmpeg，輸出高質量視頻。
- 50+預設組件庫：涵蓋片頭、轉場、字幕、數據圖表、社交媒體疊加層等。
- 豐富動畫支持：GSAP動畫、WebGL shader轉場（14種）、CSS動畫、Lottie動畫。
- 確定性渲染：同一輸入文件每次輸出嘅每一幀都一樣，適合批量同自動化。
快速上手：5分鐘出片
想試Hyperframes，首先你要裝好Node.js（>=22）同FFmpeg。跟住用呢條命令初始化項目：
npx hyperframes init my-video
cd my-video然後你可以直接用AI Agent（例如Claude Code）安裝官方skill，完全用自然語言做視頻。安裝命令係：
npx skills add heygen-com/hyperframes裝完skill之後，你只需要同AI講「幫我做一個10秒嘅產品介紹視頻」，AI就會自動搞掂。
如果你鍾意手動寫，一個標準嘅Hyperframes HTML係咁樣：
<div id="root"
data-composition-id="hello"
data-width="1920"
data-height="1080">
<!-- 第一層：背景 -->
<div class="clip"
data-start="0"
data-duration="5"
data-track-index="0"
style="background-color: #1a1a2e; width: 100%; height: 100%;">
</div>
<!-- 第二層：標題文字 -->
<h1 class="clip"
data-start="0.5"
data-duration="4"
data-track-index="1"
style="color: white; font-size: 96px; text-align: center; margin-top: 400px;">
Hello, Hyperframes!
</h1>
<!-- 第三層：副標題 -->
<p class="clip"
data-start="1.5"
data-duration="3.5"
data-track-index="1"
style="color: #aaa; font-size: 48px; text-align: center; margin-top: 520px;">
我用HTML做了一個視頻
</p>
<!-- 背景音樂 -->
<audio class="clip"
data-start="0"
data-duration="5"
data-track-index="2"
data-volume="0.3"
src="../assets/bgm.mp3">
</audio>
</div>預覽就用npx hyperframes preview，會自動開瀏覽器顯示。渲染MP4用：
npx hyperframes render --output ../output/hello.mp4如果你用AI Agent+skill，連渲染呢步都可以叫AI代勞，直接輸出.mp4文件。
Prompt提示詞技巧
要發揮Hyperframes嘅威力，Prompt嘅寫法好重要。以下係幾個實用技巧：
指定時長：例如「做一個15秒嘅產品展示視頻」。
指定畫幅：例如「做一個9:16豎屏抖音風格視頻」，默認係1920×1080橫屏。
指定風格：例如「高端奢華風格，深色背景」或者「活潑跳躍風格嘅抖音短視頻」。
指定元素：例如「片頭有logo動畫，中間展示三個產品特點，最後有結束語同CTA按鈕」。
官方仲提供咗動畫風格詞彙表，你可以直接話「用ease-out動畫」或者「加一個fade-in效果」，AI會對應調整。
Hyperframes vs Remotion：點樣揀？
如果你已經係React開發者，Remotion會好順手，佢生態成熟，文檔詳盡。但如果你係普通用戶或者AI愛好者，Hyperframes嘅門檻低好多。
學習曲線：Hyperframes極低（只係HTML+CSS），Remotion需要React基礎。
首個視頻完成速度：Hyperframes 5分鐘，Remotion至少30分鐘。
AI Agent支持：Hyperframes原生支持（有官方skill），Remotion需要自己搭建。
另外，作者仲提咗可以將Hyperframes結合Seedance 2.0，創造更驚豔嘅效果。總之，呢個工具值得一試。
呢幾日不停咁玩一款視頻製作工具，玩到有啲上癮，越玩越沉迷。
Hyperframes，你可能覺得有啲陌生，但我話你知佢背後係HeyGen，你好大機會應該聽過。
係，就係嗰間做AI數碼人好犀利嘅公司。
Hyperframes 係一個視頻開發嘅開源框架，同之前我介紹過嘅 Remotion 喺產品設計思路上類似，都係想幫你透過「代碼嚟創作視頻」。
其實而家做到視頻嘅工具太多喇，傳統老牌嗰啲視頻製作軟件就唔使講（學習成本太高），各種視頻剪輯同特效工具都係多到數唔曬，加上而家嘅視頻模型都越來越犀利，令你選擇創作視頻嘅工具變得更加方便。
Seedance 2.0 真係好犀利，前幾日仲開放咗API接口，個人都可以直接調用。佢確實因為模型能力提升進一步降低咗抽卡概率，但係唔平嘅價錢都會嚇走好多人。
而 Hyperframes 同 Remotion 一樣都係希望喺視頻模型嘅成本仲未俾普通人真正接受前，再俾多一種低成本製作視頻嘅另外選擇你。
但我話你知，Remotion 確實好犀利，但你要識 React 代碼，仲要識一啲視頻創作嘅專業知識，例如劇本、分鏡、轉場、動畫等等，先至創作到比較驚豔嘅視頻效果，一般有開發能力嘅小型團隊先用。
而 Hyperframes 完全唔同，佢係用 HTML + CSS 嚟進行視頻製作，甚至你連 HTML、CSS 都唔需要識，喺創作同編輯視頻嘅全過程都可以用口講嘅方式完成，呢個就係我越玩越上癮嘅主要原因，同時亦係佢同 Remotion 嘅最大分別。
Hyperframes 將視頻製作嘅門檻降到更低，普通人可以非常輕鬆咁上手。
佢屬於 AI Agent 時代嘅產物，HeyGen 基於呢個 Hyperframes 框架同時開發並上線咗俾人類同 Agent 使用嘅 CLL 同 skill。
兩個配套工具組合埋一齊可以徹底釋放 Hyperframes 嘅能力，亦令普通人第一次可以透過自然語言同 Agent 溝通協作就創造到唔錯嘅視頻效果。
好啦，講咗咁多廢話，上個我用 Claude Code 透過一句提示詞就創作到嘅視頻，簡單介紹下 Hyperframes：
Hyperframes 係乜嘢？
頭先上面嗰個視頻唔係用 Premiere 做，亦唔係用 After Effects 渲染。就係用一句自然語言同我嘅 Claude Code 交流之後創作嘅，佢嘅製作方式係：寫 HTML。
雖然 Hyperframes 只係一個啱啱開源冇耐嘅視頻渲染框架，但佢都有背書，來自 AI 視頻領域嘅明星公司 HeyGen。
倉庫地址：
https://github.com/heygen-com/hyperframes
佢嘅核心理念就一句話：
"Write HTML. Render video. Built for agents."
翻譯成人話就係：你識寫網頁，就可以做視頻。
而且，佢由一開始就係為 AI 智能體（Agent）設計嘅，框架本身同 AI 配合得天衣無縫。
呢個意味住咩？
你可以同 AI 講「幫我做一個 10 秒嘅產品介紹視頻」，然後坐等佢將 HTML 寫好、預覽好、渲染好。
全程你唔需要識任何視頻專業知識。
佢嘅核心功能
睇下 Hyperframes 可以幫我哋做啲咩：
1. 用 HTML 定義視頻
你嘅視頻本質上就係一個 HTML 文件。文字、圖片、視頻、音頻、時間軸，全部透過 HTML 標籤同 data 屬性嚟控制。冇任何新嘅語法體系，冇私有 DSL，學 web 開發嗰套嘢直接拎嚟用就得。
2. 實時預覽，修改零成本
寫好 HTML 之後，一條命令就可以喺瀏覽器入面實時預覽效果。改咗代碼，瀏覽器自動刷新，唔使等。呢個對不斷調整細節嘅用戶嚟講，體驗非常友好。
3. 一鍵渲染 MP4
覺得效果 OK 咗？一條命令就可以導出 MP4 文件，裝咗 skill 更加省心，佢可以直接幫你生成喺本地，整個渲染過程基於 Chrome 嘅幀捕獲 API + FFmpeg，最終輸出嘅係高質量視頻文件。
4. AI 智能體原生支持
呢個係 Hyperframes 有別於其他工具嘅地方。佢嘅 CLI 設計完全係為 AI Agent 打造嘅，所有操作都支援命令行參數，唔需要任何交互式操作。你可以叫 AI 自動完成由「創建項目→寫 HTML→預覽→渲染」嘅全流程。
5. 50+ 預設組件庫
官方提供咗一個組件庫，涵蓋片頭、轉場、字幕、數據圖表、社交媒體疊加層等各種常見視頻元素。一條命令就可以安裝同使用，唔需要從零開始寫。
6. 豐富嘅動畫支持
支援 GSAP 動畫、WebGL shader 轉場（14 種）、CSS 動畫、Lottie 動畫文件等。無論你想做平穩嘅過渡定係炫酷嘅視覺特效，都有對應嘅方案。
7. 確定性渲染
同一個輸入文件，渲染出嚟嘅視頻每一幀都完全一樣。呢個對需要批量生成、CI 測試、自動化流水線等場景嚟講，係一個好關鍵嘅能力。
快速上手教程
你跟住下面嘅步驟做，保證你可以輕輕鬆鬆由零到出片。
1、環境準備
開始之前，你嘅電腦需要安裝兩樣嘢：
Node.js（版本 >= 22）
Hyperframes 運行喺 Node 生態下，需要 Node 22 或更高版本。去 https://nodejs.org 下載安裝就得，安裝完成後輸入以下命令喺終端驗證：
node --versionFFmpeg
FFmpeg 係 Hyperframes 渲染視頻嘅核心依賴。macOS 用戶可以用 Homebrew 一鍵安裝：
brew install ffmpegWindows 用戶可以去 https://ffmpeg.org/download.html 下載。
Linux 用戶透過套件管理器安裝：
ubuntu: apt install ffmpeg，
centos: yum install ffmpeg安裝完成後驗證：
ffmpeg -version2、安裝 Hyperframes
最簡單嘅方式，唔需要全域安裝，直接用 npx 運行並初始化一個項目：
npx hyperframes init my-video呢條命令會喺當前目錄下創建一個名為 my-video 嘅文件夾（當然呢個文件夾嘅名稱唔一定非要用呢個，你可以喺上述命令中將「my-video」改成你想要嘅名）。另外，呢個命令亦相當於將 CLI 裝咗。
進入項目目錄：
cd my-video你會見到一啲相關嘅文件：
my-video/
├── index.html ← 視頻 HTML 文件
├── assets/ ← 圖片、視頻、音頻素材放這裏
└── output/ ← 渲染輸出的 MP4 文件在這裏
└── 相關文件 ← 一些跟技能及項目相關的說明文件3、使用 AI Agent 自動做視頻
正常嚟講你裝咗 CLI 之後就可以創作視頻喇，因為 CLI 入麪包括咗各種視頻創作相關嘅指令。但係如果你將 skill 都裝埋，呢兩個組合埋一齊可以更好咁發揮 Hyperframes 最強大嘅功效，亦可以令你嘅 AI Agent 更好咁理解 Hyperframes 嘅全部能力。你就可以完全透過自然語言叫 AI 自動幫你寫 HTML、做視頻同編輯視頻喇。
以 Claude Code 為例，安裝步驟如下：
npx skills add heygen-com/hyperframes安裝完成後，喺 Claude Code 中使用以下斜槓命令：
/hyperframes：AI 會學習如何編寫 Hyperframes 視頻組件
/hyperframes-cli：AI 會學習如何使用 CLI 命令
/gsap：AI 會學習 GSAP 動畫的各種用法安裝完成後，建議重新啟動 Claude Code 會話，然後你就可以咁樣同 AI 講：
幫我做一個 10 秒嘅 [xxx] 產品介紹視頻，有漸入嘅標題、背景視頻同背景音樂
AI 會自動幫你生成完整嘅 HTML 文件，甚至幫你渲染好直接輸出視頻。你只需要描述需求，AI 負責執行。
4、一個標準嘅 Hyperframes 視頻 HTML 文件示例
我哋拎官方一個示例為準，例如 hello.html，內容如下：
<div id="root"
data-composition-id="hello"
data-width="1920"
data-height="1080">
<!-- 第一層：背景 -->
<div class="clip"
data-start="0"
data-duration="5"
data-track-index="0"
style="background-color: #1a1a2e; width: 100%; height: 100%;">
</div>
<!-- 第二層：標題文字 -->
<h1 class="clip"
data-start="0.5"
data-duration="4"
data-track-index="1"
style="color: white; font-size: 96px; text-align: center; margin-top: 400px;">
Hello, Hyperframes!
</h1>
<!-- 第三層：副標題 -->
<p class="clip"
data-start="1.5"
data-duration="3.5"
data-track-index="1"
style="color: #aaa; font-size: 48px; text-align: center; margin-top: 520px;">
我用 HTML 做了一個視頻
</p>
<!-- 背景音樂 -->
<audio class="clip"
data-start="0"
data-duration="5"
data-track-index="2"
data-volume="0.3"
src="../assets/bgm.mp3">
</audio>
</div>呢度包括咗一啲核心語法，解釋如下：
◆ data-composition-id：視頻嘅 ID
◆ data-width / data-height：解像度，闊 × 高
◆ data-start：呢個元素由第幾秒開始出現
◆ data-duration：呢個元素持續幾耐
◆ data-track-index：軌道索引，數字越大越靠上（覆蓋喺下面嘅元素上面）
◆ data-volume：音量（淨係用喺 audio 標籤）
講白咗上面呢啲核心語法就係支援你精細化控制視頻之用。如果你記唔住都冇所謂，直接用自然語言叫你嘅 AI Agent 幫你改就得，你只需要知你要調整嘅目標係乜就得。
5、預覽效果
當 Hyperframes 將視頻製作好之後，你可以喺你嘅 AI Agent 中輸入以下提示詞進行預覽（或者你本地電腦中有視頻播放軟件，都可以直接打開項目 renders 目錄下嘅 .mp4 文件進行預覽）：
幫我執行這個 npx hyperframes preview 命令，我要預覽一下呢條命令會啟動一個本地伺服器，自動打開瀏覽器，顯示你嘅視頻預覽。如果 HTML 文件有修改，瀏覽器會自動刷新實時顯示修改後嘅效果。
此時你就可以見到你嘅視頻喺瀏覽器入面播放。嚴格嚟講佢係一個可交互嘅網頁，但效果同視頻一模一樣。
喺呢個控制枱入面，你除咗可以預覽視頻之外，仲可以查看項目下嘅任何文件，甚至㩒視頻預覽框右下角嘅操作進行視頻嘅逐幀查看。
6、渲染 MP4
其實渲染 MP4 呢步主要都係針對完全使用 CLI 嘅用戶。如果你係喺 AI Agent 中透過使用 skill 嚟創作視頻（普通用戶建議用呢種方式，門檻極低~），喺上面嘅第 5 步中就已經製作完成可以實時預覽喇。
所以，如果你更習慣喺非交互模式下使用 CLI 命令嚟渲染視頻，咁就可以執行以下命令嚟渲染成 MP4，輸出位置同 .mp4 檔案名你都可以自定義：
npx hyperframes render --output ../output/hello.mp4渲染過程會喺終端入面顯示進度。完成之後，去你指定嘅目錄就可以揾到渲染完成嘅 .mp4 文件喇。
到呢度為止，恭喜你！你就完成咗第一個用 HTML 做嘅視頻喇！
再放一個我用 Hyperframes 做嘅稍微複雜少少嘅視頻，係針對近期 Chrome 支援瀏覽器 skill 嘅一個介紹。
喺做呢個視頻之前，我先用我自己嘅視頻自動化 skill 生成咗劇本、字幕、配音、時間軸以及提供咗相應嘅 BGM 同視頻素材。我透過 /hyperframes 技能要求佢幫我製作一個帶極具動感特效同轉場效果嘅合成視頻。
製作呢個視頻時，我全程都係同 Claude Code 用自然語言交流嘅，冇寫一行代碼，亦冇執行任何 CLI 命令，就係用口講嘅方式完成。雖然仲有啲瑕疵，但呢個係一次性成片，做到呢個程度已經非常唔錯喇。
7、Prompt 提示詞技巧
用好 Hyperframes 嘅關鍵之一，就係學識寫 Prompt。特別係針對使用 AI Agent 嘅普通用戶，下面簡單分享一啲實用技巧。例如：
指定時長
"做一個 15 秒的[xxx]產品展示視頻"指定畫幅
"做一個 9:16 豎屏的[xxx]產品的抖音風格視頻"如果唔指定，默認係 1920×1080 橫屏。
指定風格
"做一個高端奢華風格的[xxx]產品視頻，使用深色背景"
"做一個活潑跳躍風格的 抖音/TikTok 短視頻"指定元素
"片頭有 logo 動畫，中間展示三個[xxx]產品特點，最後有結束語和 CTA 按鈕"分步迭代
Hyperframes 支援喺 AI Agent 中進行對話式修改（前提係裝咗 skill）。你唔需要一次過講曬所有需求，可以叫 AI 生成一版，然後逐步調整。例如：
AI：幫我做一個[xxx]產品視頻
你：標題字體再大一點
你：把背景音樂換成 assets/bgm.mp3
你：在第 3 秒處右下三分之一位置加一個我的[xxx]品牌名稱進行顯示AI 每次修改都係精準嘅局部改動，唔需要從頭重寫，然後透過控制枱進行實時預覽。
動畫風格詞彙表
如果你想喺視頻入面加一啲動畫效果，官方提供咗一啲對應嘅內置詞彙表。你可以根據下表嘅對應風格詞，直接話俾 AI Agent 知你想要嘅運動風格，會直接影響視頻嘅最終效果：
Remotion 係乜嘢？
睇完 Hyperframes，再回過頭簡單講下 Remotion。
佢亦都係一款用「代碼製作視頻」嘅開源框架，但佢嘅路線同 Hyperframes 完全唔同。
Remotion 嘅核心理念係：用 React 製作視頻。
如果你熟 React，咁 Remotion 會令你覺得好順手。你可以用 JSX 語法嚟描述視頻嘅每一幀，用 useCurrentFrame() 嚟獲取當前幀，用 useVideoConfig() 嚟獲取視頻配置。
Remotion 將視頻做成咗一種特殊嘅 React 應用。
Remotion 而家喺 GitHub 上嘅星標數已經接近 45K 喇，npm 每月安裝量可以達到 140 萬次，社羣非常龐大，生態成熟，文檔好詳盡（800+ 頁），社羣模板同案例亦都非常多。
倉庫地址：
https://github.com/remotion-dev/remotion
但要留意嘅係，Remotion 係一款商業開源軟件，個人同非商業用途可以免費使用。但如果你嘅公司要用，就需要購買商業許可證，費用唔算低。
Hyperframes vs Remotion：上手門檻對比
我覺得需要對呢兩款視頻製作框架再進行一次對比，主要針對上手門檻，方便你作出選擇。
1、學習曲線
Hyperframes：門檻極低
只要你識少少 HTML 同 CSS，就可以上手。Hyperframes 冇引入任何新嘅語法體系，所有概念都係 web 開發者熟悉嘅：標籤、屬性、CSS 樣式。
冇 JSX（一種嵌入式、類似 XML 嘅語法，佢可以被轉換成合法嘅 JavaScript），冇組件概念，冇狀態管理。
Remotion：需要 React 基礎
Remotion 要求你熟悉 React 框架。呢個意味住你需要了解 JSX 語法、Props、Hooks（例如 useCurrentFrame、useVideoConfig）等概念。如果你唔熟 React，學習曲線會明顯陡峭好多。
2、首個視頻嘅完成速度
Hyperframes：5 分鐘內出片
準備好 Node + FFmpeg → 執行 npx hyperframes init 初始化項目 → 裝上 SKILL → 寫 HTML → 執行 npx hyperframes preview 預覽 → 執行 npx hyperframes render 渲染視頻。全程你只需要記住幾條命令，唔需要配置任何構建工具。
如果你同我一樣習慣用 AI Agent 嚟製作同編輯視頻，前 5 步就夠喇，甚至連第 5 步都唔需要，直接預覽本地已生成好嘅 .mp4 文件就得，唔滿意就返去 AI Agent 中用自然語言繼續修改。
Remotion：至少需要 30 分鐘
你需要：安裝 Node → npx create-video@latest 創建項目 → 選擇模板 → 安裝依賴 → 瞭解項目結構 → 理解 Remotion 嘅 API 寫法 → 寫第一個視頻 → npm run dev 預覽 → npm run build 渲染。
步驟更多，概念更多，第一次跑通需要嘅時間更長。
3、AI Agent 支持
Hyperframes：一出生就係為 Agent 設計嘅
CLI 完全冇交互設計，所有參數都透過命令行傳遞（你要記住，或者當你記唔住嘅時候，就要不斷叫 AI Agent 話俾你知）。
官方仲提供咗專門嘅 skill 包，Claude Code 等 AI Agent 可以直接調用。AI 理解 HTML 比理解 React 組件容易好多，呢個意味住 AI 生成 Hyperframes 視頻嘅質量更高、錯誤率亦會更低。
Remotion：可以同 AI 結合，但需要額外配置
Remotion 本身唔提供官方嘅 Agent skill，需要自己搭建 prompt 工程。對 AI 嚟講，生成 React 代碼同生成 HTML 代碼，後者嘅準確率通常會更高。
4、社羣與生態
Hyperframes：初生之犢，潛力大但生態仲喺建設中
近一星期 GitHub 星標已經快速去到近 6k，開源時間唔長，組件庫同模板喺快速擴充，由而家睇整體生態仲未及得上老牌項目成熟，但我認為潛力巨大。
Remotion：成熟社羣，資源豐富
GitHub 星標近 45k，有 35+ 個模板，800+ 文檔頁面，8000+ Discord 成員，生態非常完善。你遇到嘅問題好大可能已經有人遇到過並解決咗。
5、總結對比
做個簡單嘅對比表，睇起嚟更清楚啲：
寫喺最後
如果話 Remotion 開啟咗用「代碼製作視頻」嘅先河，咁 Hyperframes 就係重新定義咗「視頻製作」嘅門檻。
以前做視頻，一係學 Premiere、After Effects 呢啲專業軟件（時間成本極高），一係用各種線上視頻工具或剪輯軟件（功能受限或冇定製能力）。
Hyperframes 嘅出現，令「寫 HTML 做視頻」成為可能，而 HTML 係目前用戶基數最大嘅編程技能之一。
對普通用戶嚟講，如果你有一啲啲 web 基礎，或者你願意學少少 HTML，Hyperframes 就可以令你喺極短時間內做出媲美專業級效果嘅視頻。
對 AI 愛好者嚟講，Hyperframes 更加係神器。你可以叫 AI 自動完成由構思到出片嘅全部流程，真正實現「講說話做視頻」。
當然，我咁講唔係否定 Remotion，佢依然係一款優秀嘅框架，特別係如果你已經係 React 開發者，佢嘅開發體驗會非常順滑。但對普通用戶、內容創作者或者 AI 愛好者嚟講，Hyperframes 嘅上手門檻低好多。
如果你想以最快速度上手視頻開發，揀 Hyperframes。
如果你已經係 React 老手，Remotion 可以繼續用，始終生態更成熟。但我都建議你試下 Hyperframes，兩者唔衝突，可以共用。
仲有，如果你用咗兩三日或者一個星期之後，覺得自己對 Hyperframes 已經大致熟悉兼上手咗，都可以根據自己嘅工作流需求封裝成特定嘅視頻 skill。如果再結合啱啱開放 API 嘅 Seedance 2.0，咁我相信你一定可以創造出更加驚豔嘅視頻效果！
好工具值得俾更多人知道，希望呢篇文章可以幫你再次打開「視頻開發」嘅新世界。
如果覺得呢篇文章對你有幫助，都請幫忙一鍵三連或者分享俾你身邊有視頻創作需求嘅朋友。
既然睇到呢度，如果覺得唔錯，順手幫手㩒個「讚」、「在看」、「轉發」三連；如果想第一時間收到推送，都可以幫我加個星標★，非常感謝！
這兩天一直在擺弄一款視頻製作工具，玩兒的有點兒上頭了，越玩越上癮。
Hyperframes，可能你聽着有點兒陌生，但我告訴你它背後是 HeyGen，你大概率應該是聽說過的。
對，就是那家做AI 數字人很牛逼的公司。
Hyperframes 是個視頻開發的開源框架，跟之前我介紹過的 Remotion 在產品設計思路上類似，都是想幫助你通過「代碼來創作視頻」。
其實現在能做視頻的工具太多了，傳統老牌的那些視頻製作軟件就不說了（學習成本太高），各種視頻剪輯與特效工具也是一抓一大把，再加上現在的視頻模型也越來越屌，讓你選擇創作視頻的工具變得越來越方便。
Seedance 2.0 確實很牛逼，前些日子也開放了 API 接口，個人也可以直接調用。它確實由於模型能力的提升進一步降低了抽卡概率，但不菲的價格還是會勸退一堆人。
而 Hyperframes 和 Remotion 一樣都是希望在視頻模型的成本還未被普通老百姓真正接受前再給你提供一種低成本製作視頻的另外選擇。
但我想跟你說，Remotion 確實很厲害，但你得會 React 代碼，還得懂一些視頻創作的專業知識，比如腳本、分鏡、轉場、動畫等等，才能創作出比較驚豔的視頻效果，一般具有開發能力的小型團隊才會用。
而 Hyperframes 完全不一樣，它是使用 HTML + CSS 來進行視頻製作，甚至你連 HTML、CSS 也不需要懂，在創作與編輯視頻的全過程中都可以用口噴的方式完成，這也就是我越玩越上癮的主要原因，同時也是它與 Remotion 的最大區別。
Hyperframes 把視頻製作的門檻兒降到了更低，普通人可以非常輕鬆的上手。
它屬於 AI Agent 時代的產物，HeyGen 基於這個 Hyperframes 框架同時開發並上線了給人類和 Agent 使用的 CLL 與 skill。
兩個配套工具組合在一起能徹底釋放Hyperframes的能力，也讓普通人第一次能夠通過自然語言與Agent 溝通協作就能創造出還不錯的視頻效果。
好了，說了這麼多廢話，上個我用 Claude Code 通過一句提示詞就創作出來的視頻，簡單介紹一下 Hyperframes：
Hyperframes 是什麼？
剛剛上面那個視頻不是用 Premiere 做的，也不是用 After Effects 渲染的。就是用一句自然語言跟我的 Claude Code 交流後創作出來的，它的製作方式是：寫 HTML。
雖然 Hyperframes 只是一個剛開源不久的視頻渲染框架，但它也有背書，來自 AI 視頻領域的明星公司 HeyGen。
倉庫地址：
https://github.com/heygen-com/hyperframes
它的核心理念就一句話：
"Write HTML. Render video. Built for agents."
翻譯成人話就是：你會寫網頁，就能做視頻。
而且，它從一開始就是為 AI 智能體（Agent）設計的，框架本身和 AI 配合得天衣無縫。
這意味着什麼？
你可以告訴 AI "幫我做一個 10 秒的產品介紹視頻"，然後坐等它把 HTML 寫好、預覽好、渲染好。
全程你不需要懂任何視頻專業知識。
它的核心功能
看看 Hyperframes 能為我們做些什麼：
1. 用 HTML 定義視頻
你的視頻本質上就是一個 HTML 文件。文字、圖片、視頻、音頻、時間軸，全部通過 HTML 標籤和 data 屬性來控制。沒有任何新的語法體系，沒有私有 DSL，學 web 開發的那套東西直接拿來用就行。
2. 實時預覽，修改零成本
寫好 HTML 之後，一條命令就能在瀏覽器裏實時預覽效果。改了代碼，瀏覽器自動刷新，零等待。這對於反覆調整細節的用戶來說，體驗非常友好。
3. 一鍵渲染 MP4
覺得效果 OK 了？一條命令就能導出 MP4 文件，裝了 skill 更是省心，它能直接幫你生成在本地，整個渲染過程基於 Chrome 的幀捕獲 API + FFmpeg，最終輸出的是高質量視頻文件。
4. AI 智能體原生支持
這是 Hyperframes 區別於其他工具的地方。它的 CLI 設計完全是為 AI Agent 打造的，所有操作都支持命令行參數，不需要任何交互式操作。你可以讓 AI 自動完成從「創建項目→寫 HTML→預覽→渲染」的全流程。
5. 50+ 預設組件庫
官方提供了一個組件庫，涵蓋片頭、轉場、字幕、數據圖表、社交媒體疊加層等各種常見視頻元素。一條命令就能安裝並使用，不需要從零開始寫。
6. 豐富的動畫支持
支持 GSAP 動畫、WebGL shader 轉場（14 種）、CSS 動畫、Lottie 動畫文件等。不管你想做平緩的過渡還是炫酷的視覺特效，都有對應的方案。
7. 確定性渲染
同一個輸入文件，渲染出來的視頻每一幀都完全相同。這對於需要批量生成、CI 測試、自動化流水線等場景來說，是一個很關鍵的能力。
快速上手教程
你跟着下面的步驟做，保證你能輕輕鬆鬆從零到出片。
1、環境準備
開始之前，你的電腦需要安裝兩個東西：
Node.js（版本 >= 22）
Hyperframes 運行在 Node 生態下，需要 Node 22 或更高版本。去 https://nodejs.org 下載安裝即可，安裝完成後輸入以下命令在終端驗證：
node --versionFFmpeg
FFmpeg 是 Hyperframes 渲染視頻的核心依賴。macOS 用戶可以用 Homebrew 一鍵安裝：
brew install ffmpegWindows 用戶可以去 https://ffmpeg.org/download.html 下載。
Linux 用戶通過包管理器安裝：
ubuntu: apt install ffmpeg，
centos: yum install ffmpeg安裝完成後驗證：
ffmpeg -version2、安裝 Hyperframes
最簡單的方式，不需要全局安裝，直接用 npx 運行並初始化一個項目：
npx hyperframes init my-video這條命令會在當前目錄下創建一個名為 my-video 的文件夾（當然這個文件夾的名稱不一定非的用這個，你可以在上述命令中將"my-video"改成你希望的名稱）。另外，這個命令也相當於把 CLI 給裝上了。
進入項目目錄：
cd my-video你會看到一些相關的文件：
my-video/
├── index.html ← 視頻 HTML 文件
├── assets/ ← 圖片、視頻、音頻素材放這裏
└── output/ ← 渲染輸出的 MP4 文件在這裏
└── 相關文件 ← 一些跟技能及項目相關的說明文件3、使用 AI Agent 自動做視頻
正常來講你裝上 CLI 之後就可以創作視頻了，因為 CLI 中包括了各種視頻創作相關的指令。但如果你把 skill 也裝上，這兩個組合在一起能更好的發揮出 Hyperframes 最強大的功效，也能讓你的 AI Agent 更好的理解 Hyperframes 的全部能力。你就可以完全通過自然語言讓 AI 自動幫你寫 HTML、做視頻及編輯視頻了。
以 Claude Code 為例，安裝步驟如下：
npx skills add heygen-com/hyperframes安裝完成後，在 Claude Code 中使用以下斜槓命令：
/hyperframes：AI 會學習如何編寫 Hyperframes 視頻組件
/hyperframes-cli：AI 會學習如何使用 CLI 命令
/gsap：AI 會學習 GSAP 動畫的各種用法安裝完成後，建議重啓 Claude Code 會話，然後你就可以這樣跟 AI 說：
幫我做一個 10 秒的 [xxx] 產品介紹視頻，有漸入的標題、背景視頻和背景音樂
AI 會自動幫你生成完整的 HTML 文件，甚至幫你渲染好直接輸出視頻。你只需要描述需求，AI 負責執行。
4、一個標準的 Hyperframes 視頻 HTML 文件示例
我們拿官方的一個示例為準，比如 hello.html，內容如下：
<div id="root"
data-composition-id="hello"
data-width="1920"
data-height="1080">
<!-- 第一層：背景 -->
<div class="clip"
data-start="0"
data-duration="5"
data-track-index="0"
style="background-color: #1a1a2e; width: 100%; height: 100%;">
</div>
<!-- 第二層：標題文字 -->
<h1 class="clip"
data-start="0.5"
data-duration="4"
data-track-index="1"
style="color: white; font-size: 96px; text-align: center; margin-top: 400px;">
Hello, Hyperframes!
</h1>
<!-- 第三層：副標題 -->
<p class="clip"
data-start="1.5"
data-duration="3.5"
data-track-index="1"
style="color: #aaa; font-size: 48px; text-align: center; margin-top: 520px;">
我用 HTML 做了一個視頻
</p>
<!-- 背景音樂 -->
<audio class="clip"
data-start="0"
data-duration="5"
data-track-index="2"
data-volume="0.3"
src="../assets/bgm.mp3">
</audio>
</div>這裏麪包括了一些核心語法，解釋如下：
◆ data-composition-id：視頻的 ID
◆ data-width / data-height：分辨率，寬 × 高
◆ data-start：這個元素從第幾秒開始出現
◆ data-duration：這個元素持續多長時間
◆ data-track-index：軌道索引，數字越大越靠上（覆蓋在下面的元素上面）
◆ data-volume：音量（僅用於 audio 標籤）
說白了上面這些核心語法就是支持你精細化控制視頻之用的。如果你記不住也沒關係，直接用自然語言讓你的 AI Agent 幫你改就行，你只需要知道你要調整的目標是什麼即可。
5、預覽效果
當 Hyperframes 把視頻製作好以後，你可以在你的 AI Agent 中輸入以下提示詞進行預覽（或者你本地電腦中有視頻播放軟件，也可以直接打開項目 renders 目錄下的 .mp4 文件進行預覽）：
幫我執行這個 npx hyperframes preview 命令，我要預覽一下這條命令會啓動一個本地服務器，自動打開瀏覽器，顯示你的視頻預覽。如果 HTML 文件有修改，瀏覽器會自動刷新實時顯示修改後的效果。
此時你就能看到你的視頻在瀏覽器裏播放了。嚴格來說它是一個可交互的網頁，但效果和視頻一模一樣。
在這個控制枱中，你除了能預覽視頻之外，還可以查看項目下的任何文件，甚至點擊視頻預覽框右下角的操作進行視頻的逐幀查看。
6、渲染 MP4
其實渲染 MP4 這步主要還是針對完全使用 CLI 的用戶。如果你是在 AI Agent 中通過使用 skill 來創作視頻（普通用戶建議使用這種方式，門檻兒極低~），在上面的第 5 步中就已經制作完成可以實時預覽了。
因此，如果你更習慣在非交互模式下使用 CLI 命令來渲染視頻，那可以執行以下命令來渲染成 MP4，輸出位置及 .mp4 文件名你都可以自定義：
npx hyperframes render --output ../output/hello.mp4渲染過程會在終端裏顯示進度。完成之後，去你指定的目錄就能找到渲染完成的 .mp4 文件了。
到這裏為止，恭喜你！你就完成了第一個用 HTML 做的視頻了！
再放一個我用 Hyperframes 做的稍微複雜一點兒的視頻，是針對近期 Chrome 支持瀏覽器 skill 的一個介紹。
在做這個視頻之前，我先用我自己的視頻自動化 skill 生成了腳本、字幕、配音、時間軸以及提供了相應的 BGM 與視頻素材。我通過 /hyperframes 技能要求它幫我製作一個帶極具動感特效及轉場效果的合成視頻。
製作這個視頻時，我全程都是與 Claude Code 用自然語言交流的，沒寫一行代碼，也沒執行任何 CLI 命令，就是用口噴的方式完成的。雖然還有些瑕疵，但這可是一次性成片，做到這個程度已經非常不錯了。
7、Prompt 提示詞技巧
用好 Hyperframes 的關鍵之一，就是學會寫 Prompt。特別是針對使用 AI Agent 的普通用戶，下面簡單分享一些實用技巧。比如：
指定時長
"做一個 15 秒的[xxx]產品展示視頻"指定畫幅
"做一個 9:16 豎屏的[xxx]產品的抖音風格視頻"如果不指定，默認是 1920×1080 橫屏。
指定風格
"做一個高端奢華風格的[xxx]產品視頻，使用深色背景"
"做一個活潑跳躍風格的 抖音/TikTok 短視頻"指定元素
"片頭有 logo 動畫，中間展示三個[xxx]產品特點，最後有結束語和 CTA 按鈕"分步迭代
Hyperframes 支持在 AI Agent 中進行對話式修改（前提是裝了 skill）。你不需要一次說清楚所有需求，可以先讓 AI 生成一版，然後逐步調整。比如：
AI：幫我做一個[xxx]產品視頻
你：標題字體再大一點
你：把背景音樂換成 assets/bgm.mp3
你：在第 3 秒處右下三分之一位置加一個我的[xxx]品牌名稱進行顯示AI 每次修改都是精準的局部改動，不需要從頭重寫，然後通過控制枱進行實時預覽。
動畫風格詞彙表
如果你想在視頻中加一些動畫效果，官方提供了一些對應的內置詞彙表。你可以依據下表中的對應風格詞，直接告訴 AI Agent 你想要的運動風格，會直接影響視頻的最終效果：
Remotion 是什麼？
看完 Hyperframes，再回過頭來簡單說說 Remotion。
它也是一款用「代碼製作視頻」的開源框架，但它的路線和 Hyperframes 完全不同。
Remotion 的核心理念是：用 React 製作視頻。
如果你熟悉 React，那 Remotion 會讓你感覺非常順手。你可以用 JSX 語法來描述視頻的每一幀，用 useCurrentFrame() 來獲取當前幀，用 useVideoConfig() 來獲取視頻配置。
Remotion 把視頻做成了一種特殊的 React 應用。
Remotion 目前在 GitHub 上的星標數已經接近 45K 了，npm 每月安裝量能達到 140 萬次，社區非常龐大，生態成熟，文檔很詳盡（800+ 頁），社區模板和案例也非常多。
倉庫地址：
https://github.com/remotion-dev/remotion
但需要注意的就是，Remotion 是一款商業開源軟件，個人和非商業用途可以免費使用。但如果你的公司需要使用，則需要購買商業許可證，費用不算低。
Hyperframes vs Remotion：上手門檻對比
我覺得需要對這兩款視頻製作框架再進行一下對比，主要針對上手門檻兒，以方便你進行選擇。
1、學習曲線
Hyperframes：門檻極低
只要你懂一點 HTML 和 CSS，就能上手。Hyperframes 沒有引入任何新的語法體系，所有概念都是 web 開發者熟悉的：標籤、屬性、CSS 樣式。
沒有 JSX（一種嵌入式的類似 XML 的語法，它可以被轉換成合法的 JavaScript），沒有組件概念，沒有狀態管理。
Remotion：需要 React 基礎
Remotion 要求你熟悉 React 框架。這意味着你需要了解 JSX 語法、Props、Hooks（如 useCurrentFrame、useVideoConfig）等概念。如果你不熟悉 React，學習曲線會明顯陡峭很多。
2、首個視頻的完成速度
Hyperframes：5 分鐘內出片
準備好 Node + FFmpeg → 執行 npx hyperframes init 初始化項目 → 裝上 SKILL → 寫 HTML → 執行 npx hyperframes preview 預覽 → 執行 npx hyperframes render 渲染視頻。全程你只需要記住幾條命令，不需要配置任何構建工具。
如果你像我一樣習慣使用 AI Agent 來製作和編輯視頻，前 5 步就夠了，甚至連第 5 步都不需要，直接預覽本地已生成好的 .mp4 文件即可，不滿意在回到 AI Agent 中用自然語言繼續修改。
Remotion：至少需要 30 分鐘
你需要：安裝 Node → npx create-video@latest 創建項目 → 選擇模板 → 安裝依賴 → 瞭解項目結構 → 理解 Remotion 的 API 寫法 → 寫第一個視頻 → npm run dev 預覽 → npm run build 渲染。
步驟更多，概念更多，第一次跑通需要的時間更長。
3、AI Agent 支持
Hyperframes：一出生就是為 Agent 設計的
CLI 完全無交互設計，所有參數都通過命令行傳遞（你得需要記住或者當你記不住的時候，還得反覆讓 AI Agent 告訴你）。
官方還提供了專門的 skill 包，Claude Code 等 AI Agent 可以直接調用。AI 理解 HTML 比理解 React 組件容易得多，這意味着 AI 生成 Hyperframes 視頻的質量更高、錯誤率也會更低。
Remotion：可以與 AI 結合，但需要額外配置
Remotion 本身不提供官方的 Agent skill，需要自己搭建 prompt 工程。對於 AI 來說，生成 React 代碼和生成 HTML 代碼，後者的準確率通常會更高。
4、社區與生態
Hyperframes：新生兒，潛力大但生態尚在建設中
近一週 GitHub 星標已快速來到近 6k，開源時間不長，組件庫和模板在快速擴充，從目前來看整體生態還不如老牌項目成熟，但我認為潛力巨大。
Remotion：成熟社區，資源豐富
GitHub 星標近 45k，有 35+ 個模板，800+ 文檔頁面，8000+ Discord 成員，生態非常完善。你遇到的問題大概率已經有人遇到並解決了。
5、總結對比
做個簡單的對比表，看着更清楚一些：
寫在最後
如果說 Remotion 開啓了用「代碼製作視頻」的先河，那 Hyperframes 則是重新定義了「視頻製作」的門檻兒。
過去做視頻，要麼學 Premiere、After Effects 這種專業軟件（時間成本極高），要麼用各種在線視頻工具或剪輯軟件（功能受限或沒有定製能力）。
Hyperframes 的出現，讓「寫 HTML 做視頻」成為可能，而 HTML 是目前用戶基數最大的編程技能之一。
對於普通用戶來講，如果你有一點點 web 基礎，或者你願意學習一點 HTML，Hyperframes 則能讓你在極短時間內做出媲美專業級效果的視頻。
對於 AI 愛好者來說，Hyperframes 更是神器。你可以讓 AI 自動完成從構思到出片的全部流程，真正實現「說話做視頻」。
當然，我這麼說並不是就否定了 Remotion，它依然是一款優秀的框架，特別是如果你已經是 React 開發者，它的開發體驗會非常順滑。但對於普通用戶、內容創作者或者 AI 愛好者來說，Hyperframes 的上手門檻兒要低得多。
如果你想以最快速度上手視頻開發，選 Hyperframes。
如果你已經是 React 老手，Remotion 可以繼續使用，畢竟生態更成熟。但我也建議你試試 Hyperframes，兩者並不衝突，可以共用。
還有，如果你使用了2、3天或者一週之後，覺得自己對 Hyperframes 已經基本熟悉且上手了，也可以根據自己的工作流需求封裝成特定的視頻 skill。如果再結合剛剛開放 API 的 Seedance 2.0，那我相信你一定能夠創造出更為驚豔的視頻效果！
好工具值得被更多人知道，希望這篇文章能幫你再次打開「視頻開發」的新世界。
如果覺得這篇文章對你有幫助，也請幫忙一鍵三連或者分享給你身邊有視頻創作需求的朋友。
既然看到這兒了，如果覺得還不錯，幫忙隨手點個「贊」、「在看」、「轉發」三連；如果想第一時間收到推送，也可給我加個星標★，非常感謝！