雰囲気と背景 · ページの空気
反応するグリッド网格感应
- 存在感
- 反応
- 抑制的
整った点のグリッドが背景に敷かれ、ポインタの近くの点が明るく少し大きくなります。押すとその位置から波紋が広がります。グリッド自体は動かず、変わるのは「ポインタとの距離」と「波が通過したか」だけなので、画面は静かなままで、反応していることが分かります。
使いどころ
「動くものの説明」をする画面に向きます。データダッシュボード、パスコード入力、ファーストビューの下地などです。本質的に背景なので、その上に別の背景エフェクトを重ねないでください。また、長いページの端から端まで敷かないでください。大きなグリッドはスクロール中に切れ目が見えて、敷き詰められていないように見えます。
パラメータ
dot pitch 26px · exp(−d²/2·62²) falloff · linear, no easing · ripple 0.36px/ms rings, life 1.3s · r 1.3→3.8px
レシピ
反応するグリッド → 1.3s linear反応するグリッド → dot pitch 26px · exp(−d²/2 · 62²) falloff · linear, no easing · ripple 0.36px/ms rings, life 1.3s · r 1.3→3.8px
AI に渡す一文
この領域にポインタへ反応する点のグリッドを敷いてください。間隔は 26px で、残りの空間の中央に置きます。各点の明るさはポインタとの距離に応じて exp(−d²/(2·62²)) で減衰し、半径は 1.3px から 3.8px へ広がります。色は明るさで強調色を混ぜて作ります。押したときはその位置から波紋を出し、「経過時間 × 0.36px/ms」の距離にある点だけを追加で明るくします。全体を一度に光らせると光の染みに見えるので、波として見えるようにしてください。波紋は 1.3 秒で消えます。