HyperFrames CLI
所有操作皆透過 npx hyperframes 執行。需 Node.js >= 22 及 FFmpeg。
工作流程
- 建立專案架構 —
npx hyperframes init my-video - 撰寫 — 編輯 HTML 合成（詳見
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/名稱_時間戳.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 | 旗標 | 關閉 | 可重現輸出 |
--gpu | 旗標 | 關閉 | GPU 加速編碼 |
--strict | 旗標 | 關閉 | 程式碼檢查錯誤時停止 |
--strict-all | 旗標 | 關閉 | 程式碼檢查錯誤及警告時停止 |
品質建議： 迭代時使用 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 腳本.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 # 列出專案中的合成
npx hyperframes docs # 開啟文件
npx hyperframes benchmark . # 基準測試渲染效能