ジェネラティブ演出
パーティクルテキスト
テキストをオフスクリーンcanvasへ描画し、ピクセルをサンプリングして粒子の目標座標にする。粒子はバネで文字の形へ帰巣し、カーソルを近づける/タップすると反発して散り、離れるとまた文字に戻る。
プレビュー
ホバー
操作カーソルを乗せると動きます(スマホはタップ)。
実装メモ
TEXT変数の文字列を差し替えて使えます。フォント読み込み前にサンプリングすると字形が崩れるため document.fonts.ready を待ってから再サンプリングしています。
コード(コピーして使えます)
<div class="pt-wrap">
<canvas class="pt-canvas" aria-hidden="true"></canvas>
</div>