玻璃碎片標題
Voronoi 切割的玻璃碎片從深處飛入、旋轉，落地後拼貼成標題文字的輪廓，再飛出攝影機。每個碎片都是透過 Sutherland–Hodgman 演算法，將抖動的形狀裁剪至其 Voronoi 細胞而產生，因此碎片總能完全覆蓋文字。玻璃與 matcap 表面材質均帶有逐片霧效；Z 軸飛行與緩動曲線解耦，讓碎片能清晰穿越空間。設定 tileCount 為 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-seekCustomEvent 重新同步；每個影格均為時間的封閉形式函數（僅使用種子化 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 安全性是區塊可渲染的關鍵。