プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にレタースキャッター(Letter Scatter)のホバー効果を追加してください。スキャッターギャザーレター(scatter gather letters)、エクスプローシブレターバースト(explosive letter burst)とも呼ばれます。
ポインターが文字に乗ると、各文字が少し回転しながらそれぞれの方向へ少し飛び出し、ポインターが離れたらなめらかに集まって元の単語に戻るようにしてください。
文字が動く間も単語のレイアウト上の領域は固定し、スクリーンリーダーには1つの単語として読ませ、キーボードフォーカス時にも同じ効果を出してください。似ているモーション
ABCDEF
Split Text Stagger (スプリットテキストスタッガー)
別名 Letter Stagger, Staggered Text Reveal, SplitText, Splitting.js text
見出しを文字・単語・行に分割し、少しずつ時間をずらして順番にアニメーションさせます。
使いどころ
見出し、セクションタイトル
[適用する場所]にスプリットテキストスタッガー(Split Text Stagger)の登場エフェクトを追加してください。レタースタッガー(letter stagger)、スタッガードテキストリビール(staggered text reveal)とも呼ばれます。
見出しを1文字ずつに分割し、少しずつ時間をずらして順番に浮き上がりながらフェードインさせ、素早くなめらかに、弾まないようにしてください。
見出しが画面に入ったときに一度だけ再生し、スクリーンリーダーにはひとつの単語として読ませ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしで表示してください。A
クリックしてください
Confetti (紙吹雪)
別名 Confetti burst, Celebration
色とりどりの紙片がはじけ出て舞い落ち、成功を祝います。
使いどころ
購入完了、目標達成
[適用する場所]に紙吹雪(Confetti)のお祝い演出を追加してください。コンフェッティバースト(confetti burst)とも呼ばれます。
色とりどりの小さな紙片がボタンから素早くはじけ出て、くるくる回りながらふわりと舞い落ち、消えていくようにしてください。短く賑やかに。
ループさせず成功ごとに一度だけ発動し、ページのクリックを妨げないようにして、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は表示しないでください。ABCD
Tracking In (トラッキングイン)
別名 Text Tracking In, Letter-spacing In
文字が大きく間隔を空けた薄い状態から始まり、現れながら通常の字間に詰まっていきます。
使いどころ
見出しテキストの登場
[適用する場所]にトラッキングイン(Tracking In)のテキストアニメーションを追加してください。text tracking in、letter-spacing in とも呼ばれます。
文字が大きく間隔を空けた薄い状態から始まり、完全に見えるようになりながら通常の字間まで詰まっていくようにしてください。なめらかに、最後は減速させてください。
字間が変わる間もテキストを中央揃えの1行に保って周りのレイアウトがずれないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は通常の字間で表示してください。Textのほかのモーション
ABCDEFABCDEF
Line Shadow Text (ラインシャドウテキスト)
別名 Text Shadow Animation, Dancing Shadow
文字の背後にある縞模様やずらした影が、一方向に動きます。
使いどころ
インパクトのある大見出し
[適用する場所]にラインシャドウテキスト(Line Shadow Text)の効果を追加してください。テキストシャドウアニメーション(text shadow animation)、ダンシングシャドウ(dancing shadow)とも呼ばれます。
文字の背後で、細い斜めストライプでできたずらした影がゆっくり途切れなくスライドし、文字自体は動かずくっきりしたままにしてください。
ストライプの動きはつなぎ目なくループさせ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は影を止めてください。Liquid Fill Text (リキッドフィルテキスト)
別名 Water Fill Text
文字の中に、波打ちながら水位が上がる液体が満ちていきます。
使いどころ
ローディング表示、遊び心のあるタイトル
[適用する場所]にリキッドフィルテキスト(Liquid Fill Text)の効果を追加してください。ウォーターフィルテキスト(water fill text)とも呼ばれます。
輪郭だけの文字に液体が満ち、波打つ水面が横へ流れながら水位がゆっくり上下する、やわらかく途切れないループにしてください。
スクリーンリーダー向けに単語は実際のテキストとして残し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は液体を一定の水位で止めてください。ABCD EFGHI JKLM
Mask Reveal (マスクリビール)
別名 Line Mask Reveal, Split Text Overflow Hidden Reveal, Text Masking
テキストが見えない境界線の裏から滑り上がり、何もないところから現れるように見えます。
使いどころ
エディトリアルな見出し
[適用する場所]にマスクリビール(Mask Reveal)のテキスト登場エフェクトを追加してください。ラインマスクリビール(line mask reveal)、テキストマスキング(text masking)とも呼ばれます。
各行が見えない境界線の裏から滑り上がり、何もないところから現れるように、1行ずつ順番に、素早くなめらかに、弾まずに表示されるようにしてください。
テキストがスクロールで画面に入ったときに一度だけ再生し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしですぐに表示してください。