玻璃碎片標題
Voronoi 切割的玻璃片從景深處旋轉飛入，落地拼成標題的輪廓，然後飛出鏡頭。每個碎片都是經 Sutherland–Hodgman 演算法裁剪後的抖動形狀，確保完整覆蓋文字。玻璃與 matcap 材質擁有逐片段霧效；Z 軸飛行與緩動函數解耦，使碎片移動軌跡清晰可見。當碎片數量為 1 時，即為單片玻璃。
組合 ID：glass-shard-title。長度 12.16 秒，30 fps，解析度 1920×1080。
檔案
glass-shard-title.html（16 KB）assets/ferndale_studio_01_1k.hdr（1.6 MB）assets/fonts/Geist-Bold.ttf（65 KB）assets/fonts/Geist-Regular.ttf（65 KB）assets/fonts/Geist-SemiBold.ttf（65 KB）assets/fonts/Geist-OFL.txt（4 KB）assets/fonts/cormorant-garamond.woff2（37 KB）assets/fonts/CormorantGaramond-OFL.txt（4 KB）assets/glass-main.js（549 KB）assets/Three-LICENSE.txt（1 KB）assets/matcap-1.png（安裝時從 CDN 取得）
安裝
使用 npx hyperframes add glass-shard-title 安裝；預設情況下，上述檔案會放置在 compositions/glass-shard-title/ 目錄下。然後在主機的 index.html 中掛載區塊：
<div
data-composition-id="glass-shard-title"
data-composition-src="compositions/glass-shard-title/glass-shard-title.html"
data-start="0"
data-duration="12.16"
data-track-index="1"
data-width="1920"
data-height="1080"
></div>
若要自訂值渲染，可直接指定組合檔案：
npx --yes [email protected] render 'compositions/glass-shard-title/glass-shard-title.html' --variables '{"headline":"Designed in glass","tileCount":8}'
變數
執行時可透過 window.__hyperframes.getVariables() 讀取；在組合根元素上以 data-composition-variables 屬性（單引號屬性，純 JSON）宣告。
| id | 類型 | 預設值 | 標籤 / 範圍 |
|---|---|---|---|
headline | string | "Designed in glass" | 標題最多 40 字元 |
tileCount | number | 8 | 碎片數量 1–400 步長 1 |
roundness | number | 0.4 | 圓角 (0-1) 0–1 步長 0.01 |
bevel | number | 0.35 | 倒角 (0-1) 0–1 步長 0.01 |
meshSmooth | number | 0.6 | 表面平滑度 (0-1) 0–1 步長 0.01 |
flyInTime | number | 2.3 | 飛入時間 (秒) 0.2–6 步長 0.05 |
flyOutTime | number | 2.4 | 飛出時間 (秒) 0.2–6 步長 0.05 |
stagger | number | 0.27 | 交錯延遲 (0-1) 0–1 步長 0.01 |
flyInRotation | number | 5 | 飛入旋轉角度 (0-60) 0–60 步長 0.1 |
flyOutRotation | number | 6 | 飛出旋轉角度 (0-6) 0–6 步長 0.1 |
chaos | number | 0.25 | 輪廓混亂度 (0-1) 0–1 步長 0.01 |
padding | number | 1 | 邊緣內距 (0-1) 0–1 步長 0.01 |
sizeVariance | number | 0.35 | 尺寸變異 (0-1) 0–1 步長 0.01 |
gap | number | 0.03 | 碎片間隙 0–0.3 步長 0.002 |
easePow | number | 10 | 飛入位置緩動 (1-10) 1–10 步長 0.1 |
sideDist | number | 3 | 側向飛行距離 0–60 步長 0.5 |
zDist | number | -42 | Z 軸飛入起點 (負數) -400–0 步長 2 |
zOut | number | 14 | Z 軸飛出終點 (+ = 越過鏡頭) -400–60 步長 2 |
fog | number | 36 | 霧距離 (0 = 關閉) 0–400 步長 2 |
執行時期合約
- 一條暫停的 GSAP 時間軸註冊為
window.__timelines["glass-shard-title"]。 - 收到
hf-seek自訂事件時重新同步；每個影格皆為時間的封閉形式函數（僅使用種子 PRNG，無 rAF 循環，無 Date.now）。 - 渲染器：three.js 0.181.2（捆綁）、GSAP 3.14.2、Canvas 2D、GLSL 著色器、HDR 環境、Matcap、種子 PRNG、d3-delaunay、陰影貼圖。每個即時實例約佔 350 MB 記憶體；建議一次只執行一個。
- 外部執行時期依賴：
https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js、https://cdn.jsdelivr.net/npm/[email protected]/dist/d3-delaunay.min.js。 - 本地字型：assets/fonts/Geist-Regular.ttf、assets/fonts/Geist-SemiBold.ttf、assets/fonts/Geist-Bold.ttf。
- 捆綁的程式碼內嵌在組合檔案中（assets/glass-main.js）；編輯 .mjs 原始碼後，使用 esbuild 重建並重新內嵌。
編輯規則（來自原始專案）
- 保持
data-composition-variables為單引號屬性，內容為純"JSON。切勿透過 Studio 的設計面板儲存此屬性。 - 不要在靜態標記中放置
<canvas>；應在執行時期建立。 - 保持所有視覺狀態為時間 t 的函數；seek 安全性是區塊可渲染的關鍵。