プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にプッシュ(Push)のホバーエフェクトを追加してください。
ポインターが入るたびに要素が一度すばやく小さく沈み、弾むように通常のサイズへ戻って、物理ボタンを押し込んだように見せてください。
ループさせずホバーごとに一度だけ再生し、周りのレイアウトがずれないようにしてください。似ているモーション
A
クリックしてください
Press (Button Tap Scale) (プレス)
別名 Tap feedback, Active scale, Press state
押している間は要素が少し縮み、離すと弾むように元に戻ります。
使いどころ
ボタン、カード
[適用する場所]にプレス(Press (Button Tap Scale))の効果を追加してください。タップフィードバック(tap feedback)、押下状態(press state)とも呼ばれます。
押している間は要素が少し縮んでわずかに暗くなり、離すと小さく弾みながら元のサイズに戻るようにしてください。素早く控えめに。
キーボードやタッチで押したときも同じ反応を見せ、周りのレイアウトがずれないようにしてください。A
マウスを乗せてください
ホバーすると要素が数ピクセル下がり、ページに押し込まれたように見えます。
使いどころ
ボタン
[適用する場所]にシンク(Sink)のホバーエフェクトを追加してください。
ポインターが乗っている間は要素が少し下がってそのまま留まり、ページに押し込まれたように見せ、離れたら元の位置に戻るようにしてください。なめらかに、弾まずに。
周りのレイアウトはずらさずに見た目だけを動かし、キーボードフォーカスでも同じ効果を出してください。A
マウスを乗せてください
Shrink (シュリンク)
別名 Scale Down
ポインターが乗っている間、要素がなめらかに少し縮小します。
使いどころ
ボタン、タイル
[適用する場所]にシュリンク(Shrink)のホバーエフェクトを追加してください。スケールダウン(scale down)とも呼ばれます。
ポインターが乗っている間は要素がなめらかに少し縮小し、離れたら元のサイズに戻るようにしてください。素早く控えめに。
周りのレイアウトがずれないようにし、キーボードフォーカスでも同じ効果を出してください。Hoverのほかのモーション
A
マウスを乗せてください
Radial Fill (ラジアルフィル)
別名 Circle expand
ホバーすると色付きの円が中心から広がって、または中心へ縮んで要素を塗りつぶします。
使いどころ
ボタン
[適用する場所]にラジアルフィル(Radial Fill)のホバーエフェクトを追加してください。サークルエクスパンド(circle expand)とも呼ばれます。
新しい色の円が中心から滑らかに広がって要素を塗りつぶし、ポインターが離れると中心へ縮んで戻るようにし、その間ラベルの色も読みやすいように切り替えてください。
円は要素の形の内側に収まるよう切り抜き、ラベルは円の上に置いて、キーボードフォーカス時にも同じ効果を出してください。A
マウスを乗せてください
ホバーすると要素の内側で矩形が広がったり縮んだりして、背景が切り替わります。
使いどころ
ボタン
[適用する場所]にレクタングルフィル(Rectangle Fill)のホバーエフェクトを追加してください。
内側の矩形が中心へ縮むにつれて新しい背景色が四辺から閉じるように広がり、ポインターが離れると再び開いて戻るようにし、その間ラベルの色も読みやすいように切り替えてください。滑らかで素早く。
ラベルは塗りの上に置き、キーボードフォーカス時にも同じ効果を出してください。A
マウスを乗せてください
ホバーすると要素が数度だけ回転します。
使いどころ
アイコン、サムネイル
[適用する場所]にローテート(Rotate)のホバーエフェクトを追加してください。
ポインターを乗せている間は要素が時計回りに少しだけ回転し、離れると戻るようにしてください。滑らかで控えめに。
周りのレイアウトがずれないようにし、キーボードフォーカス時にも同じ効果を出してください。