ambient-section-particles

セクション内のパーティクル

パーティクルはページ全体のスクリーンセーバーではなく、範囲を限定した雰囲気づくりのレイヤーとして構築します。コンテンツを主役にし、エフェクトが見えないときは処理を停止します。

レンダラーを選ぶ

• 小さなパーティクルが約40個以上ある場合、動きが頻繁な場合、ポインターの力を加える場合、または単純なプロシージャルシェイプを使う場合は、canvasを使用します。
• 個別のスタイルやセマンティックラベルが必要な、ブランドを表現する少数のパーツには、DOMまたはインラインSVGを使用します。
• 数千個のパーティクル、奥行き、シェーダー、または実際の3D動作が必要な場合に限り、WebGLを使用します。デバイスのピクセル比を制限し、静的なフォールバックを用意します。

望ましい形状表現を保てる中で、最も負荷の低いレンダラーから始めます。

設定を1つにまとめる

const particles = {
  count: 54,
  gravity: 7,
  wind: -3,
  sway: 16,
  speed: [8, 18],
  size: [4, 12],
  opacity: [0.18, 0.62],
  rotation: [-0.8, 0.8],
  mode: "recycle",
  pointerRadius: 110,
  maxDpr: 2
};

密度はコンテナの面積に応じて調整し、モバイル端末や低電力デバイス向けに上限と下限を設定します。ビューポート幅だけから個数を算出しないでください。

セクションにレイヤーを配置する

1. セクションに配置コンテキストを設定し、パーティクルを範囲内に収める場合はオーバーフローをクリップします。
2. パーティクルのサーフェスをコンテンツの背後、背景の前面に配置します。
3. レイヤーにpointer-events: noneを設定し、セクションでポインターの動きを監視します。
4. 静かなコンテンツ領域を確保するか、長いテキストやコントロールの背後では密度を下げます。
5. コントロールとリンクは、フォーカスが見える状態で通常のDOMスタッキングに保ちます。

シミュレーションを実行する

• コンテナの境界内、または境界の少し上にパーティクルを配置します。
• 経過時間に基づいて、重力、風、位相に応じた揺れ、回転、不透明度、位置を更新します。
• 背景タブの表示後やフレーム停止後に発生する、大きな時間差分に上限を設定します。
• レイヤー全体で1つのrequestAnimationFrameループを使用します。
• ResizeObserverでサイズを変更し、canvasのバッキング解像度をmin(devicePixelRatio, maxDpr)以下に制限します。
• ポインターによる乱れを加える場合は、距離に応じた小さな力を適用し、パーティクルが自然に元の状態に戻るようにします。パーティクルごとにリスナーを登録しないでください。

次の終了モードを明示的にサポートします。

• recycle：パーティクルがセクション外に出た後、セクションの上方に戻します。
• exit：パーティクルが境界の外に出たら削除します。
• settle：高さに厳密な上限を設け、浅い視覚的な山に落ち着かせます。
• static：決定論的な静止構図を描画します。

見えない処理を停止する

IntersectionObserverを使用して、セクションが表示されている場合にのみ開始します。セクションが画面外に出るか、document.hiddenがtrueになったらアニメーションフレームをキャンセルします。2つ目のループを起動せず、現在のシミュレーション状態から再開します。

破棄時には、オブザーバーの切断、サイズ変更およびポインターのリスナーの削除、フレームのキャンセル、レンダラーリソースの解放を行います。

読者に配慮する

• prefers-reduced-motion: reduceの場合は、まばらな静的配置を描画するか、レイヤーを削除します。
• パーティクルは装飾要素として扱い、支援技術から隠します。
• 不透明度とコントラストを調整し、動きが可読性のしきい値を下回らないようにします。
• 画面全体に及ぶポインター反発、急激な方向転換、点滅、フォームコントロール上を横切る大きなオブジェクトは避けます。
• モーダルやセクション内の重要なタスクに注意が向けられている間、装飾的な動きが妨げになる場合は一時停止します。

検証する

表示開始時と終了時の一時停止、背景タブからの復帰、高速なサイズ変更、幅390／768／1440、デバイスのピクセル比、ポインターとタッチ入力、動きを減らす設定、セクションのオーバーフロー、コンテンツへのフォーカス、長文、ルートのクリーンアップ、コンソールエラーをテストします。マウントを繰り返してもアニメーションループが1つだけ残ることを確認します。

実装のリファレンスにはdemo/index.htmlを使用し、再作成やリミックスにはdemo/PROMPT.mdを使用します。REFERENCES.mdはリンクのみの実装ソース一覧として保ちます。