プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にインタラクティブホバーボタン(Interactive Hover Button)のエフェクトを追加してください。
ラベル横の小さな点が広がってボタン全体を塗りつぶし、その間にラベルは横へスライドしながらフェードアウトし、矢印付きのラベルが新しい塗りの上にスライドして入ってくるようにしてください。滑らかで素早く。
ボタンのサイズは固定し、ラベルが常に読めるようにして、キーボードフォーカス時にも同じ効果を出してください。似ているモーション
AB
マウスを乗せてください
アイコンがボタンから漂うように抜けて消え、新しいアイコンがふわりと入ってきます。
使いどころ
アイコンボタン
[適用する場所]にアイコンフロートアウェイ(Icon Float Away)のホバーエフェクトを追加してください。
今のアイコンが上へ漂いながらフェードアウトし、新しいアイコンが下からふわりと浮かんでその位置に入るよう滑らかに切り替え、ポインターが離れたら逆の動きで戻してください。
切り替え中もボタンのサイズは固定し、キーボードフォーカス時にも同じ効果を出してください。A
B
ポインターを動かしてください
Direction Aware Hover (ディレクションアウェアホバー)
別名 Direction-aware overlay
ポインターが入ってきた側からオーバーレイがスライドインし、出ていく側へ抜けていきます。
使いどころ
画像ギャラリー、ポートフォリオグリッド
[適用する場所]にディレクションアウェアホバー(Direction Aware Hover)のエフェクトを追加してください。方向感知オーバーレイ(direction-aware overlay)とも呼ばれます。
ポインターが入ってきた側からオーバーレイがスライドインし、出ていく側へスライドアウトするようにしてください。素早く、なめらかに。
入るときと出るときのポインター位置から方向を判定し、タッチやキーボードフォーカスでは決まった一方向を使ってください。マウスを乗せてください
Nudge Forward / Backward (ナッジフォワード/バックワード)
別名 Arrow nudge
ホバーすると矢印や要素そのものが数ピクセルだけ前後にずれます。
使いどころ
次へ・戻るリンク、矢印
[適用する場所]にナッジフォワード/バックワード(Nudge Forward / Backward)のホバーエフェクトを追加してください。アローナッジ(arrow nudge)とも呼ばれます。
ポインターを乗せている間は矢印が指す方向へ少しスライドし、離れると戻るようにしてください。素早く小さく。
動かすのは矢印だけにしてラベルやレイアウトはずらさず、キーボードフォーカス時にも同じ効果を出してください。A
マウスを乗せてください
Background Sweep (背景スイープ)
別名 Background Fill, Slide Fill
ホバーすると、色付きの背景が片方の端から要素全体をなぞるように広がります。
使いどころ
ボタン、メニューリンク
[適用する場所]に背景スイープ(Background Sweep)のホバーエフェクトを追加してください。バックグラウンドフィル(background fill)、スライドフィル(slide fill)とも呼ばれます。
新しい背景色が左端から右端へ、弾まずになめらかに素早く広がり、ポインターが離れたら同じように引いていくようにしてください。文字色は読みやすさを保つように切り替えます。
塗りは要素の形の内側に収め、キーボードフォーカスでも同じ効果を出してください。Hoverのほかのモーション
A
マウスを乗せてください
ホバーするとアウトラインが要素から外へ広がったり、要素に向かって縮んだりします。
使いどころ
ボタン
[適用する場所]にアウトラインエクスパンド(Outline Expand)のホバーエフェクトを追加してください。
アウトラインが要素の縁にぴったり沿った状態から外側へ広がって周りに小さなすき間を作り、ホバー中はそのまま保ち、ポインターが離れたら閉じて戻るようにしてください。滑らかで素早く。
アウトラインは要素のサイズを変えず周りのコンテンツも押し出さない方法で描き、キーボードフォーカス時にも同じ効果を出してください。ABC
マウスを乗せてください
ホバーするとテキストの上に線が左・中央・右から伸びます。
使いどころ
ナビゲーションリンク、タブ
[適用する場所]にオーバーライングロウ(Overline Grow)のホバーエフェクトを追加してください。
ポインターを乗せている間はテキストの上の線が中央から左右へ伸び、離れると中央へ縮んで戻るようにしてください。素早く滑らかに。
テキストがずれないよう線の分のスペースをあらかじめ確保し、キーボードフォーカス時にも同じ効果を出してください。