HyperFrames 核心
HyperFrames 從 HTML 渲染影片。組合是一個 HTML 檔案，其 DOM 透過 data-* 屬性宣告時間，動畫運行時是可尋址的，並且媒體播放由框架擁有。
此技能是技術合約——說明如何建立一個 HyperFrames 專案。以下內容為建置指南；各主題的詳細資訊位於 references/ 中（請參考索引），並依需求閱讀。其他關注點則位於同領域的技能中——hyperframes-animation、hyperframes-creative、media-use、hyperframes-cli、hyperframes-registry。/hyperframes 中的能力對映表說明了每個技能涵蓋的內容。
參考資料
| 檔案 | 閱讀時機… |
|---|---|
references/minimal-composition.md | 從最小的可渲染組合骨架開始 |
references/composition-patterns.md | 選擇整體式 vs 模組化；建構模組化的 index.html；選擇子組合原型 |
references/data-attributes.md | 查詢任何 data-*（根 / 剪輯 / 子組合宿主 / 舊版別名）；使用 class="clip" |
references/tracks-and-clips.md | 選擇 data-track-index，處理相同軌道的重疊 / z 軸順序，設定剪輯相對於另一個的時間 |
references/sub-compositions.md | 連接子組合（宿主屬性、<template>、每個實例的變數）並在其中進行動畫 |
references/variables-and-media.md | 宣告變數；放置 <video>/<audio>，設定音量，修剪 |
references/determinism-rules.md | 建置可尋址的時間軸；確定性禁令；可動畫屬性白名單；版面 / 文字適應 |
references/full-screen-motion.md | 使用共享背景編寫全幀動態效果 |
references/storyboard-format.md | 編寫 STORYBOARD.md 計劃（加上已解析的清單） |
references/review-loop.md | 在活板上執行計劃 → 草稿 → 建置審查通道——所有故事板規劃工作流程共享 |
references/production-loop.md | 將已批准的計劃轉變為交付的影片——階段依賴項（音訊、影格、組裝、轉場、字幕、驗證、交付）會直接遵循自由形式建置 |
references/brief-contract.md | 簡報的基本規則——模式推導（協作 / 自主）、共享欄位註冊表、問題不變性（提問本身位於 /hyperframes → 意圖層） |
references/brief-format.md | 編寫 BRIEF.md——已確認的意圖文件，工作流程的設定階段會寫入，後續每個步驟都會讀取 |
references/script-format.md | 編寫可選的 SCRIPT.md 鎖定旁白 |
references/subagent-dispatch.md | 將子代理調度動詞（並行展開 / 背景 / 等待）對應到您的工具 |
references/frame-worker-core.md | 共享的框架工作者角色合約——每個敘事工作流程的封包建置器會將其預置到該工作流程的 sub-agents/frame-worker.md 差異中 |
references/tailwind.md | 在 Tailwind v4 專案中工作（init --tailwind；運行時合約與 Studio v3 不同） |
有關動畫運行時的具體資訊（GSAP API、Lottie、Three.js 等），請參閱 hyperframes-animation → adapters/<runtime>.md。
建置組合
兩種根形式（不可互換）
- 獨立式（頂層
index.html）——根<div data-composition-id="…">直接位於<body>中，沒有<template>包裹（包裹會隱藏所有內容並破壞渲染）。 - 子組合（透過
data-composition-src載入）——根必須被包裹在<template>中。
⚠ 傳輸規則：運行時僅複製
<template>的內容；外部的所有內容（包括<head>中的樣式/腳本）都會被丟棄——請將<style>/<script>放在範本內部。 ⚠ 宿主 ID 規則：宿主插槽的data-composition-id必須完全等於內部範本的data-composition-id並且與window.__timelines["<id>"]鍵相同——沒有-mount/-slot/-host後綴。
檔案結構、宿主連接及預渲染檢查清單→ references/sub-compositions.md。
根必須設定大小（靜默佈局錯誤）
獨立式的根需要一個明確的大小盒子（以 px 為單位的 width/height），並且直到一個 height:100% 元素的所有上層元素都必須有已解析的高度——否則 flex/100% 的子元素會摺疊到約 0，內容會堆疊到左上角。不要僅依賴自動化門控來捕捉此問題；請檢查快照。骨架→ references/minimal-composition.md。
一個暫停的時間軸
每個組合在 window.__timelines["<id>"]（鍵 = 根 data-composition-id）註冊恰好一個 gsap.timeline({ paused: true })，並在頁面載入時同步建置。渲染持續時間 = 根 data-duration，而不是時間軸長度。不要手動將子時間軸巢狀到宿主中。完整合約（包括非 GSAP 運行時）→ references/determinism-rules.md + hyperframes-animation/adapters/。
不可協商的規則（自動化門控可能遺漏的靜默錯誤）
此處列出；完整理由請參閱連結的參考資料。請勿違反：
- 沒有渲染時時鐘 / 未種子
Math.random/ 網路 / 輸入狀態；沒有repeat: -1（請使用有限次數）。→determinism-rules.md - 僅對視覺屬性白名單進行動畫；永遠不要補間
display或原始visibility。GSAP 的autoAlpha和零持續時間時間軸邊界設定是唯一的可見性例外，而且僅適用於非剪輯元素或剪輯內部的包裹器。框架單獨控制.clip的可見性。不要在頁面載入時對後續場景的剪輯使用gsap.set。→determinism-rules.md - 正文文字中沒有
<br>；已轉換的元素必須是區塊級別 + 設定大小；脈衝的絕對定位裝飾元素需要頂部間距。→determinism-rules.md <video>/<audio>在任何巢狀深度下都能運作（包括在子組合<template>或包裹器內部）；框架擁有播放控制並在媒體所在之處進行尋址和解碼。唯一的注意事項是時間軸，而非放置位置：子組合時間軸無法對宿主根元素進行動畫。→variables-and-media.md- 每個
id在組裝後的頁面中必須是唯一的；在子組合內部，請為 id 加上組合 id 前綴（#<id>-hero）。重複的<video>/<img>id 會渲染為空白——媒體產生器透過getElementById注入影格，且跨檔案的重複項會繞過lint。→composition-patterns.md - 全螢幕場景填色應放在一個出血的子元素上（
position:absolute; inset:0），永遠不要放在組合根元素本身——媒體產生器的影格合成可能會丟棄根元素自身的background（影格會渲染為黑色），即使預覽/snapshot顯示正常。→composition-patterns.md
編輯現有組合
- 先讀取檔案。保留不相關的時間、軌道、ID、變數、媒體路徑。
- 比對現有組合 ID 和時間軸鍵。
- 新增剪輯：選擇一個不重疊的
data-track-index，或有意地調整周圍的時間。 - 組合元素上的
data-hidden會在預覽和渲染中隱藏該元素，覆蓋其時間窗口；它是非破壞性/可逆的，並可透過 Studio 時間軸的眼睛圖示切換。 - 新增子組合：在連接宿主之前，驗證其內部的
data-composition-id。
驗證
使用 hyperframes-cli 獲取命令詳細資訊
-
npx hyperframes check通過（在 lint、運行時、佈局、動態效果和對比度方面有 0 個發現） - 包含子組合的專案：
npx hyperframes snapshot --at <midpoints>並目視檢查每個影格 - 使用
npx hyperframes preview進行審查（使用者可以在 Studio 的時間軸中編輯任何內容） - 僅在使用者批准後執行
npx hyperframes render