ジェネラティブ演出
ジェネラティブ背景グリッド
格子状のドットが位置ごとに位相をずらしたsin波でゆっくり明滅・拡縮する、静かに動き続けるヒーロー背景。カーソルを近づけると周囲のドットがわずかに明るくなる。
プレビュー
自動再生
操作自動で再生されます。
実装メモ
ヒーローセクションの背景に敷いて、上に見出しなどのテキストを重ねて使います。.gg-content は pointer-events:none にしてあるので、テキストの下でも canvas がポインタ位置を拾えます。
コード（コピーして使えます）
<div class="gg-wrap">
<canvas class="gg-canvas" aria-hidden="true"></canvas>
<div class="gg-content">
<p class="gg-title">Generative Grid</p>
<p class="gg-sub">ゆらぐドットフィールドのヒーロー背景</p>
</div>
</div>