キャノピー・パート・タイトル
テクスチャ付きの葉の密なキャノピーが浅い被写界深度でフレームを横切り、その後、最初の見出しを露わにするために開きます。2番目の奥行きを持った葉の群れが2番目の見出しをカメラの前を通り過ぎて運びます。数枚の葉がタイプの上に留まり、微風を保ちます。フォント、太さ、サイズ、字間、葉の数、スイープ速度、および残る葉の風量は変数として設定できます。
コンポジションID: canopy-part-title。 30 fpsで12秒、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 | ラベル / 範囲 |
|---|---|---|---|
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 | スイープあたりの葉の数 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タイムラインが
window.__timelines["canopy-part-title"]として登録されます。 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 の関数として維持してください。シークセーフであることがブロックをレンダリング可能にするものです。