canopy-part-title

Canopy Part Title

テクスチャのある葉が密集した樹冠が、被写界深度の浅い画面を横切り、最初の見出しを覆い隠してから現します。続いて、奥行きを強調した2つ目の葉の群れが、2つ目の見出しを運びながらカメラの前を通過します。数枚の葉は文字の上に残り、そよ風に揺れ続けます。フォント、ウェイト、サイズ、文字間隔、葉の枚数、通過速度、残った葉のそよ風は変数として設定できます。

Composition id：canopy-part-title。長さは12 s、30 fps、1920×1080です。

ファイル

• 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":"Understory","headline2":"Move slowly"}'

変数

window.__hyperframes.getVariables() で実行時に読み取ります。コンポジションのルートに data-composition-variables（単一引用符で囲まれた属性、プレーンな JSON）として宣言します。

id	type	default	label / range
headline1	string	"Understory"	見出し1
headline2	string	"Move slowly"	見出し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	1回の通過あたりの葉の枚数 40–320、増分1
stayCount	number	5	残す葉の枚数 0–20、増分1
sweepSpeed	number	1	通過速度 0.3–3、増分0.05
retainedBreeze	number	1	残った葉のそよ風 0–2、増分0.05

実行時の仕様

• 一時停止状態のGSAPタイムラインを1つ、window.__timelines["canopy-part-title"] に登録します。
• hf-seek CustomEvent に応じて再同期します。各フレームは時間の閉形式関数であり、シード付きPRNGのみを使用します（rAFループやDate.nowは使用しません）。
• レンダラー：three.js 0.170.0、GSAP 3.14.2、Canvas 2D、ポストプロセッシング、シード付きPRNG、シャドウマップ。実行中のインスタンス1つあたり、およそ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 のウェブフォント：Gelasio。

編集ルール（元のプロジェクトに基づく）

1. data-composition-variables はプレーンな " の JSON を含む単一引用符付き属性にしてください。Studio の Design パネルから保存しないでください。
2. 静的マークアップに <canvas> を入れないでください。実行時に作成します。
3. すべての視覚状態を t の関数にしてください。シークの安全性が、このブロックをレンダリング可能にする要件です。