パーティクル演出
Canvas 2D で粒子が漂い、近い粒子同士を線でつなぐネットワーク表現。マウス・タッチに反応して粒子が引き寄せられ、線が伸びる。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
仕様書
- 向く場面
- テック・データ系サービスのヒーロー背景
- つながり・ネットワークを示す演出面
- ポインタに反応する暗色の背景
- 避ける場面
- 本文の背景（線が文字に重なる）
- 明るい配色のサイト
- 多数の画面で同時に描画する
- 構成要素
- 暗い面（canvas）
- 粒子
- 接続線
- ポインタの点
- 持っている状態
- 通常
- キーボード
マウス・タッチ専用（ポインタへ粒子が集まる）。装飾で代替操作は不要
- 支援技術
canvas は aria-hidden の装飾。reduce 設定では1枚描いて rAF を止め、ポインタが動いたときだけ描き直す。visibilitychange で停止
- 動き
55粒子が 0.2〜0.5px/frame で漂い 80px 以内を線で結ぶ。ポインタ 90px 内へ引力。寿命 240〜600frame でフェードし端から再生成
デザインの要点
- 線の濃さは距離（80px）と両端の粒子の alpha の積。寿命で消える粒子の線が先に残ると糸だけが浮く
- 粒子は寿命 240〜600 frame で端から作り直す。引力だけだと全部がポインタに集まって止まる
- ポインタが無い間は仮想カーソルを楕円軌道で回す。静止した網は「反応しないもの」に見える
- 粒子数 55 は O(n²) の線判定が 1,485 組で収まる数。増やすなら空間分割が要る
コード（コピーして使えます）
<div class="pn-wrap">
<canvas class="pn-canvas" aria-hidden="true"></canvas>
</div>