プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にワードローテート(Word Rotate)エフェクトを追加してください。ローテーティングワード(rotating words)、フリップワード(flip words)とも呼ばれます。
行の中の一語が上へすべって消え、リストの次の単語が下から入ってくるようにし、次の切り替えの前に各単語で少し止めてください。
単語の幅が違っても行の残りが跳ねないようにし、スクリーンリーダーに毎回の切り替えを読み上げさせず、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は切り替えを止めてください。似ているモーション
AWBXCYDZ
Text Replacement (テキストリプレイスメント)
別名 Text Swap
既存のテキストがアニメーションで消え、新しいテキストに置き換わります。
使いどころ
切り替わるラベル
[適用する場所]にテキストリプレイスメント(Text Replacement)エフェクトを追加してください。テキストスワップ(text swap)とも呼ばれます。
テキストが変わるとき、古い文字は上へすべって消え、新しい文字は下から入ってくるように、1文字ずつ素早くなめらかな波のように切り替えてください。
切り替え中にテキストボックスのサイズが急に変わらないようにし、スクリーンリーダーには新しいテキストだけを読み上げさせてください。ABCDEFGHI
Morphing Text (モーフィングテキスト)
別名 Text Morph
ひとつの単語がぼやけながら、同じ位置で次の単語へ溶け込むように変わります。
使いどころ
ヒーローエリアのキャッチコピー
[適用する場所]にモーフィングテキスト(Morphing Text)のエフェクトを追加してください。テキストモーフ(text morph)とも呼ばれます。
ひとつの単語が同じ位置でぼやけ、とろりと柔らかく混ざり合いながら次の単語へ溶け込み、次に切り替わる前に少し静止するようにしてください。
単語を途切れなく順に切り替え、スクリーンリーダーには通常のテキストとして読ませ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は切り替えを止めてください。AGBHCIDJEKFL
マウスを乗せてください
Text 3D Flip (テキスト3Dフリップ)
別名 3D Flip Text Reveal
文字や単語が軸を中心に3D回転し、裏側にある次のテキストを見せます。
使いどころ
ホバーリンク、見出し
[適用する場所]にテキスト3Dフリップ(Text 3D Flip)のホバーエフェクトを追加してください。3Dフリップテキストリビール(3D flip text reveal)とも呼ばれます。
ポインターがテキストに乗ると、各文字が横軸を中心に3Dで回転して裏側の新しい文字を見せ、1文字ずつ素早くなめらかに流れるように切り替わり、ポインターが離れたら元に戻るようにしてください。
回転中もテキストボックスの大きさは変えず、キーボードフォーカスでも同じエフェクトを表示してください。0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9,0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
90
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
90
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
Odometer (オドメーター)
別名 Rolling Numbers, Animated Number, AnimateNumber, Slot-Machine Digits
数値が変わると、各桁が縦に回転して新しい値になります。
使いどころ
リアルタイムカウンター、価格表示
[適用する場所]にオドメーター(Odometer)の数字アニメーションを追加してください。ローリングナンバー(rolling numbers)、スロットマシン数字(slot-machine digits)とも呼ばれます。
値が変わったら、各桁が常に前方向へ縦に回転して新しい数字になり、桁ごとに少し時間差をつけ、最後に小さく落ち着くようにしてください。
数値全体がずれないようすべての桁を同じ幅にし、スクリーンリーダーには最終値だけを伝えてください。Textのほかのモーション
ABCDEF
Animated Gradient Text (グラデーションテキストアニメーション)
別名 Aurora Text, Rainbow Text Sweep, Gradient Text Color Wave
グラデーションで塗られたテキストの色が、絶えず移り変わったり流れたりします。
使いどころ
ブランドの見出し
[適用する場所]にグラデーションテキストアニメーション(Animated Gradient Text)の効果を追加してください。オーロラテキスト(aurora text)、レインボーテキストスイープ(rainbow text sweep)とも呼ばれます。
文字をグラデーションで塗り、その色がテキスト上をゆっくりなめらかに流れ、つなぎ目なく無限にループするようにしてください。
背景に対してどの瞬間も文字が読みやすいようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は色を止めてください。ABCDEF
マウスを乗せてください
Glitch Text (グリッチテキスト)
別名 Text Glitch, RGB Split Glitch
テキストが壊れた信号のように、スライスのずれや赤とシアンの色ずれを伴って震えます。
使いどころ
サイバーパンク風・ゲーム系の見出し
[適用する場所]にグリッチテキスト(Glitch Text)のホバー効果を追加してください。テキストグリッチ(text glitch)、RGBスプリットグリッチ(RGB split glitch)とも呼ばれます。
ポインターが文字に乗っている間、素早く鋭いバースト状に震え、細い横スライスが横へずれ、2つの色付きコピーが壊れた信号のように分かれ、ポインターが離れたら元に戻るようにしてください。
スクリーンリーダーがコピーを読まないよう実際のテキストは文書内に一度だけ置き、キーボードフォーカス時にも同じ効果を出してください。ABCDEF
マウスを乗せてください
Holographic Text (ホログラフィックテキスト)
別名 Holographic Foil Text
テキストに虹色のホログラム箔のような反射が現れ、ポインターや時間に合わせて移ろいます。
使いどころ
プレミアム感のあるカード
[適用する場所]にホログラフィックテキスト(Holographic Text)のホバー効果を追加してください。ホログラフィックフォイルテキスト(holographic foil text)とも呼ばれます。
ポインターが文字に乗っている間、箔のような色の帯が文字の上をゆっくりなめらかに行き来し、ポインターが離れたら元のシンプルな見た目に戻るようにしてください。
きらめきのどの瞬間も文字が読めるようにし、キーボードフォーカス時にも同じ効果を出してください。