Dot Grid Wave
ドットグリッドウェーブ
Generation Prompt
【対象要素】 - セクションの背景やアクセントとして置くドットグリッドに適用する 【演出内容】 - 格子状に並んだドットが、斜め方向に波が通り抜けるように順番に拡大・縮小し続ける 【品質要件】 - 遅延を「行+列」の値で決めると波が斜めに流れる - ドットの拡大は2.5倍まで。波の周期は2〜3秒にする - ループの継ぎ目が分からないよう、終了時の状態と開始時の状態を完全に一致させる - prefers-reduced-motion 時はアニメーションを止め、静止した完成状態で表示する
[Target] - A dot grid used as background or accent [Motion] - A wave travels diagonally through the grid: dots scale up and down in order [Quality] - Set each dot's delay from (row + column) to make the wave diagonal - Scale up to ~2.5x; wave period 2–3s - Make the loop seamless: the end state must match the start state exactly - With prefers-reduced-motion, stop the animation and show a static finished state
Prompts and demo code are free to use in your own projects. See About.