ガラス破片のタイトル
ボロノイ分割されたガラスの破片が奥行きから回転しながら飛来し、見出しテキストのタイル状のシルエットとなって着地した後、カメラの向こう側へ飛び去ります。各破片は、ジッターの入ったブロブを自身のボロノイセルでサザランド・ホジマンクリッピングしたものであり、常にテキストを正確に覆います。ガラス面とマットキャップ面にはピクセル単位のフォグが適用され、Z軸方向の飛行はイージングから分離されているため、破片が奥行きを進む様子が視覚的に明瞭にわかります。タイル数1で単一のパネルになります。
コンポジションID: glass-shard-title。持続時間12.16秒（30fps）、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 | type | default | ラベル / 範囲 |
|---|---|---|---|
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環境、マットキャップ、シード付きPRNG、d3-delaunay、シャドウマップ。1インスタンスあたり約350 MBのメモリを消費します。一度に1つだけ実行してください。
- 外部ランタイム依存関係:
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（時間）の関数とすること。シーク安全性こそがブロックをレンダリング可能にする鍵です。