スタガーの波（距離順）
グリッドのどこかを押すと、押した位置からの距離に比例した遅延で周りのタイルが順に膨らみ、波紋のように広がる。一方向のスタガーとの違いは「起点が操作位置」なこと。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 押した位置から反応が広がるグリッド・盤面
- 操作位置と反応を結びつけたい確認演出
- 一方向スタガーとの違いを見せる教材
- 避ける場面
- 入力のたびに動くフォームや表
- 連続操作が前提の一覧（波が邪魔になる）
- 構成要素
- 8×4 のタイル
- 起点タイル（青）
- 波紋
- 起点と反応時刻の読み上げ文
- 持っている状態
- 通常
- フォーカス
- キーボード
Tab で各タイルへ移動、Enter／Space で押した位置から波が広がる
- 支援技術
グリッドは role=group＋aria-label、各タイルは button＋aria-label「タイル N」。起点座標と最遠タイルの反応時刻を文で併記。reduced-motion では波を出さず起点色だけ変える
- 動き
各タイル 520ms・遅延＝起点からの距離×45ms・ease-out(.16,1,.3,1)。遠いほど小さく膨らむ。前の波は捨てて新しい波を優先
デザインの要点
- 遅延は index 順でなく「起点からの距離 × 単位時間」で計算する。押した場所から広がるので、操作と反応が結びつく
- 1 タイルの動きは 400ms 程度でも、遅延の合計で全体は 1 秒近くになる。遠いタイルほど淡く小さくして、待たせない
- 波は「押した確認」の演出なので、ボタン連打で重ねてもキューに溜めない。前の波は途中で捨てて新しい波を優先する
コード（コピーして使えます）
<div class="sw-wrap">
<div class="sw-grid" id="swGrid" role="group" aria-label="タイルを押すと波が広がる"></div>
<p class="sw-read" id="swRead">どこかのタイルを押してください</p>
</div>