キャノピーパートタイトル
テクスチャ付きの葉が浅い被写界深度でフレームを横切り、最初の見出しを現します。次に、奥行き感のある2番目の葉の群れが2番目の見出しをカメラの前を通り過ぎていきます。数枚の葉が見出しの上に残り、そよ風を保ちます。フォント、ウェイト、サイズ、文字間隔、葉の数、スイープ速度、滞留する葉のそよ風はすべて変数で調整できます。
コンポジションID: canopy-part-title。30 fps、1920×1080で12秒間再生されます。
ファイル
canopy-part-title.html(57 KB)assets/leaf-surface-color.webp(64 KB)assets/leaf-surface-normal.webp(136 KB)
インストール
npx hyperframes add canopy-part-title でインストールします。デフォルトでは上記のファイルは compositions/canopy-part-title/ に配置されます。次に、ホストの index.html からブロックをマウントします：
<div
data-composition-id="canopy-part-title"
data-composition-src="compositions/canopy-part-title/canopy-part-title.html"
data-start="0"
data-duration="12"
data-track-index="1"
data-width="1920"
data-height="1080"
></div>
カスタム値でレンダリングするには、コンポジションファイルを直接指定します：
npx --yes [email protected] render 'compositions/canopy-part-title/canopy-part-title.html' --variables '{"headline1":"下層植生","headline2":"ゆっくり動く"}'
変数
ランタイムで window.__hyperframes.getVariables() を介して読み取られます。コンポジションルートに data-composition-variables（シングルクォート属性、プレーンJSON）として宣言されます。
| id | type | デフォルト | ラベル / 範囲 |
|---|---|---|---|
headline1 | string | "下層植生" | 見出し1 |
headline2 | string | "ゆっくり動く" | 見出し2 |
font | string | "Helvetica" | 見出しフォント |
fontWeight | number | 900 | フォントウェイト 100–900 ステップ 100 |
fontSize | number | 1 | フォントサイズ (1 = 自動フィット) 0.3–2 ステップ 0.01 |
letterSpacing | number | 0.01 | 文字間隔 (em) -0.2–1 ステップ 0.01 |
background | color | "#020805" | 背景 |
leafCount | number | 170 | スイープごとの葉の数 40–320 ステップ 1 |
stayCount | number | 5 | 残る葉の数 0–20 ステップ 1 |
sweepSpeed | number | 1 | スイープ速度 0.3–3 ステップ 0.05 |
retainedBreeze | number | 1 | 滞留する葉のそよ風 0–2 ステップ 0.05 |
ランタイム契約
window.__timelines["canopy-part-title"]に登録された一時停止状態のGSAPタイムラインが1つ存在します。hf-seekCustomEvent で再同期します。すべてのフレームは時間の閉形式関数です（シード付きPRNGのみ使用。rAFループなし、Date.now不使用）。- レンダラー: three.js 0.170.0、GSAP 3.14.2、Canvas 2D、ポストプロセッシング、シード付きPRNG、シャドウマップ。ライブインスタンスごとに約350 MBのメモリを消費します。一度に1つだけ実行してください。
- 外部ランタイム依存関係:
https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js、https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js、https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/postprocessing/EffectComposer.js、https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/postprocessing/RenderPass.js、https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/postprocessing/BokehPass.js。 - Google FontsからのWebフォント: Gelasio。
編集ルール（ソースプロジェクトより）
data-composition-variablesはシングルクォート属性で、プレーンな"JSON として保持してください。Studioのデザインパネルから保存しないでください。- 静的マークアップに
<canvas>を配置しないでください。ランタイムで作成します。 - すべての視覚状態をtの関数として保持してください。シーク安全性はブロックをレンダリング可能にするものです。