HyperFrames

HTML 是影片的唯一真實來源。一個合成是一個帶有 data-* 屬性的 HTML 檔案，用於控制時間、GSAP 時間軸用於動畫，以及 CSS 用於外觀。框架負責處理剪輯可見性、媒體播放與時間軸同步。

方法

在編寫 HTML 之前，先從高層次思考：

什麼 — 觀眾應該體驗到什麼？識別敘事弧線、關鍵時刻與情感節拍。
結構 — 有多少個合成，哪些是子合成或內聯合成，哪些軌道承載什麼內容（影片、音訊、疊層、字幕）。
時間 — 哪些剪輯決定時長，轉場落點在哪裡，節奏如何。
佈局 — 先建立結束狀態。請參閱下方的「佈局優先於動畫」。
動畫 — 然後使用以下規則添加動畫。

對於小型編輯（修正顏色、調整時間、添加一個元素），直接跳到規則。

視覺識別關卡

按以下順序檢查：

專案中存在 DESIGN.md？ → 讀取它。使用其精確的顏色、字體、動畫規則與「禁止事項」。
存在 visual-style.md？ → 讀取它。套用其 style_prompt_full 與結構化欄位。（注意：visual-style.md 是專案特定的檔案。visual-styles.md 是包含 8 個命名預設的樣式庫 — 不同的檔案。）
使用者命名了一種樣式（例如「Swiss Pulse」、「黑暗科技風」、「奢華品牌」）？→ 讀取 visual-styles.md 中的 8 個命名預設。產生一個最小化的 DESIGN.md，包含：## Style Prompt（一個段落）、## Colors（3-5 個十六進位顏色值與角色）、## Typography（1-2 個字型家族）、## What NOT to Do（3-5 個反模式）。
上述情況皆無？ → 在編寫任何 HTML 之前，先問 3 個問題：
- 情緒是什麼？（爆發 / 電影感 / 流暢 / 技術感 / 混亂 / 溫暖）
- 淺色還是深色畫布？
- 有任何特定的品牌顏色、字型或視覺參考嗎？然後根據答案產生一個最小化的 DESIGN.md。

每個合成必須將其調色盤與字型追溯回一個 DESIGN.md、visual-style.md 或明確的使用者指示。如果你正在使用 #333、#3b82f6 或 Roboto — 你跳過了這一步。

關於動畫預設、尺寸、進入模式與緩動 — 請遵循 house-style.md。house style 處理事物如何移動。DESIGN.md 處理事物看起來像什麼。

佈局優先於動畫

將每個元素放置在它最可見的時刻應該在的位置 — 也就是它完全進入、正確定位且尚未退出的影格。先將其編寫為靜態 HTML+CSS。暫時不要使用 GSAP。

為什麼這很重要： 如果你將元素定位在它們的動畫起始狀態（螢幕外、縮放至 0、透明度 0）並補間到你認為它們應該落地的位置，你是在猜測最終佈局。重疊在影片渲染之前是看不見的。透過先建立結束狀態，你可以在添加任何動畫之前看到並修復佈局問題。

流程

為每個場景識別主影格 — 最多元素同時可見的時刻。這就是你要建立的佈局。
為該影格編寫靜態 CSS。.scene-content 容器必須使用 width: 100%; height: 100%; padding: Npx; 搭配 display: flex; flex-direction: column; gap: Npx; box-sizing: border-box 來填滿整個場景。使用 padding 將內容向內推 — 絕對不要在內容容器上使用 position: absolute; top: Npx。絕對定位的內容容器在內容高於剩餘空間時會溢出。僅為裝飾性元素保留 position: absolute。
使用 gsap.from() 添加進入動畫 — 從螢幕外/不可見狀態動畫到 CSS 位置。CSS 位置是真相來源；補間描述了到達那裡的過程。
使用 gsap.to() 添加退出動畫 — 從 CSS 位置動畫到螢幕外/不可見狀態。

範例

/* scene-content 填滿場景，padding 定位內容 */
.scene-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 120px 160px;
  gap: 24px;
  box-sizing: border-box;
}
.title {
  font-size: 120px;
}
.subtitle {
  font-size: 42px;
}
/* 容器填滿任何場景大小（1920x1080、1080x1920 等）。
   Padding 定位內容。Flex + gap 處理間距。 */

錯誤 — 硬編碼尺寸與絕對定位：

.scene-content {
  position: absolute;
  top: 200px;
  left: 160px;
  width: 1920px;
  height: 1080px;
  display: flex; /* ... */
}

