プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にテキストマーカー(Text Highlighter)エフェクトを追加してください。ハイライトマーカー(highlight marker)、マーカーアンダーライン(marker underline)とも呼ばれます。
マーカーのような色の帯が、ペンで線を引くようにキーフレーズの背後を左から右へなめらかに走るようにしてください。
フレーズがスクロールで画面に入ったときに一度だけ再生し、帯の上でもテキストが読みやすいようにし、フレーズが2行に折り返しても帯が正しく追従するようにしてください。似ているモーション
中をスクロールしてください
テキストがスクロールで画面に入ると、ポインターの矢印が単語の周りにハイライトの枠を描きます。
使いどころ
見出し、マーケティングコピー
[適用する場所]にポインターハイライト(Pointer Highlight)の効果を追加してください。
テキストがスクロールで画面に入ったら、キーワードの周りに左から右へ枠が描かれ、小さなポインターの矢印がその角に沿って動くようにしてください。なめらかで一定の速さで、誰かが手で単語に印をつけているような感じです。
最初に画面に入ったときに一度だけ、テキストをずらさずに描き、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は完成した枠をすぐに表示してください。ABC DEF
マウスを乗せてください
Underline Draw (アンダーラインドロー)
別名 Animated Underline, Hover Underline Animation, Underline Stretch, Underline Grow, Underline Slide, Underline From Left
ホバーすると、リンクの下に片側または中央から下線が伸びます。
使いどころ
ナビゲーションリンク、インラインリンク
[適用する場所]にアンダーラインドロー(Underline Draw)のホバーエフェクトを追加してください。アニメーション下線(animated underline)、ホバー下線アニメーション(hover underline animation)とも呼ばれます。
ポインターがリンクに乗ると、テキストの下に下線が左から右へなめらかに伸び、ポインターが離れると縮んで戻るようにしてください。素早く控えめな動きにしてください。
下線で周囲のレイアウトがずれないようにし、キーボードフォーカス時にも同じ効果を表示してください。ABC
マウスを乗せてください
Underline Reveal (アンダーラインリビール)
別名 Overline Reveal, Reveal
線が下端または上端からスライドして定位置に収まり、要素に下線または上線を引きます。
使いどころ
ナビゲーションリンク、ボタン
[適用する場所]にアンダーラインリビール(Underline Reveal)のホバーエフェクトを追加してください。オーバーラインリビール(overline reveal)、リビール(reveal)とも呼ばれます。
ポインターが要素に乗っている間は、全幅の線が下端のすぐ下から上へスライドして定位置に収まり、離れたら下へスライドして見えなくなるようにしてください。素早くなめらかに。
線は縁で切り取り、フェードや伸びではなくスライドで現れるようにし、キーボードフォーカスでも同じ効果を出してください。Textのほかのモーション
ABCDABCD
マウスを乗せてください
Text Hover Effect (テキストホバーエフェクト)
別名 Gradient Outline Text Hover, Text Fill on Hover
アウトラインの単語が、ポインターを追うかその上を横切るグラデーションで塗られたり照らされたりします。
使いどころ
大きなディスプレイ文字、フッター
[適用する場所]にテキストホバーエフェクト(Text Hover Effect)を追加してください。ホバーでのテキスト塗り(text fill on hover)、グラデーションアウトラインのテキストホバー(gradient outline text hover)とも呼ばれます。
単語は最初アウトラインだけで表示し、ポインターが乗っている間はベタ塗りが左から右へなめらかに広がり、ポインターが離れると引いていくようにしてください。
塗られる前のアウトラインの単語も読みやすく保ち、キーボードフォーカス時にも同じ効果を表示してください。中をスクロールしてください
Text Path Scroll (テキストパススクロール)
別名 Text Path Curve Scroll Animation
テキストが曲線のパスに沿って配置され、スクロールに合わせてその上を進みます。
使いどころ
ストーリーテリングのセクション
[適用する場所]にテキストパススクロール(Text Path Scroll)エフェクトを追加してください。テキストパスカーブスクロールアニメーション(text path curve scroll animation)とも呼ばれます。
テキストが曲線の上に乗り、スクロールに合わせてその上をすべるように動かしてください。下へスクロールすると進み、上へスクロールすると戻ります。
動きは遅れなくスクロール位置に直接連動させ、スクリーンリーダーには通常のテキストとして読めるようにしてください。ABCABCABCABCABC
中をスクロールしてください
Text Repetition (テキストリピティション)
別名 Repeated Text Scroll
単語が何枚も重なったコピーに複製され、スクロールに合わせてずれていきます。
使いどころ
ポートフォリオのタイトル
[適用する場所]にテキストリピティション(Text Repetition)エフェクトを追加してください。リピートテキストスクロール(repeated text scroll)とも呼ばれます。
単語を薄いアウトラインのコピーに重ねて複製し、スクロールに合わせて背後から広がり、上へスクロールすると元に重なるようにしてください。
広がりはスクロール位置に直接連動させ、余分なコピーはスクリーンリーダーから隠して単語が一度だけ読まれるようにしてください。