2 個 GitHub 上最主流的 HTML 生成視頻的 Skill，一起研究研究。
整理版優先睇
HyperFrames 同 html-video：兩個用 HTML 整視頻嘅開源 Skill，一個係渲染引擎，一個係模板封裝
呢篇文章介紹咗兩個喺 GitHub 上人氣好高嘅 HTML 生成視頻嘅開源項目：HyperFrames 同 html-video。作者想分享呢兩個工具嘅使用方法同分別，幫讀者揀啱自己嘅方案。整體嚟講，HyperFrames 係一個底層渲染引擎，而 html-video 係基於 HyperFrames 嘅高階封裝工具。
HyperFrames 由 HeyGen 團隊開源，核心概念係一個 HTML 文件就係一個視頻，用 data 屬性控制元素時間，再用 GSAP 或 CSS 動畫做效果。佢原生為 AI Agent 設計，內置 15 個 Skill，可以直接叫 Agent 幫手整。唔使 React 或者打包工具，純 HTML 檔案就可以預覽，好方便。
html-video 由 Open Design 團隊開發，提供 21 套精心設計嘅模板，支援連結轉視頻，例如直接貼 GitHub 或者微信公眾號文章連結，AI 會自動分析內容並套用模板。佢仲有多 Agent 後端，可以切換唔同引擎。如果你想要快速產出有質素嘅視頻，呢個會更適合。
- HyperFrames 係純 HTML 渲染引擎，用 data 屬性定義元素時間，適合 Agent 直接寫 HTML。
- html-video 提供 21 套商用模板，支援連結轉視頻，更易上手。
- 兩個項目都支援多種動畫引擎（GSAP、CSS等），但 HyperFrames 需從零開始，html-video 有現成模板。
- HyperFrames 原生為 AI Agent 設計，內置 15 個 Skill；html-video 支援多 Agent 後端，可切換引擎。
- 如果追求自動化同確定性，揀 HyperFrames；如果想快速產出有質素嘅視頻，揀 html-video。
HyperFrames GitHub 倉庫
HeyGen 開源嘅視頻渲染框架，用 HTML+CSS+動畫直接渲染 MP4。
html-video GitHub 倉庫
Open Design 團隊開源嘅 HTML 版剪映，提供模板同連結轉視頻功能。
html-video 本地啟動步驟
pnpm install && pnpm -r build && node packages/cli/dist/bin.js studio，然後打開
HyperFrames：一個 HTML 文件就係一個視頻
HyperFrames 係 HeyGen 今年 4 月開源嘅視頻渲染框架，而家已經 2.5 萬多 Star。佢嘅核心思路係：一個 HTML 文件就係一個視頻。你喺 HTML 入面用 data 屬性 定義每個元素嘅出現時間、持續時長同所在軌道，然後用 GSAP 或 CSS 動畫 控制運動。
HyperFrames 原生為 AI Agent 設計，內置 15 個 Skill，裝上之後可以直接同 Agent 講「幫我整一個介紹視頻」。佢行 純 HTML 路線，唔使 React 或打包工具，一個 index.html 檔案瀏覽器直接打開就能預覽。
- 1 動畫引擎隨便揀：GSAP、CSS Animations、Lottie、Three.js、Anime.js、Web Animations API 都用得，透過適配器模式接入。
- 2 內置 Catalog 組件庫：轉場效果、數據圖表、字幕疊層、社交平台樣式等常用元素有現成組件，仲有 Shader 轉場。
- 3 安裝好簡單：同 Agent 講「幫我安裝 hyperframes 呢個 skill」，裝完直接講你想做咩視頻就得。
開源地址：https://github.com/heygen-com/hyperframeshtml-video：HTML 版剪映，21 套模板即刻用
Open Design 團隊最近開源咗 html-video，定位係 HTML 版剪映。佢哋之前做嘅 Claude Design 開源平替已經有 6 萬多 Star。html-video 喺 HyperFrames 之上再包一層，重點做咗三件事：
- 21 套精心設計嘅模板：涵蓋數據可視化、產品宣傳、動態排版、電影片頭、Logo 片尾等場景，每套 license 清理可直接商用。
- 連結轉視頻：直接丟文章連結或 GitHub 倉庫地址，AI 會自動分析內容，拆成多個場景，套模板渲染成片，支援微信公眾號文章。
- 多 Agent 後端：支援 Open Design、Claude Code、Codex、Hermes 等 Agent，喺 Studio 介面可以隨時切換。
佢仲有一個本地 Studio 介面，瀏覽器打開就能揀模板、編輯每幀文字、加背景音樂同配音，最後導出 MP4，成個流程喺本地跑。作者試過生成蘋果公司宣傳片，效果比 HyperFrames 好。
pnpm install
pnpm -r build
node packages/cli/dist/bin.js studio
打開 http://127.0.0.1:3071 就能用揀 HyperFrames 定 html-video？
兩個項目都係用網頁代碼造視頻，但適用場景好唔同：
- HyperFrames 適合需要高度自訂、從零開始控制每一幀嘅用戶，尤其係想用 Agent 自動化生成、追求確定性結果嘅場景。
- html-video 適合想快速產出有質素視頻嘅用戶，尤其係唔想寫 code、直接貼連結就用得嘅人。
如果純粹想試玩，建議先裝 html-video，因為內置模板可以即刻見到效果；如果想深入學代碼化視頻，就由 HyperFrames 嘅 HTML 語法開始。
01
HyperFrames
呢個係HeyGen喺今年4月開源嘅視頻渲染框架，𠵱家已經有2.5萬幾個Star㗎喇。
佢俾你用寫網頁嘅方式嚟做視頻。HTML + CSS + 動畫，寫完直接渲染成MP4。
HeyGen團隊你可能冇聽過，前兩年好Hit嘅馬斯克講中文、郭德綱講英文嘅改口型視頻，就係佢哋產品生成嘅。
開源地址：https://github.com/heygen-com/hyperframes核心思路係：一個HTML檔案就係一個視頻。
你喺HTML入面用data屬性定義每個元素嘅出現時間、持續時長同埋所在軌道，然後用GSAP或者CSS動畫控制運動。
HyperFrames嘅渲染引擎喺無頭Chrome入面逐格錄製，最後用FFmpeg合成MP4。
成個過程完全確定性，同一個HTML永遠產出同一個視頻，冇隨機性。
呢點對自動化場景特別重要，唔怕結果飄。
原生為AI Agent設計。
呢個係佢同其他視頻框架最大嘅分別。
HyperFrames內置咗15個Skill，裝咗之後你可以直接同Agent講「幫我用 hyperframes skill，做一個逛GitHub嘅公眾號介紹視頻」"。
Agent就會自動寫HTML、加動畫、渲染成片。
效果點講好呢，mmmmm 你自己體會嚇啦，可能係我用錯方式？
唔需要React，唔需要打包。
Remotion都係做代碼化視頻嘅，但佢要求你用React寫組件，仲要配打包工具。
HyperFrames揀咗純HTML路線，一個index.html檔案瀏覽器直接打開就可以預覽，Agent寫起上嚟都更自然，畢竟HTML係所有Agent都會寫嘅嘢。
動畫引擎隨便揀。
GSAP、CSS Animations、Lottie、Three.js、Anime.js、Web Animations API都用得，通過適配器模式接入。
你熟邊個就用邊個，唔使新學一套。
內置Catalog組件庫。
轉場效果、數據圖表、字幕疊層、社交平台樣式呢啲常用元素都有現成組件，一行命令加到項目入面。
仲有Shader轉場，WebGL級別嘅視覺效果。
安裝都好簡單，直接同你嘅Agent講：「幫我安裝hyperframes呢個skill」
裝完直接話畀佢知你想做咩視頻就得。
開源地址：https://github.com/heygen-com/hyperframes02
HTML版剪映，21套模板
Open Design團隊最近都開源咗一個HTML視頻項目，叫html-video。
Open Design就係做Claude Design開源平替嗰個團隊，嗰個項目喺GitHub上已經有6萬幾個Star㗎喇。
html-video係佢哋同一個團隊做嘅，定位係HTML版嘅剪映。
開源地址：https://github.com/nexu-io/html-video同HyperFrames唔同嘅地方係，HyperFrames係渲染引擎，你要由零開始寫HTML。
html-video喺HyperFrames之上又包多一層，重點做咗三件事。
21套精心設計嘅模板。
涵蓋數據可視化、產品宣傳、動態排版、電影片頭、Logo片尾各種場景。
每套模板都有license清理，可以直接商用，唔使擔心版權問題。
連結轉視頻。
你直接掉低一篇文章連結或者GitHub倉庫地址，html-video會自動抓取內容，用AI分析文章結構，拆成多個場景，套上模板渲染成視頻。
支援微信公眾號文章，對國內用戶好友好。
例如你直接貼一個GitHub連結生成一個介紹視頻。
多Agent後端。
支援Open Design、Claude Code、Codex、Hermes等Agent，你喺Studio界面入面可以隨時切換。
咩都冇裝嘅話，配個Anthropic API Key都可以直接用。
佢仲有一個本地Studio界面，瀏覽器打開就可以揀模板、編輯每格文字、加背景音樂同配音，最後導出MP4。
成個流程喺本地行，唔使上傳到雲端。
我有試過一個，叫佢生成蘋果公司宣傳視頻。效果的確比上面嗰個開源項目好啲。
啟動好快：
pnpm install
pnpm -r build
node packages/cli/dist/bin.js studio打開http://127.0.0.1:3071就可以用㗎喇。
html-video嘅架構設計幾得意，佢將渲染引擎做成可插拔嘅適配器。
𠵱家默認用HyperFrames引擎，但Remotion、Motion Canvas呢啲引擎都在路線圖上面。
即係話以後換引擎唔使重寫模板，底層引擎換咗，上面嘅模板同Agent工作流都可以直接重用。
03
點擊下方卡片，關注逛逛 GitHub
這個公眾號歷史發佈過很多有趣的開源項目，如果你懶得翻文章一個個找，你直接關注微信公眾號：逛逛 GitHub ，後台對話聊天就行了：
01
HyperFrames
這個是 HeyGen 在今年 4 月開源的視頻渲染框架，現在已經 2.5 萬多 Star 了。
它讓你用寫網頁的方式來做視頻。HTML + CSS + 動畫，寫完直接渲染成 MP4。
HeyGen 團隊你可能沒聽說過，前兩年很火的馬斯克說中文、郭德綱說英文的改口型視頻，就是它們產品生成的。
開源地址：https://github.com/heygen-com/hyperframes核心思路是：一個 HTML 文件就是一個視頻。
你在 HTML 裏用 data 屬性定義每個元素的出現時間、持續時長和所在軌道，然後用 GSAP 或 CSS 動畫控制運動。
HyperFrames 的渲染引擎在無頭 Chrome 裏逐幀錄製，最後用 FFmpeg 合成 MP4。
整個過程完全確定性，同一個 HTML 永遠產出同一個視頻，沒有隨機性。
這點對自動化場景特別重要，不怕結果飄。
原生為 AI Agent 設計。
這是它和其他視頻框架最大的區別。
HyperFrames 內置了 15 個 Skill，裝上之後你可以直接跟 Agent 說"幫我使用 hyperframes skill，做一個逛逛 GitHub 的公眾號介紹視頻"。
Agent 就會自動寫 HTML、加動畫、渲染成片。
效果怎麼說呢，mmmmm 自己體會一下吧，可能是我的使用方式不對？
不需要 React，不需要打包。
Remotion 也是做代碼化視頻的，但它要求你用 React 寫組件，還得配打包工具。
HyperFrames 選了純 HTML 路線，一個 index.html 文件瀏覽器直接打開就能預覽，Agent 寫起來也更自然，畢竟 HTML 是所有 Agent 都會寫的東西。
動畫引擎隨便選。
GSAP、CSS Animations、Lottie、Three.js、Anime.js、Web Animations API 都能用，通過適配器模式接入。
你熟悉哪個就用哪個，不用新學一套。
內置 Catalog 組件庫。
轉場效果、數據圖表、字幕疊層、社交平台樣式這些常用元素都有現成組件，一行命令加到項目裏。
還有 Shader 轉場，WebGL 級別的視覺效果。
安裝也很簡單，直接給你的 Agent 發送：幫我安裝 hyperframes 這個 skill
裝完直接說你想做什麼視頻就行。
開源地址：https://github.com/heygen-com/hyperframes02
HTML 版剪映，21 套模板
Open Design 團隊最近也開源了一個 HTML 視頻項目，叫 html-video。
Open Design 就是做 Claude Design 開源平替的那個團隊，那個項目在 GitHub 上已經 6 萬多 Star 了。
html-video 是他們同一個團隊做的，定位是 HTML 版的剪映。
開源地址：https://github.com/nexu-io/html-video和 HyperFrames 不一樣的地方在於，HyperFrames 是渲染引擎，你從零開始寫 HTML。
html-video 在 HyperFrames 之上又包了一層，重點做了三件事。
21 套精心設計的模板。
涵蓋數據可視化、產品宣傳、動態排版、電影片頭、Logo 片尾各種場景。
每套模板都有 license 清理，可以直接商用，不用擔心版權問題。
連結轉視頻。
你直接丟一篇文章連結或者 GitHub 倉庫地址，html-video 會自動抓取內容，用 AI 分析文章結構，拆成多個場景，套上模板渲染成視頻。
支持微信公眾號文章，對國內用戶很友好。
比如你直接貼一個 GitHub 連結生成一個介紹視頻。
多 Agent 後端。
支持 Open Design、Claude Code、Codex、Hermes等 Agent，你在 Studio 界面裏可以隨時切換。
啥都沒裝的話，配個 Anthropic API Key 也能直接用。
它還有一個本地 Studio 界面，瀏覽器打開就能選模板、編輯每幀文字、加背景音樂和配音，最後導出 MP4。
整個流程在本地跑，不用上傳到雲端。
我有試了一個，讓他生成蘋果公司宣傳視頻。效果確實比上面那個開源項目好一些。
啓動很快：
pnpm install
pnpm -r build
node packages/cli/dist/bin.js studio打開 http://127.0.0.1:3071 就能用了。
html-video 的架構設計挺有意思，它把渲染引擎做成可插拔的適配器。
現在默認用 HyperFrames 引擎，但 Remotion、Motion Canvas 這些引擎也在路線圖上。
也就是說以後換引擎不用重寫模板，底層引擎換了，上面的模板和 Agent 工作流都能直接複用。
03
點擊下方卡片，關注逛逛 GitHub
這個公眾號歷史發佈過很多有趣的開源項目，如果你懶得翻文章一個個找，你直接關注微信公眾號：逛逛 GitHub ，後台對話聊天就行了：