// 步驟 3：動畫到那些位置
ctl.from(".title", { y: 60, opacity: 0, duration: 0.6, ease: "power3.out" }, 0);
tl.from(".subtitle", { y: 40, opacity: 0, duration: 0.5, ease: "power3.out" }, 0.2);
tl.from(".logo", { scale: 0.8, opacity: 0, duration: 0.4, ease: "power2.out" }, 0.3);

// 步驟 4：從那些位置退出動畫
tl.to(".title", { y: -40, opacity: 0, duration: 0.4, ease: "power2.in" }, 3);
tl.to(".subtitle", { y: -30, opacity: 0, duration: 0.3, ease: "power2.in" }, 3.1);
tl.to(".logo", { scale: 0.9, opacity: 0, duration: 0.3, ease: "power2.in" }, 3.2);

當元素隨時間共享空間時

如果元素 A 在元素 B 進入同一區域之前退出，兩者在其各自的主影格都應有正確的 CSS 位置。時間軸順序保證它們永遠不會在視覺上共存 — 但如果你跳過佈局步驟，你將無法發現它們因時間錯誤而意外重疊的情況。

什麼算是有意重疊

分層效果（文字後的發光、陰影元素、背景圖案）和 Z 軸堆疊設計（卡片堆疊、深度層）是有意的。佈局步驟的目的是為了發現意外重疊 — 兩個標題疊在一起、統計數據覆蓋了標籤、內容溢出畫面邊界。

資料屬性

所有剪輯

屬性	必要	值
`id`	是	唯一識別符
`data-start`	是	秒數或剪輯 ID 參考（`"el-1"`、`"intro + 2"`）
`data-duration`	圖片/div/合成必要	秒數。影片/音訊預設為媒體時長。
`data-track-index`	是	整數。相同軌道的剪輯不能重疊。
`data-media-start`	否	來源的修剪偏移量（秒）
`data-volume`	否	0-1（預設 1）

data-track-index 不影響視覺分層 — 請使用 CSS z-index。

合成剪輯

屬性	必要	值
`data-composition-id`	是	唯一合成 ID
`data-start`	是	開始時間（根合成：使用 `"0"`）
`data-duration`	是	優先於 GSAP 時間軸時長
`data-width` / `data-height`	是	像素尺寸（1920x1080 或 1080x1920）
`data-composition-src`	否	外部 HTML 檔案路徑

合成結構

透過 data-composition-src 載入的子合成使用 <template> 包裹。獨立合成（主要的 index.html）不使用 <template> — 它們將 data-composition-id 的 div 直接放在 <body> 中。在獨立檔案上使用 <template> 會隱藏所有內容，導致瀏覽器無法渲染。

子合成結構：

<template id="my-comp-template">
  <div data-composition-id="my-comp" data-width="1920" data-height="1080">
    <!-- 內容 -->
    <style>
      [data-composition-id="my-comp"] {
        /* 限定範圍的樣式 */
      }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
    <script>
      window.__timelines = window.__timelines || {};
      const tl = gsap.timeline({ paused: true });
      // 補間...
      window.__timelines["my-comp"] = tl;
    </script>
  </div>
</template>

在根合成中載入：<div id="el-1" data-composition-id="my-comp" data-composition-src="compositions/my-comp.html" data-start="0" data-duration="10" data-track-index="1"></div>

影片與音訊

影片必須是 muted playsinline。音訊始終是獨立的 <audio> 元素：

<video
  id="el-v"
  data-start="0"
  data-duration="30"
  data-track-index="0"
  src="video.mp4"
  muted
  playsinline
></video>
<audio
  id="el-a"
  data-start="0"
  data-duration="30"
  data-track-index="2"
  src="video.mp4"
  data-volume="1"
></audio>

時間軸合約

所有時間軸以 { paused: true } 開始 — 播放器控制播放
註冊每個時間軸：window.__timelines["<composition-id>"] = tl
框架自動嵌套子時間軸 — 請勿手動添加
時長來自 data-duration，而不是 GSAP 時間軸長度
永遠不要為了設定時長而建立空的補間

規則（不可協商）

確定性： 沒有 Math.random()、Date.now() 或基於時間的邏輯。如果需要偽隨機值（例如 mulberry32），請使用種子化的 PRNG。

GSAP： 僅對視覺屬性進行動畫處理（opacity、x、y、scale、rotation、color、backgroundColor、borderRadius、變形）。不要對 visibility、display 進行動畫處理，或呼叫 video.play()/audio.play()。

動畫衝突： 永遠不要同時從多個時間軸對同一個元素的相同屬性進行動畫處理。

