ガラス破片タイトル (Glass Shard Title)
ボロノイ分割されたガラス板が奥行きから回転しながら飛来し、見出し文字のシルエットを覆うようにタイル状に敷き詰められた後、カメラの手前へと飛び去ります。各破片は、サザーランド・ホッジマン・クリッピングにより、ジッターを含んだブロブを自身のボロノイセルで切り抜いた形状であり、常に文字を正確に覆います。ガラス面とマットキャップ面にはピクセル単位のフォグがかかり、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 環境、マットキャップ、シード付きPRNG、d3-delaunay、シャドウマップ。1インスタンスあたりのメモリ使用量は約350MB。同時に実行するのは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 の関数として保ってください。シーク安全性こそがブロックをレンダリング可能にする鍵です。