Canopy Part Title
濃密的紋理葉片以淺景深掃過畫面，然後分開以揭示第一個標題；第二波葉片則以不同的景深將第二個標題帶入鏡頭。少數葉片留在文字上，保持輕微的微風效果。字體、字重、字級、字距、葉片數量、掃描速度以及保留葉片的微風皆為可變變數。
組合 ID：canopy-part-title。時長 12 秒，30 fps，1920×1080。
檔案
canopy-part-title.html(57 KB)assets/leaf-surface-color.webp(64 KB)assets/leaf-surface-normal.webp(136 KB)
安裝
使用 npx hyperframes add canopy-part-title 安裝；預設情況下，上述檔案會放置於 compositions/canopy-part-title/ 目錄下。接著，在主機的 index.html 中掛載區塊：
<div
data-composition-id="canopy-part-title"
data-composition-src="compositions/canopy-part-title/canopy-part-title.html"
data-start="0"
data-duration="12"
data-track-index="1"
data-width="1920"
data-height="1080"
></div>
直接指定組合檔案，即可使用自訂值進行渲染：
npx --yes [email protected] render 'compositions/canopy-part-title/canopy-part-title.html' --variables '{"headline1":"Understory","headline2":"Move slowly"}'
變數
執行時期可透過 window.__hyperframes.getVariables() 讀取；宣告於組合根元素上的 data-composition-variables 屬性中（使用單引號包裹的屬性，純 JSON 格式）。
| id | 型別 | 預設值 | 標籤 / 範圍 |
|---|---|---|---|
headline1 | 字串 | "Understory" | 標題 1 |
headline2 | 字串 | "Move slowly" | 標題 2 |
font | 字串 | "Helvetica" | 標題字體 |
fontWeight | 數字 | 900 | 字體粗細 100–900 步長 100 |
fontSize | 數字 | 1 | 字體大小 (1 = 自動調整) 0.3–2 步長 0.01 |
letterSpacing | 數字 | 0.01 | 字距 (em) -0.2–1 步長 0.01 |
background | 顏色 | "#020805" | 背景色 |
leafCount | 數字 | 170 | 每次掃描的葉片數量 40–320 步長 1 |
stayCount | 數字 | 5 | 保留的葉片數量 0–20 步長 1 |
sweepSpeed | 數字 | 1 | 掃描速度 0.3–3 步長 0.05 |
retainedBreeze | 數字 | 1 | 保留葉片的微風 0–2 步長 0.05 |
執行時期約定
- 一個暫停的 GSAP 時間軸，註冊為
window.__timelines["canopy-part-title"]。 - 在
hf-seekCustomEvent 時重新同步；每一影格都是時間的封閉式函數（僅使用種子 PRNG，不需要 rAF 迴圈，不使用 Date.now）。 - 渲染器：three.js 0.170.0、GSAP 3.14.2、Canvas 2D、後製處理、種子 PRNG、陰影貼圖。每個實例約需 350 MB 記憶體；建議一次只執行一個。
- 外部執行時期依賴：
https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js、https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js、https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/postprocessing/EffectComposer.js、https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/postprocessing/RenderPass.js、https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/postprocessing/BokehPass.js。 - 來自 Google Fonts 的網頁字體：Gelasio。
編輯規則（來自原始專案）
- 保持
data-composition-variables為單引號包裹的屬性，並使用純"的 JSON。切勿透過 Studio 的設計面板儲存。 - 不要將
<canvas>放在靜態標記中；在執行時期建立。 - 保持每個視覺狀態都是 t 的函數；尋軌安全性是使區塊可渲染的關鍵。