技能概述
HyperFrames 將 HTML 作為視頻嘅 source of truth。一個 composition 就係一個帶 data-* 屬性嘅 HTML 文件，用 GSAP timeline 做動畫，CSS 做外觀。框架處理 clip 可見性、媒體播放同時間軸同步。
支持：視頻合成、動畫、標題卡、疊加層、字幕、配音、音頻反應視覺效果（beat sync / glow / pulse）、場景轉換（crossfades / wipes / reveals / shader transitions）。
觸發關鍵字
- hyperframes、html video、video composition、interactive video
- captions、tts video、kinetic typography
- html in canvas、drawElementImage、html shader
- vfx-iphone-device、vfx-liquid-glass、vfx-portal
什麼時候用
- 創建 HTML 視頻內容
- 添加字幕 / 配音到視頻
- 音頻反應動畫（music visualizer）
- 動態排版（kinetic typography）
- 場景轉換特效
- 3D 設備 mockup / shader 效果
使用方法
自然語言觸發
帮我做一个 5 秒的产品 reveal 视频
整一個帶字幕嘅 HTML 視頻
做一個 audio-reactive 動畫
工作流程（OD 快速路徑）
- 初始化 composition：
npx hyperframes init "$COMP" --example blank - 編輯 index.html — 改
data-duration、換調色板、加 clip divs、加 GSAP tweens - 派發渲染：通過 OD daemon 渲染
.mp4 - 輪詢完成：
media wait <taskId>直到渲染完成
布局優先於動畫
黃金法則：先寫靜態 HTML+CSS 到最可見嘅狀態，再加動畫。
- 識別每個場景嘅 hero frame
- 寫靜態 CSS（
.scene-content用 flex + padding 定位） - 用
gsap.from()做 entrance - 用
gsap.to()做 exit（僅最後場景）
輸出格式
渲染後嘅 .mp4 文件，保存到項目文件夾。Composition 源文件存於隱藏緩存目錄（.hyperframes-cache/），唔會污染用戶文件視圖。
硬規則
- 無
Math.random()/Date.now()— 用 seeded PRNG - 只動畫視覺屬性（opacity / x / y / scale / rotation）
- 無
repeat: -1— 用有限重複 - 同步構建 timeline — 唔好用 async/await
- 視頻 = muted + playsinline，音頻用獨立
<audio> - 每個場景都要 entrance animation，transition 前唔好 exit
- 最後場景先可以有 exit
場景轉換
多場景 composition 必須：
- 場景之間永遠用過渡（無跳剪）
- 每個場景所有元素都做 entrance animation
- transition 前唔好 exit animation（transition 就係 exit）
- 只有最後場景可以 fade out
實際例子
例子 1：產品展示視頻
用戶：「做一個 5 秒嘅產品 reveal 視頻，cream 背景 + 柔和側光 + 慢推鏡」
生成：
- 3 秒 cream 背景 + product placeholder
- gsap.from 做 slow push-in effect
- 淡入 product name text
- 渲染為
product-reveal-5s.mp4
例子 2：帶字幕嘅教程視頻
用戶：「幫我整一個帶字幕嘅教程視頻，旁白用 TTS」
- 用
hyperframes tts生成旁白 - 用
hyperframes transcribe生成字幕 - 合成到 composition
- 渲染輸出