沒有 repeat: -1： 無限重複的時間軸會破壞擷取引擎。根據合成時長計算確切的重複次數：repeat: Math.ceil(duration / cycleDuration) - 1。

同步時間軸建構： 永遠不要在 async/await、setTimeout 或 Promise 內部建構時間軸。擷取引擎在頁面載入後同步讀取 window.__timelines。字型由編譯器嵌入，因此立即可用 — 無需等待字型載入。

絕對不要：

忘記註冊 window.__timelines
將影片用於音訊 — 始終使用靜音影片 + 獨立的 <audio>
將影片嵌套在計時 div 內 — 使用非計時的包裹元素
使用 data-layer（改用 data-track-index）或 data-end（改用 data-duration）
對影片元素尺寸進行動畫處理 — 對包裹 div 進行動畫處理
對媒體呼叫 play/pause/seek — 框架擁有播放控制權
建立一個沒有 data-composition-id 的頂層容器
在任何時間軸或補間上使用 repeat: -1 — 始終使用有限重複
非同步建構時間軸（在 async、setTimeout、Promise 內部）
在後續場景中對剪輯元素使用 gsap.set() — 它們在頁面載入時不存在於 DOM 中。改為在剪輯的 data-start 時間或之後，在時間軸內使用 tl.set(selector, vars, timePosition)。
在內容文字中使用 <br> — 強制換行不考慮實際渲染的字型寬度。自然換行的文字加上 <br> 會產生額外的不必要換行，導致重疊。改用 max-width 讓文字自動換行。例外情況：故意將每個單詞放在獨立行上的簡短顯示標題（例如，130px 大小的 "THE\nIMMORTAL\nGAME"）。

場景轉場（不可協商）

每個多場景合成必須遵循以下所有規則。違反任何一條都會導致合成失敗。

始終在場景之間使用轉場。 沒有跳接。沒有例外。
始終在每個場景上使用進入動畫。 每個元素透過 gsap.from() 動畫進入。沒有元素可以完全成形地出現。如果一個場景有 5 個元素，則需要 5 個進入補間。
永遠不要在最終場景之外使用退出動畫。 這意味著：在轉場觸發之前，不要使用 gsap.to() 將透明度動畫至 0、將 Y 軸移出螢幕、將縮放至 0 或任何其他「退出」動畫。轉場本身就是退出。在轉場開始的那一刻，正在退出的場景內容必須完全可見。
僅限最終場景： 最後一個場景可能會淡出元素（例如，淡出至黑色）。這是唯一允許使用 gsap.to(..., { opacity: 0 }) 的場景。

錯誤 — 轉場前的退出動畫：

// 禁止 — 這會在轉場可以使用場景之前清空它
tl.to("#s1-title", { opacity: 0, y: -40, duration: 0.4 }, 6.5);
tl.to("#s1-subtitle", { opacity: 0, duration: 0.3 }, 6.7);
// 轉場在空影格上觸發

正確 — 僅進入動畫，轉場處理退出：

// 場景 1 進入動畫
tl.from("#s1-title", { y: 50, opacity: 0, duration: 0.7, ease: "power3.out" }, 0.3);
tl.from("#s1-subtitle", { y: 30, opacity: 0, duration: 0.5, ease: "power2.out" }, 0.6);
// 沒有退出補間 — 在 7.2 秒處的轉場處理場景切換
// 場景 2 進入動畫
tl.from("#s2-heading", { x: -40, opacity: 0, duration: 0.6, ease: "expo.out" }, 8.0);

動畫護欄

將第一個動畫偏移 0.1-0.3 秒（不是 t=0）
在進入補間之間變化緩動函數 — 每個場景至少使用 3 種不同的緩動函數
不要在一個場景內重複進入模式
避免在深色背景上使用全螢幕線性漸層（H.264 條帶效應 — 改用徑向漸層或純色加上局部發光）
渲染影片使用 60px+ 標題、20px+ 正文、16px+ 數據標籤
font-variant-numeric: tabular-nums 用於數字欄

當沒有提供 visual-style.md 或動畫方向時，請遵循 house-style.md 以獲得美學預設值。

排版與素材

字型： 只需在 CSS 中編寫你想要的 font-family — 編譯器會自動嵌入支援的字型。如果字型不受支援，編譯器會發出警告。
為外部媒體添加 crossorigin="anonymous"
對於

…

[已截斷以進行翻譯]

assafkip/claude-video-editor

claude-video-editor 是什麼？

在你喜歡的 AI 中提問

預覽

說明文件