HyperFrames CLI
一切操作都透過 npx hyperframes 執行。需要 Node.js >= 22 和 FFmpeg。
工作流程
- 搭建專案 —
npx hyperframes init my-video - 編寫 — 撰寫 HTML composition（參見
hyperframes技能） - 檢查 —
npx hyperframes lint - 預覽 —
npx hyperframes preview - 渲染 —
npx hyperframes render
在預覽前先檢查 — 可捕捉遺漏的 data-composition-id、重疊的軌道、未註冊的時間軸。
搭建專案
npx hyperframes init my-video # 互動式精靈
npx hyperframes init my-video --example warm-grain # 選擇範例
npx hyperframes init my-video --video clip.mp4 # 搭配影片檔案
npx hyperframes init my-video --audio track.mp3 # 搭配音訊檔案
npx hyperframes init my-video --non-interactive # 跳過提示（CI/智能體）
模板：blank、warm-grain、play-mode、swiss-grid、vignelli、decision-tree、kinetic-type、product-promo、nyt-graph。
init 會建立正確的檔案結構、複製媒體、使用 Whisper 轉錄音訊，並安裝 AI 編寫技能。請優先使用它，而非手動建立檔案。
檢查
npx hyperframes lint # 目前目錄
npx hyperframes lint ./my-project # 特定專案
npx hyperframes lint --verbose # 顯示資訊層級結果
npx hyperframes lint --json # 機器可讀格式
檢查 index.html 和 compositions/ 中的所有檔案。回報錯誤（必須修復）、警告（建議修復）以及資訊（使用 --verbose）。
預覽
npx hyperframes preview # 提供目前目錄服務
npx hyperframes preview --port 4567 # 自訂埠號（預設 3002）
在檔案變更時熱重載。會自動在瀏覽器中開啟工作室。
渲染
npx hyperframes render # 標準 MP4
npx hyperframes render --output final.mp4 # 指定輸出檔名
npx hyperframes render --quality draft # 快速迭代
npx hyperframes render --fps 60 --quality high # 最終成品
npx hyperframes render --format webm # 透明 WebM
npx hyperframes render --docker # 位元組完全一致
| 標記 | 選項 | 預設值 | 備註 |
|---|---|---|---|
--output | 路徑 | renders/name_timestamp.mp4 | 輸出路徑 |
--fps | 24, 30, 60 | 30 | 60fps 會使渲染時間加倍 |
--quality | draft, standard, high | standard | draft 用於迭代 |
--format | mp4, webm | mp4 | WebM 支援透明度 |
--workers | 1-8 或 auto | auto | 每個 worker 啟動一個 Chrome |
--docker | 旗標 | off | 可重複的輸出 |
--gpu | 旗標 | off | GPU 加速編碼 |
--strict | 旗標 | off | 遇到錯誤即失敗 |
--strict-all | 旗標 | off | 錯誤和警告都視為失敗 |
品質建議： 迭代時使用 draft，審查時使用 standard，最終交付使用 high。
轉錄
npx hyperframes transcribe audio.mp3
npx hyperframes transcribe video.mp4 --model medium.en --language en
npx hyperframes transcribe subtitles.srt # 匯入現有字幕
npx hyperframes transcribe subtitles.vtt
npx hyperframes transcribe openai-response.json
文字轉語音
npx hyperframes tts "此處文字" --voice af_nova --output narration.wav
npx hyperframes tts script.txt --voice bf_emma
npx hyperframes tts --list # 顯示所有語音
疑難排解
npx hyperframes doctor # 檢查環境（Chrome、FFmpeg、Node、記憶體）
npx hyperframes browser # 管理隨附的 Chrome
npx hyperframes info # 版本和環境詳細資訊
npx hyperframes upgrade # 檢查更新
如果渲染失敗，請先執行 doctor。常見問題：缺少 FFmpeg、缺少 Chrome、記憶體不足。
其他
npx hyperframes compositions # 列出專案中的 compositions
npx hyperframes docs # 開啟文件
npx hyperframes benchmark . # 基準測試渲染效能