HyperFrames：把 HTML、CSS、JS 直接變成影片

最近在幫新產品做 Demo walkthrough 影片時，為了解決一個按鈕元件的顏色和間距微調，我不得不在 Premiere 或 After Effects 的 timeline 上拉半天，還要反覆導出、重新對齊，整個下午的時間就這樣沒了。如果做影片能像寫網頁一樣，改一行 CSS 就能搞定，那該有多好？

這正是 HyperFrames 最吸引我的地方：它把製作影片的邏輯，直接搬到了前端專案的維度。你寫 HTML 排版面、用 CSS 跟 JavaScript 處理動畫，最後直接 render 成影片檔。

實際上能做的事

對前端工程師來說，這套工具最實用的點在於影片變成了可以被版本控制（Git）、可以被重用的程式碼。這代表你可以讓 Cursor 或 Claude Code 等 AI Agent 幫你改內容、補畫面、調動畫節奏，不再每次都需要打開重磅軟體重新拉 timeline。

它主要支援以下功能：

• 用 HTML 組畫面、用 CSS / JS 控動畫節奏。
• 把圖片、影片、音訊、字幕、覆蓋層放進同一個 composition。
• 先在瀏覽器 preview 看效果，沒問題再輸出成 MP4。
• 讓 AI Agent 透過對話直接幫你寫或改影片。

實際跑一次開發流程

要跑起一個 HyperFrames 專案非常直覺，只要在你的 terminal 下指令：

npx hyperframes init my-video

這行指令會幫你快速建立一個全新的 HyperFrames 專案目錄，並產生預設的 HTML、CSS 和 JS 範本檔。接著你只要進去編輯 these 網頁檔案，就能開始組裝影片了。

如果你是用 AI Agent 幫忙，又更簡單：你先丟一句話，接著就一直補「把標題放大」、「換深色背景」、「加背景影片和背景音樂」、「結尾加 fade out」這種微調，它就幫你改了。

因為它是 HTML-native 的 composition，所以只要在瀏覽器重新整理（F5）就能 preview，開發節奏非常直接。動畫部分可以搭配 GSAP、CSS animations、Lottie、Three.js，也有一些現成的 blocks 可以直接使用。

技術取捨：跟 Remotion 比一下

說到用程式碼做影片，大家通常會先聯想到 Remotion。我們可以用以下表格快速比較這兩者的技術取捨：

如果你的專案需要大量模板、資料驅動的動態渲染（例如幫 1000 位使用者客製化生成年度報告影片），Remotion 依然是比較穩健的選擇；但如果你在意的是快速起步、想要寫腳本自動化產出，並且讓 AI Agent 可以零門檻地讀懂並修改畫面，那麼 HyperFrames 的 Vanilla 路線會輕巧許多。

誰會需要這個

• 網頁開發者：想用現成的 HTML/CSS 知識快速做出動態產品 Demo。
• 自動化後製需求：需要根據資料庫變動，打 API 自動生成不同數據的圖表影片。
• AI 輔助工作流：想要利用 Agent 幫忙剪片、微調轉場與動畫節奏。

連結

• GitHub
• 官方網站
• Help Center