hyperframes-read-first

HyperFrames CLI dev loop — `npx hyperframes` for scaffolding (init), validation (lint, inspect), preview, render, and environment troubleshooting (doctor, browser, info, upgrade). Use when running any of these commands or troubleshooting the HyperFrames build/render environment. For asset preprocessing commands (`tts`, `transcribe`, `remove-background`), invoke the `hyperframes-media` skill instead.

HyperFrames 的所有動畫知識——原子運動規則、多階段場景藍圖、場景轉場、更廣泛的動態設計技術，以及七個運行時適配器（預設 GSAP，加上 Lottie、Three.js、Anime.js、CSS 關鍵影格、Web Animations API、TypeGPU）。適用於任何動態或動畫任務：選取 2-4 條規則並組合，或載入藍圖，或查詢特定運行時 API（例如 GSAP 緩動函數 / Lottie 播放器 / Three.js 混合器）。HyperFrames 原生功能：單一暫停時間軸、安全搜尋、...

HyperFrames HTML 組合合約。用於組合結構、資料屬性、片段、軌道、子組合、變數、媒體播放、確定性渲染規則，以及最小可渲染專案的驗證。

HyperFrames 組合的資產預處理 — 多供應商 TTS（HeyGen / ElevenLabs / Kokoro 本地）、多供應商 BGM（Google Lyria / 本地 MusicGen）、Whisper 轉錄、背景移除及字幕編寫。用於 npx hyperframes tts、bgm、transcribe、remove-background、語音/供應商選擇、音樂情緒提示、字幕/副標題/歌詞/卡拉OK/逐字樣式設定。

安裝並將註冊區塊與元件接入 HyperFrames 組合中。適用於執行 hyperframes add、安裝區塊或元件、將已安裝項目接入 index.html，或處理 hyperframes.json 時使用。涵蓋 add 指令、安裝位置、區塊子組合接入、元件片段合併、註冊表探索，以及編寫新區塊或元件以向上游貢獻（構想 → 骨架 → 驗證 → PR）。

作為自訂 HyperFrames HTML 影片合成編寫的備用方案，適用於無專門工作流程可匹配的情況。涵蓋較長或多場景作品、品牌/宣傳短片、蒙太奇、標題卡、長篇動態海報、靜態循環，以及任意長度或格式的自由形式合成。不適用於行銷產品宣傳（product-launch-video）、一般網站轉影片擷取（website-to-video）、主題解說（faceless-explainer）、GitHub PR 影片（pr-to-video）、為現有素材加字幕等用途。

當使用者需要一段簡短、以設計為主的動態圖像，且動態本身即為訊息時使用：動態字體排版、數字或統計數據累計、圖表/數據視覺化呈現、標誌片頭、品牌組合、下方標題、提示框、社群疊加層、動態標題/推文/新聞項目、動態海報，或快速捕捉的頁面重點。通常長度在10秒以內，最長約30秒，無敘事弧線、旁白或真人拍攝主體。可輸出為MP4或透明疊加層。不適用於較長、多場景、有旁白或品牌展示影片等類型。

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.