ジェネラティブ背景グリッド
格子状のドットが位置ごとに位相をずらしたsin波でゆっくり明滅・拡縮する、静かに動き続けるヒーロー背景。カーソルを近づけると周囲のドットがわずかに明るくなる。
プレビュー
自動再生
操作自動で再生されます。
仕様書
- 向く場面
- テック・SaaS のヒーロー背景
- 静かに動き続ける演出面
- 見出しの下に敷く暗色の面
- 避ける場面
- 長文の背景（明滅が読書を妨げる）
- 明るい配色のサイト
- 多数の画面で同時に描画する
- 構成要素
- 暗い面（canvas）
- ドット格子
- 見出し
- サブテキスト
- 持っている状態
- 通常
- キーボード
操作要素なし（背景）。上のテキストは pointer-events none で canvas がポインタを拾う。フォーカスすべき要素は別に置く
- 支援技術
canvas は aria-hidden の装飾。見出しは通常テキスト。reduce 設定では時間を止めて1枚絵にする（最も強い抑制）。visibilitychange で停止
- 動き
22px 格子のドットが位置ごとの位相で sin 明滅・拡縮（周期約 5.7s）。ポインタ 70px 内で明るく大きくなる
デザインの要点
- 位相は col·0.5＋row·0.5 で斜めに揃える。乱数位相だとノイズ、行だけだと縞になり、斜めが波に見える
- 明滅は alpha 0.14〜0.48・半径 1.1〜2.7px の狭い幅。振幅が大きいと背景なのに視線を奪う
- 上のテキストは pointer-events none にして canvas がポインタを拾う。見出しの下でも反応が途切れない
- reduce 設定では時間を 0 に固定した1枚絵を描いて止める。背景の連続ループは止めても意味を失わない
実装メモ
ヒーローセクションの背景に敷いて、上に見出しなどのテキストを重ねて使います。.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>