プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にカードスポットライト(Card Spotlight)のエフェクトを追加してください。スポットライトホバー(spotlight hover)、ポインターグロー(pointer glow)、マウス追従グロー(mouse-following glow)、ラジアルグラデーションホバー(radial gradient hover)とも呼ばれます。
やわらかくほのかな放射状の光がポインターを追ってカードの表面を移動し、ポインターが入ったらフェードイン、離れたらフェードアウトするようにしてください。
文字が読みやすいよう光はカードの内容の背後に置き、タッチデバイスではカードを光らせないでください。似ているモーション
- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
ポインターを動かしてください
Cursor Spotlight (カーソルスポットライト)
別名 Flashlight cursor, Spotlight effect
ポインターの周りの光の円がコンテンツを照らし出し、それ以外は暗いままです。
使いどころ
ヒーローセクション、リビール演出
[適用する場所]にカーソルスポットライト(Cursor Spotlight)の効果を追加してください。懐中電灯カーソル(flashlight cursor)、スポットライト効果(spotlight effect)とも呼ばれます。
やわらかな光の円がポインターを追いかけてその下のコンテンツを照らし出し、それ以外の部分は暗くしたままにしてください。
追いかけるポインターがないタッチデバイスでは、代わりにコンテンツ全体を明るく表示してください。A
ポインターを動かしてください
Glare / Holographic Card (グレア/ホログラフィックカード)
別名 Glare hover, Glare card, Magic card, Glare
明るいハイライトが反射光のようにポインターを追ってカードの表面を動きます。
使いどころ
プレミアムカード、コレクションカード
[適用する場所]にグレア/ホログラフィックカード(Glare / Holographic Card)エフェクトを追加してください。グレアカード(glare card)、グレアホバー(glare hover)とも呼ばれます。
やわらかく明るいハイライトが、光の反射のようにポインターを追ってカードの表面を動き、カードはポインターの方へわずかに傾くようにしてください。ポインターが離れたらどちらも消えます。なめらかで控えめに。
クリックは光のレイヤーを通り抜けるようにし、その下のコンテンツは読みやすく保ち、タッチ端末では光なしでカードを表示してください。ABCDEFGHIJKL
ポインターを動かしてください
Text Reveal Card (テキストリビールカード)
別名 Spotlight Text Reveal
カード上でポインターを動かすと、マスクの境界やスポットライトの下に隠れたテキストが現れます。
使いどころ
機能紹介カード
[適用する場所]にテキストリビールカード(Text Reveal Card)エフェクトを追加してください。スポットライトテキストリビール(spotlight text reveal)とも呼ばれます。
ポインターがカード上を動くと、縦の境界線がぴったり追従して片側に隠れたテキストを見せるようにしてください。遅れのない、なめらかで直接的な動きにしてください。
ポインターのないタッチデバイスではドラッグやタップで隠れたテキストが見えるようにし、隠れたテキストもスクリーンリーダーで読めるようにしてください。Spotlight (スポットライト)
別名 Spotlight sweep, Light cone
柔らかな光の円錐や光だまりがすっと入ってきて、背景の一部を照らします。
使いどころ
ヒーロー見出し
[適用する場所]にスポットライト(Spotlight)のエフェクトを追加してください。スポットライトスイープ(spotlight sweep)、ライトコーン(light cone)とも呼ばれます。
ページが読み込まれたら、柔らかな光の円錐が角から斜めに差し込み、見出しの上で止まって、届くにつれて明るくなるようにしてください。ゆっくりなめらかに。
再生は一度だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は最初から光が当たった状態で表示してください。Hoverのほかのモーション
A
マウスを乗せてください
Curl (カール)
別名 Page curl
ホバーすると、要素の角がページをめくるようにめくれ上がります。
使いどころ
カード、メモ
[適用する場所]にカール(Curl)のホバーエフェクトを追加してください。ページカール(page curl)とも呼ばれます。
要素の角がページをめくるようになめらかにめくれ上がって折り返しの裏側を見せ、ポインターが離れたら平らに戻るようにしてください。
重要な内容を隠さないよう折り返しは小さくし、キーボードフォーカスでも同じ効果を出してください。A
B
ポインターを動かしてください
Direction Aware Hover (ディレクションアウェアホバー)
別名 Direction-aware overlay
ポインターが入ってきた側からオーバーレイがスライドインし、出ていく側へ抜けていきます。
使いどころ
画像ギャラリー、ポートフォリオグリッド
[適用する場所]にディレクションアウェアホバー(Direction Aware Hover)のエフェクトを追加してください。方向感知オーバーレイ(direction-aware overlay)とも呼ばれます。
ポインターが入ってきた側からオーバーレイがスライドインし、出ていく側へスライドアウトするようにしてください。素早く、なめらかに。
入るときと出るときのポインター位置から方向を判定し、タッチやキーボードフォーカスでは決まった一方向を使ってください。ABCDE
ポインターを動かしてください
Dock Magnification (ドック拡大)
別名 Dock
macOS の Dock のように、ポインターが近づくと並んだアイコンがなめらかに大きくなります。
使いどころ
アイコンツールバー、ナビゲーション
[適用する場所]にドック拡大(Dock Magnification)のエフェクトを追加してください。ドック(dock)とも呼ばれます。
ポインターが近づくにつれて並んだアイコンがなめらかに大きくなり、いちばん近いアイコンが最大、その両隣も少し大きくなり、ポインターが離れたらすべて通常サイズに戻るようにしてください。
アイコンは固定のベースラインから上方向に大きくし、タッチやキーボードでは通常サイズのまま操作できるようにしてください。