1仕組みと動作原理
出力ショット：Voronoi分割されたガラス板が奥行きから回転しながら飛来し、着地してタイトルのシルエットを形成した後、カメラを越えて飛び去ります。tileCountを1に縮退させ、単一のガラス面をタイトルとして表示することも可能です。
registry/blocks/glass-shard-title/SKILL.md
Voronoi-cut glass panes fly in from depth, rotating, and land as a tiled silhouette of the headline, then fly out past the camera. … Tile count 1 gives a single pane.
処理内容：「砕けたガラスによるタイポグラフィの組み立て」でタイトルを表示し、配置位置がそのまま字形を構成します。破片の配置はフォントグリフの輪郭によって決定され、同一ブロックかつパラメータ制御で「破砕」と「単一平面」の両方の外観をカバーします。
アルゴリズムによる確実なカバレッジ：各破片は「ジッター付きブロブ」と「対応するVoronoiセル」の間でSutherland–Hodgmanクリッピングを行った結果であるため、隙間を生じさせることなく常に字形を完全に覆います。
registry/blocks/glass-shard-title/SKILL.md
Each shard is a Sutherland–Hodgman clip of a jittered blob against its Voronoi cell, so the pieces always cover the type.
処理内容：「隙間のない結合」を手動のパラメータ調整から幾何学的構造による必然的な結果へと変換しています（cuboid-carouselの間隔算出と同様の手法）。
ガラスおよびmatcap表面への破片ごとのフォグ適用。Z軸の移動とイージングを分離しているため、破片の奥行き通過が視覚的に認識可能（一瞬で配置完了しない）です。
registry/blocks/glass-shard-title/SKILL.md
Glass and matcap surfaces get per-fragment fog; the z-flight is decoupled from the ease so shards visibly traverse it.
処理内容：イージングは進行度のみを制御し、Z軸距離は別変数（zDist/zOut/easePow等）で設定されているため、「カメラを突き抜ける」奥行き感を演出できます。
リファクタリング構成：compositionはわずか16 KBで、コアロジックは549 KBのインラインバンドル生成物 assets/glass-main.js（three 0.181.2 + d3-delaunay + GLSL）内に収容されています。
registry/blocks/glass-shard-title/SKILL.md
Bundled code is inlined into the composition (assets/glass-main.js); rebuild with esbuild and re-inline after editing the .mjs source.
処理内容：「compositionはホスト描画ユニットの薄いシェルであり、コアロジックはバンドル生成物に含まれる」というHFの慣例を明確化しています。引き換えにコード修正時には再バンドルが必要となります。
再構築パイプラインのスクリプト化：ソースコードがトップレベルawait（HDR/matcap/フォント読み込み用）を使用している一方、HFサブコンポジションはクラシックなIIFEを要求するため、importを抽出し、bodyをasync IIFEでラップした上でnpx esbuildにバンドルを委譲します。
registry/blocks/glass-shard-title/build-bundle.mjs
The source uses top-level await (HDR + matcap + font loads), which esbuild cannot emit in the classic-IIFE format that HyperFrames sub-compositions require, so the body is wrapped in an async IIFE with the imports hoisted before bundling.
処理内容：HFでレンダリング可能にするための前提条件であり、ビジネスロジックではなくフォーマット変換スクリプトです。
リスナーとタイムラインのシングルトン管理：再入時にhf-seekリスナーや過去の一時停止タイムラインが蓄積するのを防ぐため、古いリスナーを明示的に削除し、古いタイムラインをkillし、pagehide時（bfcache除く）に破棄します。
registry/blocks/glass-shard-title/glass-shard-title.html
Exactly one listener and one live timeline per document. A second evaluation of this script would otherwise stack another hf-seek listener and leave the previous paused timeline registered, so every seek would drive N timelines and repaint N times.
処理内容：Studioはコンポジションスクリプトを繰り返し評価するため、「重複実行」を正常系として処理しています。同一バッチのブロックの中で最も徹底された実装です。
決定論的動作：コメントにrAF、数値積分器、Math.random()の不使用が明記されています。破片レイアウトはシード値で決定され、フォント読み込み完了後に構築されます（セル選択にはラスタライズされたテキストのサンプリングが必要なため）。
registry/blocks/glass-shard-title/glass-shard-title.html
No rAF, no integrators, no Math.random(). Shard layout is seeded and built after fonts load (cell selection samples the rasterised text).
処理内容：フォント読み込みとレイアウト構築の順序関係を明確にし、字形幅の変動によるVoronoiセルサンプリングのズレを防止しています。
2コア機能
01Voronoiガラスタイル組み立て式タイトルショット（1920×1080、12.16秒、19変数）
02破片の数と形状の調整機能：tileCount 1〜400、roundness、bevel、meshSmooth、輪郭擾乱chaos、tile gap
03飛来/飛び去りの個別フェーズ制御、およびイージングから分離された奥行き表現（flyInTime/flyOutTime/easePow/sideDist/zDist/zOut）
04HDR環境 + matcapガラスマテリアル + 破片ごとのフォグ（フォグ距離 0〜400、0 = 無効）
05ブロック同梱の2種フォント：Geist（Regular/SemiBold/Bold）およびCormorant Garamond（いずれもOFLライセンス文書付属）
06厳格なリスナー/タイムラインのシングルトン規約 + pagehide時のリソース破棄（bfcache判定含む）
07インストール時に公式CDNからmatcapテクスチャを1枚取得
08Studio非依存での単体レンダリング対応：タイトル文字列と破片数を直接オーバーライド可能
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| cli | HyperFrames 官方 CLI（add / render） |
| network | jsDelivr CDN：GSAP 3.14.2（产物期脚本） |
| network | jsDelivr CDN：d3-delaunay 6.0.4（Voronoi 计算） |
| network | 装机期资产：matcap 贴图（官方 CDN，安装时拉取） |
| package | 构建依赖（仅重建时需要）：npx esbuild + three（需 0.185.1 起才带 HDRLoader） |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠（ファイルパスと抜粋）
- scripts/: ローカルスクリプトまたはコマンドの実行: assets/glass-main.js（composition内で実行されるバンドル生成物：Voronoi/クリッピング/ガラスマテリアルおよびタイムライン駆動）
- 网络端点: 外部ネットワークアクセスの宣言: cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js（生成物実行期：ブラウザで実行）
- 本地工作目录: ファイル読み書きとアーティファクト出力: 実行期（composition）：ディスクへの書き込みなし。ガラスメッシュとテクスチャはすべてメモリ上で処理。
監査ノート： 。評価対象＝本ブロックディレクトリ（SKILL.md + composition + インラインバンドル生成物 glass-main.js + ソース .mjs + 再構築スクリプト + HDR/フォント）：認証情報/環境変数の読み取りなし、外部へのデータ送信なし、機密パスへのアクセスなし。生成物実行期のブラウザはjsdelivrからgsapとd3-delaunayを取得（規範付録A第2条：生成物実行期の参照は評価対象外とし、エンドポイントの列挙のみ実施）。インストール期には公式CLIにより static.heygen.ai からmatcapテクスチャ1枚を取得。ディレクトリ内の実行可能スクリプトは再構築用の build-bundle.mjs のみ（手動実行、内部で npx esbuild を呼び出し結果を assets/glass-main.js に書き戻し、一時ファイルは削除）—「ローカルスクリプト/ローカル読み書き」に該当するため blue と判定。サプライチェーン注記（評価レベル変更なし）：build-bundle.mjs はnpx経由でesbuildを解決するため、ローカル未インストール時はnpmから最新パッケージを取得して実行されます。能動的な再構築時のみこの経路が発生します。
5二重目の独立検証
- [ok] 变量数与声明一致性（frontmatter 自称 19 variables） — 脚本实测：SKILL.md 变量表 19 行、html data-composition-variables 解析出 19 项、frontmatter 写 19 —— 一致。
- [discrepancy] 「可编辑 .mjs 源码」在安装后的可达性 — SKILL.md 的 Files 列表含 assets/glass-main.mjs 并指示「改完 .mjs 后重建并重新内联」，但 registry-item.json 的分发清单只列 glass-main.js：安装进项目后不会有那份可编辑源码（本仓库目录里有）。重建前须自行保留源码。
- [ok] 装机期资产声称 — registry-item.json 中 matcap-1.png 带 static.heygen.ai 的 url，盘上确实缺失，与 SKILL.md 括注 fetched from the CDN at install 一致。
- [ok] 重入/释放处理 — html 中确有 removeEventListener(hf-seek)、旧时间线 kill、pagehide + persisted 分支；与注释所述单例纪律相符。
- [ok] 确定性声称 — html 注释写 No rAF, no integrators, no Math.random()；全文 grep Math.random / Date.now / requestAnimationFrame 零命中。
- [ok] 重建脚本的真实行为 — build-bundle.mjs 逐字命中：读 glass-main.mjs → 提出 import → 包 async IIFE 写临时文件 → execFileSync("npx", ["esbuild", …, "--format=iife", "--minify"]) → finally unlinkSync。
6結論
最適な用途： 「ガラス/破片が組み上がるタイポグラフィ」の質感を持つタイトルカード（12秒）を必要とし、実行時にCDNからgsap/d3-delaunayを取得可能で、コード修正時にesbuildによる再構築フローを許容できるプロジェクト。
不向きな用途： 完全外部通信なしのオフライン描画が必須な環境（2つのCDNスクリプトの事前ローカル化が必要）。composition内のインラインコードを直接修正してパラメータ調整を行いたい大幅な改変用途（ロジックはバンドル生成物内にあり、修正対象は.mjsソース）。
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload glass-shard-title.tar.gz
sha256:
Option B · Copy Guide for Agentf39a3f1b95ae6b82…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit d2f0bc7f34.