コードスライスヒーロー
正方形のタイルが敷き詰められた全面に、一つのシームレスなヘッドラインが表示されます。仮想カーソルが面を横切ると、近くのタイルはそのガウス深度フィールドに応じて浮き上がりと傾きを生じ、さらにヘッドラインのシルエットと交差するセルだけが反転して裏面のヘッドラインを表示します。グリッド全体は、共有のフロント/リアテクスチャペアとバッチ処理された投影シャドウパスを持つ、一つのインスタンス化されたWebGL 2 ドローです。コピー、テキストサイズ、正方形セルサイズは独立しているため、タイルが伸びることはありません。スイープ方向、イージング強度、カーソル半径、減衰、深度、バウンス、影はすべて変数として設定可能です。
コンポジションID: code-slice-hero。フレームレート30fps、1920×1080で8秒間のコンポジションです。
ファイル
code-slice-hero.html(24 KB)assets/Geist-Bold.ttf(65 KB)assets/Geist-OFL.txt(4 KB)assets/gsap-3.14.2.min.js(128 KB)assets/GSAP-NOTICE.txt(1 KB)shadows.js(10 KB)surface.js(8 KB)
インストール
npx hyperframes add code-slice-hero でインストールします。デフォルトでは上記のファイルが compositions/code-slice-hero/ 以下に配置されます。その後、ホストの index.html からブロックをマウントします。
<div
data-composition-id="code-slice-hero"
data-composition-src="compositions/code-slice-hero/code-slice-hero.html"
data-start="0"
data-duration="8"
data-track-index="1"
data-width="1920"
data-height="1080"
></div>
カスタム値でレンダリングするには、コンポジションファイルを直接指定します。
npx --yes [email protected] render 'compositions/code-slice-hero/code-slice-hero.html' --variables '{"headline":"MAKE IT","reverseHeadline":"MATTER."}'
変数
ランタイム時に window.__hyperframes.getVariables() で読み取られます。コンポジションのルート要素に data-composition-variables 属性として宣言されています（シングルクォート属性、プレーンJSON）。
| id | 型 | デフォルト | ラベル・範囲 |
|---|---|---|---|
headline | string | "MAKE IT" | コピー · 前面ヘッドライン最大32文字 |
reverseHeadline | string | "MATTER." | コピー · 背面ヘッドライン最大32文字 |
direction | enum | "left-to-right" | モーション · スイープ方向 (left-to-right または right-to-left) |
sweepDuration | number | 4.2 | モーション · スイープ時間 2.6～4.5 ステップ0.05 |
sweepEaseStrength | number | 3 | モーション · スイープイージング強度 0～3 ステップ0.05 |
flipDuration | number | 0.75 | モーション · 各タイルの反転時間 0.65～1.65 ステップ0.05 |
cursorRadius | number | 210 | カーソル · 影響半径 160～480 ステップ10 |
cursorFalloff | number | 1.4 | カーソル · 影響減衰 0.4～3.5 ステップ0.05 |
cursorDepth | number | 80 | カーソル · 深度 (+ カメラ方向) -320～320 ステップ10 |
tiltStrength | number | 55 | カーソル · 引き上げ/傾き強度 0～55 ステップ1 |
noiseStrength | number | 2 | モーション · 有機的なバラつき 0～2 ステップ0.05 |
flipBounce | number | 0.15 | モーション · 弾性的な反転バウンス 0～0.8 ステップ0.05 |
cellSize | number | 112 | スライス · 正方形セルサイズ 24～120 ステップ4 |
formationScale | number | 1 | スライス · ローカル形成スケール 0.94～1 ステップ0.001 |
fontSize | number | 310 | タイポグラフィ · 最大サイズ 160～480 ステップ5 |
behindColor | color | "#212121" | サーフェス · タイル背面の背景色 |
shadowStrength | number | 0.19 | サーフェス · 投影シャドウ強度 0～0.65 ステップ0.01 |
shadowSoftness | number | 4 | サーフェス · 投影シャドウの柔らかさ 0.5～4 ステップ0.1 |
ランタイム契約
- 一時停止状態のGSAPタイムラインが
window.__timelines["code-slice-hero"]として登録されます。 hf-seekカスタムイベントで再同期します。すべてのフレームは時間の閉形式関数です（シード付きPRNGのみ使用。rAFループやDate.nowは使用しません）。- レンダラー: GSAP、Canvas 2D、シード付きPRNG。
- 外部ランタイム依存関係: なし（ローカルで提供）。
- ローカルフォント: assets/Geist-Bold.ttf。
編集ルール（ソースプロジェクトより）
data-composition-variablesはシングルクォート属性として、プレーンな"JSON で記述してください。Studioのデザインパネルから保存しないでください。- 静的なマークアップに
<canvas>を配置しないでください。ランタイムで生成してください。 - すべての視覚状態を時間 (t) の関数として保持してください。シーク安全性がこのブロックをレンダリング可能にするための条件です。