HyperFrames
HyperFrames 是一個影片合成框架，讓你能透過單純的 HTML/CSS/JS 打造電影級合成，即時預覽並渲染成 MP4 或 GIF。它類似 Remotion，但更輕量且原生的瀏覽器環境即可執行。
何時使用此技能
當使用者想要以下任何一項時啟用：
- 建立影片、動畫或動態圖形
- 製作標題卡、下方字卡、片頭、片尾或場景轉場
- 生成動畫解說、展示影片或產品導覽
- 為合成加入字幕、隱藏式字幕或旁白
- 將網站、部落格文章、播客或演講轉換為影片
- 製作音訊反應視覺
- 渲染動畫 Logo 或社群媒體短影片
如果使用者提到「影片」、「動畫」、「動態」、「渲染」、「MP4」，或描述任何與時間相關的內容——此技能就是正確選擇。
CLI 指令
所有操作都透過 npx hyperframes 進行：
| 指令 | 用途 |
|---|---|
npx hyperframes init | 建立新的合成專案（Tailwind、空白或模板） |
npx hyperframes preview | 在瀏覽器中即時預覽，支援熱更新 |
npx hyperframes lint | 根據規範驗證合成設定 |
npx hyperframes inspect | 輸出解析後的場景圖供除錯使用 |
npx hyperframes render | 產生 MP4 / WebM / GIF |
npx hyperframes doctor | 診斷環境問題（瀏覽器、ffmpeg） |
npx hyperframes add <block> | 安裝註冊區塊（字幕、轉場等） |
每個新專案都從使用者在所選工作目錄下執行 npx hyperframes init 開始。在執行前請先與使用者確認要建立專案的目錄位置。
核心概念
HyperFrames 合成是一個單一的 HTML 檔案（或小型專案），其中宣告：
- 持續時間 — 合成執行的總長度（
data-duration或設定檔） - 圖層 — 隨著時間出現/消失的堆疊元素
- 時間軸 — 每個圖層的
data-start、data-end、緩動函數與關鍵影格 - 動畫庫 — 可選用任何動畫庫：GSAP、Anime.js、Web Animations API、CSS 動畫、Lottie、Three.js。HyperFrames 不干涉動畫實作，只負責協調時間軸。
渲染器會以確定性方式播放合成 — 相同輸入每次都產生相同輸出。這使得它對差異比對與 AI 輔助開發非常友善。
工作流程
- 建立專案 — 執行
npx hyperframes init並選擇模板 - 合成編輯 — 編輯 HTML，加入圖層、設定時間軸、選擇動畫庫。保持合成範圍明確：每個場景一個檔案即可。
- 預覽 — 使用
npx hyperframes preview進行熱更新預覽 - 檢查與除錯 — 及早發現時間軸重疊與缺失素材
- 渲染 — 執行
npx hyperframes render --format mp4（或gif、webm）
配套技能
當使用者的需求符合特定工作流程時，可優先使用對應技能 — Claude Code 會在相關情境自動載入：
- website-to-hyperframes — 將 URL 轉為影片（螢幕截圖 → 場景）
- remotion-to-hyperframes — 遷移現有的 Remotion 專案
- hyperframes-media — TTS 旁白（Kokoro）、Whisper 轉錄、去背透明疊層
- hyperframes-registry — 透過
npx hyperframes add安裝社群區塊（下方字卡、視覺特效、轉場、文字效果） - 動畫庫技能：
gsap、animejs、waapi、css-animations、lottie、three、tailwind— 每個動畫庫在 HyperFrames 中的使用模式
讓開發更輕鬆的預設值
- 偏好使用 Tailwind 模板（
npx hyperframes init --tailwind）— 多數使用者需要快速建立有樣式的合成 - 時間軸動畫預設使用 GSAP；簡單元素動畫使用 WAAPI；設計師提供的 JSON 動畫使用 Lottie
- 除非使用者另有要求，否則渲染解析度設為 1920x1080 @ 30fps。TikTok / Reels / Shorts 使用垂直 1080x1920
- 在
render之前務必執行npx hyperframes lint— 可捕捉預覽時無法察覺的 90% 錯誤
最小範例
<!doctype html>
<html data-duration="6000">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://cdn.tailwindcss.com" />
</head>
<body class="bg-black text-white font-sans">
<div class="absolute inset-0 grid place-items-center"
data-start="0" data-end="3000">
<h1 class="text-7xl font-bold tracking-tight">Crest</h1>
</div>
<div class="absolute inset-0 grid place-items-center"
data-start="3000" data-end="6000">
<p class="text-3xl text-emerald-400">Built for Claude Code</p>
</div>
</body>
</html>
這是一個六秒、兩個場景的標題序列。使用 npx hyperframes preview 預覽，npx hyperframes render 輸出 MP4。
初步詢問使用者
在建立專案前，先取得以下資訊：
- 影片用途？（標題卡、展示、解說、社群短片）
- 長度？（社群短片低於 15 秒，產品展示 30-60 秒，解說影片 1-3 分鐘）
- 長寬比？（16:9 桌面、9:16 社群、1:1 動態牆）
- 有無旁白？（如果有，使用
hyperframes-media產生 TTS） - 品牌素材？（Logo、顏色、字型 — 如果已有品牌指南可直接提取）
取得以上資訊後，即可建立專案並開始編輯合成。