概述
此技能組合產品發佈影片——主鏡頭、功能說明、時間軸——作為 HyperFrames 的組成。當新版本需要一個簡潔、可品牌化的公告片段時使用。它會根據您提供的產品素材渲染出最終的 MP4。
HyperFrames — 產品發佈影片
透過撰寫 HTML 組合來創建產品發佈影片，HyperFrames 會將其渲染成精確的 MP4。代理原生的影片管線：LLM 撰寫 HTML（它們的母語），HyperFrames 透過無頭 Chrome + FFmpeg 渲染出幀級精確的影片。
使用時機
- 用戶想要從 URL、簡報或腳本產生產品發佈影片
- 用戶想要以產品自身畫面進行網站導覽/展示
- 用戶想要一個帶有動態字幕和品牌的社群短片（TikTok/Reels/Shorts）
- 用戶想要一個帶有動態覆蓋層和音樂的行銷/宣傳影片
- 用戶說「幫我做一支影片」並提供產品 URL 或描述
不使用時機
- 用戶想要真人/用戶生成內容/攝影棚內容（需要攝影機，而非 HTML）
- 用戶想要直播/直播帶貨（需要 RTMP 推流）
- 用戶想要人物訪談（請使用
hyperframes-embedded-captions或hyperframes-talking-head-recut） - 用戶想要一個無產品/URL 的純解說影片（請使用
hyperframes-faceless-explainer） - 用戶想要簡報/投影片（請使用
hyperframes-slideshow）
工作流程
0 · 初始化專案
npx hyperframes init my-launch-video
cd my-launch-video
這會建立專案框架，包含 index.html、package.json 和已配置好的 HyperFrames CLI。
1 · 規劃影片
- 輸入： 產品 URL、簡報或腳本
- 輸出： 3-6 個場景的故事板，附帶時間設定（總時長最佳 30-90 秒）
- 預算： 標題 ≤2 秒，片尾 ≤3 秒，中間場景約 8-12 秒
- 選擇設計語言： 瀏覽
hyperframes.heygen.com/design查看 frame.md 範本
2 · 撰寫組合 HTML
組合規範：
<!doctype html>
<html lang="en">
<body>
<div
id="main"
data-composition-id="intro"
data-start="0"
data-duration="15"
data-width="1080"
data-height="1920"
data-fps="30"
>
<div
class="clip"
data-start="0"
data-duration="5"
data-track-index="0"
>
<!-- 場景內容 -->
</div>
</div>
</body>
</html>
關鍵屬性：
data-composition-id：組合的唯一 IDdata-start/data-duration：以秒為單位的時間設定data-width/data-height：視口尺寸（9:16 為 1080×1920）data-fps：幀率（標準 30）class="clip"：標記時間軸元素data-track-index：圖層順序（數值越大越上層）
3 · 設計可搜尋動畫
使用 GSAP（建議）、CSS 關鍵幀或 WAAPI。所有動畫必須是可搜尋的（確定性——相同時間點總是相同幀，每次渲染都一致）。
GSAP 模式（建議）：
const tl = gsap.timeline({ paused: true });
tl.to("#title", { opacity: 1, y: 0, duration: 0.8, ease: "power4.out" }, 0.5);
tl.to("#image", { scale: 1, opacity: 1, duration: 1.2, ease: "power3.out" }, 1.0);
window.__timelines = { main: tl };
CSS 關鍵幀模式：
@keyframes fadeInUp {
from { transform: translateY(40px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.animate-in {
animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
4 · 加入媒體
- 圖片： 下載到
public/目錄，透過staticFile()或相對路徑引用 - 影片背景： 放在
assets/中，透過data-loop循環播放 - 音訊/BGM： 透過
<audio data-start="0" data-duration="15" src="./bgm.mp3">加入 - 旁白： 透過 TTS 生成，將字幕對齊到字詞時間戳
5 · 檢查和語法審查
npx hyperframes check # 驗證組合規範
npx hyperframes lint # 檢查常見錯誤
在繼續之前修正所有錯誤。警告可以接受，但應進行審查。
6 · 預覽
npx hyperframes preview # 開啟 Hyperframes Studio 並支援 HMR
透過在原始組合頁面上執行 __player.seek(time) 抽查 3-4 個時間點。驗證：
- 動畫在正確時間觸發
- 剪接處無白閃（背景需設為不透明）
- 字幕可見且可讀
- 音量水平平衡
7 · 渲染
npx hyperframes render --output launch-video.mp4
驗證輸出：
ffmpeg -ss 3 -i launch-video.mp4 -frames:v 1 frame-3s.png # 檢查字幕
ffmpeg -ss 15 -i launch-video.mp4 -frames:v 1 frame-15s.png # 檢查場景
反合理化表格
| 合理化 | 現實 |
|---|---|
| 「我直接用影片編輯器就好了」 | GUI 編輯器不是代理原生工具；HTML 是 LLM 最擅長的語言 |
| 「跳過檢查步驟沒關係」 | 檢查能找出破壞渲染的組合規範錯誤 |
| 「我用 Remotion 就好」 | Remotion 需要 React 思維；對代理來說 HTML 更簡單 |
| 「加入空轉動畫來填滿時間」 | 禁止空轉晃動——每個階段都必須有效用（參見 hyperframes-cut-the-curve） |
| 「內容置中 42% 以預留字幕空間」 | 字幕是覆蓋層——內容應以真正的中心置中（y = H/2） |
| 「在場景間加入淡入淡出」 | 淡入淡出沒有載體——請使用 cut-the-curve 作為預設邊界 |
| 「不分割場景，直接寫一個大的 HTML 檔」 | 場景是組合的基本單位——每個場景都有自己的 clip 包裝 |
| 「跳過預覽直接渲染」 | 預覽能捕捉浪費渲染時間的計時錯誤 |
程式碼範例
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0a0a; }
#main {
position: relative;
width: 1080px;
height: 1920px;
overflow: hidden;
}
.scene {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.5s ease;
}
.scene.active { opacity: 1; }
.hook-bg {
background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 80px;
text-align: center;
color: white;
font-family: system-ui, sans-serif;
}
.hook-text {
font-size: 72px;
font-weight: 800;
line-height: 1.1;
transform: translateY(40px);
opacity: 0;
}
.animate-in {
animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes fadeInUp {
from { transform: translateY(40px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
</style>
</head>
<body>
<div
id="main"
data-composition-id="product-ad"
data-start="0"
data-duration="15"
data-width="1080"
data-height="1920"
data-fps="30"
>
<div class="scene hook-bg" data-start="0" data-duration="5" data-track-index="0">
<h1 class="hook-text animate-in" data-start="0.5" data-duration="4">
Product Name
</h1>
</div>
</div>
<script>
// 透過 IntersectionObserver 或手動計時啟動場景
const scenes = document.querySelectorAll('.scene');
scenes.forEach(scene => {
const start = parseFloat(scene.dataset.start);
const duration = parseFloat(scene.dataset.duration);
setTimeout(() => scene.classList.add('active'), start * 1000);
setTimeout(() => scene.classList.remove('active'), (start + duration) * 1000);
});
</script>
</body>
</html>
驗證清單
- 組合通過
npx hyperframes check，0 個錯誤 - 所有場景都設有
data-start、data-duration、data-track-index - 動畫是可搜尋的（確定性，不依賴系統時鐘）
- 預覽在 3 個以上抽查的時間點顯示正確的時間設定
- 渲染的 MP4 沒有白閃、凍結畫面或缺少字幕
- 音量水平平衡（如有需要已套用旁白裁切）
- 輸出解析度符合目標（9:16 為 1080×1920，16:9 為 1920×1080）