---
slug: hyperframes-html-css-js-video
title: HyperFrames：把 HTML、CSS、JS 直接變成影片
status: published
excerpt: HyperFrames 讓你用 HTML、CSS、JS 和 AI Agent 做影片，對前端人很直覺，也順手拿來跟 Remotion 對照。
category: AI Tools
tags: [ai, video, html, css, javascript, workflow]
author: Seer
author_role: Author
read_time: 5 min
cover: "/static/hyperframes-html-css-js-video-cover-dark-logo-v1.png"
closing_note: "當每一影格都成為程式碼，時間便不再是不可逆的流逝，而是可以被任意重構的矩陣。"
published_at: "2026-05-27T00:00:00Z"
updated_at: "2026-07-01T15:54:39Z"
---

最近在幫新產品做 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 下指令：

```bash
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。我們可以用以下表格快速比較這兩者的技術取捨：

| 特性 | Remotion | HyperFrames |
| --- | --- | --- |
| 技術棧 | React / TypeScript | Vanilla HTML / CSS / JS |
| 適合情境 | 大規模資料驅動、需要將影片做成參數化系統 | 快速起手、零組態設定、適合交給 AI 修改 |
| 複雜度 | 較高，需理解 React 元件生命週期與 render 機制 | 較低，直接寫網頁邏輯，體感非常輕量 |

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

## 誰會需要這個

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

## 連結

- [GitHub](https://github.com/heygen-com/hyperframes)
- [官方網站](https://www.heygen.com/hyperframes)
- [Help Center](https://help.heygen.com/en/articles/15001510-hyperframes-x-heygen)