試用 HyperFrames 製作影片
本篇記錄實際測試 HyperFrames 搭配 Claude Code（cc）製作短影片的完整過程。
初始化專案
npx hyperframes init hypervideo
cd hypervideo
啟動時選擇 BLANK 範本即可。
安裝完成後先暫時關閉，因為還需要替 Claude Code 加入對應的 skills。
添加 Skills
npx skills add heygen-com/hyperframes
在這裏我選擇了這些組件
- gsap
- hyperframes
- hyperframes-cli
- hyperframes-media
- tailwind安裝完成後發現 skills 被放置在 .agent 目錄下，與原本預期的位置不同。回頭查看 CLAUDE.md，說明中標示支援以 command 形式呼叫，這部分行為略顯矛盾，值得留意。
回頭查看 CLAUDE.md 卻又説是支持 command 的形式，有點微妙
在 Claude Code 下 prompt
Using /hyperframes, create a 10-second product intro
with a fade-in title over a dark background.執行後發現 cc 找不到 /hyperframes 指令
cc試圖安裝 hyperframes
於是先停下來輸入指令查看，發現確實沒有
為了避免 token 消耗暴增，改以自然語言方式重新下指令：
用 HyperFrames 幫我建立一個 10 秒的 intro 影片，白字黑底，fade-in 標題
生成結果可見於內嵌的 YouTube 影片。這個版本後來在 VS Code cc 中加入了類似《駭客任務》的編碼視覺效果，主要是為了測試 VS cc 與 cc 兩者對 HyperFrames AI skills 的支援程度。
這個影片我在vs進行過修改，加入了類似駭客任務的編碼效果，主要爲了測試 vs cc 跟 cc 支持度，畢竟宣稱上來説 hyperframes 說的是對 AI skills 支持的能力。
可以看到整體的呈現效果如下
視覺結構（從後到前，共 4 層）
| z-index | 元素 | 描述 |
|---|---|---|
| 1 | #bg-glow |
背景中央放射狀光暈（白色，半透明） |
| 2 | #ghost-text |
裝飾性大字「PRODUCT」（520px，幾乎不可見，4% 透明度） |
| 3 | .scene-content |
主要內容：標題 + 分隔線 + 副標題 |
| 10 | #fade-overlay |
最終淡出至黑色的遮罩層 |
動畫時間軸（10 秒總長）
t=0.0s 背景光暈淡入（2.5s sine.out）
t=0.2s 鬼影大字從下緩慢向上漂移（9.5s，裝飾用）
t=0.5s 主標題「YOUR PRODUCT」從下方升起淡入（1.4s expo.out）
t=1.7s 中間分隔線從中心向兩側展開（0.65s power3.out）
t=2.2s 副標題字距收縮+淡入（1.0s power2.out）
t=3.5s 背景光暈開始「呼吸」循環（yoyo×2，脈動感）
t=8.5s 整體淡出至黑（1.5s power2.in）接著我讓他加入效果并修改時長
在 vs cc 中某些功能不是那麽要求全項目理解能力的話可以將 mod 修改成比較節省的方式，這樣cc用起來不會那麽容易爆掉
從上周開始總覺得個人訂閲的 token 消耗似乎變快了，用了2天就達到了 30%，開始將部分工作轉移到 vs 或是 desktop 上，畢竟一直使用 cc 的話必須額外生成文檔跟建立説明，這部分的消耗說大不大說小不小，再者某些工作其實並不需要 plan mod 或是 median effort。
最終的效果就是上面看到的影片。
我們也可以像 remotion 一樣生成出影片檔案
npm run render
