パーティクルテキスト
テキストをオフスクリーンcanvasへ描画し、ピクセルをサンプリングして粒子の目標座標にする。粒子はバネで文字の形へ帰巣し、カーソルを近づける/タップすると反発して散り、離れるとまた文字に戻る。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
仕様書
- 向く場面
- ブランド名・キャッチを粒子で見せるヒーロー
- ポインタで散る遊びのある見出し
- 短い1語のロゴタイプ演出
- 避ける場面
- 長い文（粒子数が増え重い・読めない）
- 本文の見出し（読めない時間がある）
- テキストを別に持たない唯一の表示
- 構成要素
- 暗い面（canvas）
- 粒子で描いた文字
- ポインタの反発域
- 持っている状態
- 通常
- キーボード
マウス・タッチ専用（近づけると散る）。文字の内容はテキストで別に持ち、代替操作は不要
- 支援技術
canvas は aria-hidden で文字は読めない。表示語（TEXT）は必ず見出し等のテキストでも持つ。reduce 設定では最初から文字の形に置き、粒子数と反発を半減
- 動き
粒子はバネ定数 60・減衰 8.5 で目標座標へ帰巣。ポインタ 46px 内で最大 900 の反発力で散り、離れると戻る
デザインの要点
- サンプリング間隔 3px・粒 1.5px で 800 太字を読める密度にする。間隔を広げると字が破線になる
- 帰巣はバネ定数 60・減衰 8.5 の臨界近く。減衰が弱いと文字が震え続け、強いと戻りが鈍く見える
- 反発は半径 46px・力 900 を距離で線形に弱める。一定の力だと境界で粒がはじけ飛ぶ
- document.fonts.ready 後に再サンプリングする。フォント到着前の代替字形で粒を置くと字が崩れる
実装メモ
TEXT変数の文字列を差し替えて使えます。フォント読み込み前にサンプリングすると字形が崩れるため document.fonts.ready を待ってから再サンプリングしています。
コード（コピーして使えます）
<div class="pt-wrap">
<canvas class="pt-canvas" aria-hidden="true"></canvas>
</div>