動態 HyperFrames：Bau-Modul
連結 motion-director（流程、風格、審查）與 HeyGen 官方 HyperFrames 技能（技術）。流程來自 motion-director。 HyperFrames 工作流程（/hyperframes、product-launch-video、motion-graphics……）自帶簡報循環，導演流程會取代它們。但其技術規則完全適用。
設定（每個專案）
claude plugin marketplace add heygen-com/hyperframes # 官方技能（一次性）
claude plugin install hyperframes@hyperframes # 或不用外掛：npx hyperframes skills update
cd projects/<name>
export HYPERFRAMES_NO_TELEMETRY=1
npx -y hyperframes@<version> init hf --non-interactive # 鎖定版本，專案中間絕不使用 @latest
何時閱讀哪個 HyperFrames 技能
| 任務 | 技能 |
|---|---|
組合契約：data-*、Clip、Track、子組合、確定性 | hyperframes-core（在撰寫第一個 HTML 之前） |
動態、GSAP、轉場；Three.js（adapters/three.md）；動態模糊 | hyperframes-animation |
| 攝影機、縮放、推近、匹配/甩動、遮罩、SVG 繪製 | hyperframes-keyframes |
| 指令、渲染選項、疑難排解 | hyperframes-cli |
| 尋找建構模組 | hyperframes-registry |
音訊不在 HyperFrames 中建構：混音來自 motion-sound，並在最後階段加入。
優先使用自己的元件
每個影片使用自己的設計，自行建構建構模組（hf/components/<name>.html）。目錄
（npx hyperframes catalog --query "<Bewegung, 英文>"）是寶庫：閱讀原始碼、理解技術、轉換成自己的設計。
絕不 1：1 複製目錄外觀，那正是每個 AI 影片都具有的外觀。
檢查
npx hyperframes lint # 快速，每次較大步驟後執行
npx hyperframes check # 執行時期、版面/溢出、對比度（WCAG）
npx hyperframes snapshot --at 1.2,4.0,9.5 --describe false # 單張畫面；不加 --describe false 會呼叫付費圖片模型
npx hyperframes render --quality draft --output ../renders/draft.mp4 # 動畫腳本，快速
之後再執行 motion-director/references/rules.md 中的檢查。
渲染 + 母帶處理（對抗色帶）
一般 MP4 = 8 位元：漸層和光暈會出現階梯。因此使用無損渲染，並以 10 位元加上細微顆粒進行母帶處理：
npx hyperframes render --format mov --quality delivery --output ../renders/master.mov
bash scripts/master_10bit.sh ../renders/master.mov ../renders/film.mp4 0.35 ../renders/mix.wav
該腳本修正色彩矩陣（無標籤的 BT.601 → BT.709），對亮度施加細微的 10 位元顆粒，加入音軌，並在畫面透明時發出警告。注意：10 位元 H.264 無法在 QuickTime 中播放（VLC、mpv、ffplay、瀏覽器均可）。若要傳送，請額外製作一份 8 位元副本（-pix_fmt yuv420p -crf 18）。
記憶體
含 3D、玻璃或大型圖層的渲染需要大量 RAM。因此：一次只進行一個渲染，背景無渲染迴圈，先渲染單張畫面並觀察記憶體，每個圖層每邊不超過 4096 px。
動態模糊
| 方式 | 時機 | 限制 |
|---|---|---|
Registry 建構模組 motion-blur（中間時間、快門角度） | 快速單一元素 | 僅限 transform；大型容器上成本高 |
| 引擎動態模糊 | 整個畫面 | 僅能透過 Producer API 使用，不能與著色器轉場搭配 |
絕不用於閱讀內容（文字/頁面），僅用於視線不需閱讀之處。
常見陷阱（實際測量或來自 Issue，截至 2026 年 10 月）
- 背景置於
<body>而非根元素[data-composition-id]：在 MOV 中變透明，在 MP4 中變黑色。 z-index: -1無法渲染。在運行時載入前由腳本建立的動畫可能偏移一個影格；Shadow Root / 偽元素中的 CSS 動畫亦然。- 靜默降級為慢速螢幕截圖擷取：請閱讀渲染摘要。
Math.random/Date.now會被 lint 封鎖：隨機性必須總是播種。禁止無限repeat。- 大型 CSS 模糊會嚴重拖慢效能。資產重建後請以新檔名存放（快取依賴路徑）。