1仕組みと動作原理
出力ショット：正方形タイルの全面がシームレスな前面見出しを保持し、仮想カーソルが表面をスイープすると、付近のタイルがガウス深度場に従って浮き上がり傾斜し、両方の見出しの輪郭と交差するセルだけが反転して背面見出しを露出させます。
registry/blocks/code-slice-hero/SKILL.md
A full square-tile surface carries one seamless headline. An imaginary cursor crosses the surface; nearby tiles respond to its Gaussian depth field with lift and tilt, and only the cells intersecting either headline silhouette turn over to reveal the rear headline.
ここでの処理内容：「トランジション」をセルごとのパネル反転による表示・非表示ロジックとして構築。反転するセルは見出しの輪郭によって決まるため、テキストを変更すれば反転パターンも自然に変化します。
レンダリング実装は「1回の instanced WebGL 2 draw」＋ 前後見出し共有アトラス ＋ 一括投影シャドウパスで構成。これは「タイルごとのDOM/個別要素」アプローチの対極にあり、本ブロックが30fpsで安定動作する理由です。
registry/blocks/code-slice-hero/SKILL.md
The whole grid is one instanced WebGL 2 draw with a shared front/rear texture pair, plus a batched projected-shadow pass.
ここでの処理内容：数百枚のタイルを1回の draw call に集約。影も Three.js のシャドウシステムを使わず、自作のバケット＋GLSLパス（shadows.js）で処理しています。
テキスト、フォントサイズ、グリッドセルの一辺長は独立：タイルはセル単位でアトラスを切り出すため、文字サイズをいくら大きくしても正方形が長方形に引き伸ばされることはありません。
registry/blocks/code-slice-hero/SKILL.md
Copy, text size and square cell size are independent, so tiles never stretch.
ここでの処理内容：「文字をグリッドにそのまま貼り付ける」一般的な手法に対する本ブロックの決定的な違いであり、どんなフォントサイズでもブロックが常に正方形を維持することを保証します。
18個の変数はすべて clamp を経由して読み込み：まずスキーマをパースしてデフォルト値を取得し、getVariables() で上書きした上で、数値型は宣言された区間に1つずつクランプし、不正な値はデフォルトにフォールバックします。
registry/blocks/code-slice-hero/code-slice-hero.html
const values = { ...defaults, ...(window.__hyperframes?.getVariables?.() || {}) }; … const clamp = (v, a = 0, b = 1) => Math.max(a, Math.min(b, v));
ここでの処理内容：変数は Studio のスライダーからも CLI の --variables からも供給される可能性があるため、そのまま信用せず「予測可能化」する必要があります。
見出しアトラスは実行時に Canvas 2D（willReadFrequently コンテキスト）で動的に描画され、前後の見出しで一対のアトラスを共有します。
registry/blocks/code-slice-hero/code-slice-hero.html
function textSurface(text) { … const canvas = document.createElement("canvas"); … const ctx = canvas.getContext("2d", { willReadFrequently: true });
ここでの処理内容：ブロックと共に大容量画像を配布するのを避け、組版をブラウザのフォントレンダリングに委ねることで、テキストやフォントサイズの変更に応じてリアルタイムにアトラスを再構築可能にしています。
WebGL2 が必須要件：webgl2 コンテキストを取得できない場合はサイレントにフォールバックせず、即座にエラーをスローします。
registry/blocks/code-slice-hero/surface.js
if (!gl) throw new Error("Code Slice Hero requires WebGL 2 for its full tile surface.");
ここでの処理内容：レンダリング環境が WebGL1 にしか対応していない場合、即座に失敗して可読性の高い原因を出力するため、空白フレームが出力されるよりも原因特定が容易になります。
決定論的コントラクトファミリーに準拠：paused タイムラインを window.__timelines["code-slice-hero"] に登録し、hf-seek で再同期。各フレームは t の閉形式関数となります。
registry/blocks/code-slice-hero/SKILL.md
One paused GSAP timeline registered as `window.__timelines["code-slice-hero"]`. … Re-syncs on the `hf-seek` CustomEvent; every frame is a closed-form function of time (seeded PRNG only, no rAF loops, no Date.now).
ここでの処理内容：ヘッドレスレンダラーがフレーム単位でシークするための前提条件であり、同一バッチのすべてのブロックが満たす必要があります。
2コア機能
01タイルごとのセル反転トランジション（1920×1080、8s、18変数）
02調整可能なカーソルガウス場：半径 160–480、減衰 0.4–3.5、深度 ±320、傾斜 0–55
03自作一括投影シャドウ（強度 0–0.65、ソフトネス 0.5–4）、WebGL2 内でタイル表面と共存
04単一インスタンス描画 ＋ 前後アトラス：seek ごとに1つのインスタンスバッファ、1回の表面 draw、1回のシャドウ draw
05ブロック同梱のローカル依存関係：GSAP 3.14.2 コピー、Geist-Bold.ttf（OFL）およびそのライセンス文書、実行時外部リクエストなし
06クリーンアップ可能：dispose により hf-seek リスナーを削除し、stage および内部配列をクリア
07Studio なしでもレンダリング可能：composition を直接レンダリングし、前後テキストをオーバーライド可能
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| cli | HyperFrames 官方 CLI（add / render） |
| package | GSAP 3.14.2（随块本地副本，非 CDN） |
| package | Geist-Bold.ttf（OFL）与 GSAP-NOTICE.txt 随块分发；本目录无任何网络依赖 |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠（ファイルパスと抜粋）
- scripts/: ローカルスクリプトまたはコマンドの実行: code-slice-hero.html（ブラウザ／レンダラー側実行：変数をパース → 前後テキストアトラスを生成 → paused GSAP タイムラインを登録 → h をリッスン
監査ノート： 。評価対象＝本ブロックディレクトリ（SKILL.md + composition HTML + ローカルレンダリングモジュール2点 + ローカル gsap コピー + フォント）：全ディレクトリにおいて外部通信ゼロ、認証情報/環境変数読み込みゼロ、シェルスクリプトゼロ、ローカルディスク書き込みゼロ、外部データ送信ゼロ。唯一の「実行面」はブラウザ内の WebGL2 および同梱された2つのローカル JS モジュール（同梱ローカル実行可能ファイルとしての通常実装）。インストールおよびレンダリングは公式 CLI エコシステムに準拠。これらに基づき blue 判定。
5二重目の独立検証
- [ok] 变量数与声明一致性（frontmatter 自称 18 variables） — 脚本实测：SKILL.md 变量表 18 行、html data-composition-variables 解析出 18 项、frontmatter 写 18 —— 一致。
- [ok] 「External runtime dependencies: none (served locally)」声称 — 对 html/shadows.js/surface.js 做 http(s):// 全文 grep：零命中；脚本标签只引用 assets/gsap-3.14.2.min.js 与同目录两个模块，字体为本地 Geist-Bold.ttf。
- [ok] WebGL2 硬门槛 — surface.js 中 `if (!gl) throw new Error("Code Slice Hero requires WebGL 2 for its full tile surface.");` 逐字命中，确为显式失败而非静默降级。
- [ok] registry-item 文件清单 vs 盘上文件 — 声明 8 个文件（含 shadows.js / surface.js / 字体 / 两份许可文本）全部存在于盘上，无远端 url 兜底。
- [ok] 无随机/时钟依赖 — 本目录 grep Math.random、Date.now、performance.now、requestAnimationFrame：零命中（确定性由 SKILL.md 的 Runtime contract 声明）。
- [ok] 阴影 pass 的自述与代码相符 — shadows.js 首行注释与实现一致：固定 light 向量、按 bucketSize 空间分桶、单次额外 GPU draw；非 three 阴影系统。
6結論
最適な用途： 「ハードコア／テック感」のある見出しトランジションや前後のテキスト対比を必要とするショート動画（8秒ショット）で、レンダリング環境に WebGL2 が備わっており、オフラインでの再現性を求めるパイプライン。
不向きな用途： 透過オーバーレイの出力や暗色背景での白抜き組版が必要な場合（本ブロックはデフォルトで白パネル #fff と暗色テキスト）；レンダリング環境が WebGL1 にしか対応していない場合。
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload code-slice-hero.tar.gz
sha256:
Option B · Copy Guide for Agentf4df15e71090b458…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit d2f0bc7f34.