Code Slice Hero
全面を正方形タイルで覆ったサーフェスが、1つのシームレスなヘッドラインを表示します。仮想のカーソルがサーフェスを横切ると、近くのタイルがそのガウス分布状の深度フィールドに反応して浮き上がり傾き、表または裏のヘッドラインのシルエットと交差するセルだけが反転し、背面のヘッドラインを露わにします。グリッド全体は、1つのインスタンス化された WebGL 2 描画呼び出しと、共有の表裏テクスチャペア、およびバッチ処理された投影シャドウパスで構成されています。コピー、テキストサイズ、正方形セルサイズは独立しているため、タイルが歪むことはありません。掃引方向、イージングの強さ、カーソル半径、減衰、深度、バウンス、シャドウはすべて変数として設定可能です。
コンポジションID: code-slice-hero。持続時間 8 秒 (30 fps)、1920×1080。
ファイル
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 | type | default | label / 範囲 |
|---|---|---|---|
headline | string | "MAKE IT" | コピー · 前面ヘッドライン 最大32文字 |
reverseHeadline | string | "MATTER." | コピー · 背面ヘッドライン 最大32文字 |
direction | enum | "left-to-right" | モーション · 掃引方向 (left-to-right |
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 |
ランタイム契約
- 1つの一時停止状態のGSAPタイムラインが
window.__timelines["code-slice-hero"]として登録されます。 hf-seekCustomEvent で再同期します。すべてのフレームは時間の閉形式関数です (シード付きPRNGのみを使用し、rAFループや Date.now は使用しません)。- レンダラー: GSAP、Canvas 2D、シード付きPRNG。
- 外部ランタイム依存: なし (ローカルで提供)。
- ローカルフォント: assets/Geist-Bold.ttf。
編集ルール (ソースプロジェクトより)
data-composition-variablesはシングルクォート属性とし、値はプレーンな"で囲んだJSONにすること。Studioのデザインパネルから保存しないでください。- 静的マークアップに
<canvas>を配置しないでください。実行時に生成します。 - すべての視覚状態を t の関数として保ってください。シーク安全性こそがブロックをレンダリング可能にする条件です。