プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にマスクリビール(Mask Reveal)のテキスト登場エフェクトを追加してください。ラインマスクリビール(line mask reveal)、テキストマスキング(text masking)とも呼ばれます。
各行が見えない境界線の裏から滑り上がり、何もないところから現れるように、1行ずつ順番に、素早くなめらかに、弾まずに表示されるようにしてください。
テキストがスクロールで画面に入ったときに一度だけ再生し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしですぐに表示してください。似ているモーション
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
Clip Reveal (クリップリビール)
別名 Image Reveal, Mask Reveal, Clip-path Reveal, Wipe Reveal
clip-path やマスクが端や一点から広がり、画像やテキストが少しずつ現れます。
使いどころ
画像や見出しの表示
[適用する場所]にクリップリビール(Clip Reveal)の登場エフェクトを追加してください。マスクリビール(mask reveal)、ワイプリビール(wipe reveal)、イメージリビール(image reveal)とも呼ばれます。
切り抜きの境界が左から右へ移動し、コンテンツ自体は動かずに少しずつ見えてくるようにしてください。滑らかに、始まりと終わりは柔らかく。
何もずれないよう最初から要素の領域を確保し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は全体を表示した状態にしてください。ABDEFGHIJKLDEFMN
Word Rotate (ワードローテート)
別名 Rotating Words, Flip Words, Container Text Flip, Layout Text Flip, Rotating Text Wheel
文中の一語が、スライド・フリップ・フェードでリストの次の単語に入れ替わります。
使いどころ
ヒーローのキャッチコピー
[適用する場所]にワードローテート(Word Rotate)エフェクトを追加してください。ローテーティングワード(rotating words)、フリップワード(flip words)とも呼ばれます。
行の中の一語が上へすべって消え、リストの次の単語が下から入ってくるようにし、次の切り替えの前に各単語で少し止めてください。
単語の幅が違っても行の残りが跳ねないようにし、スクリーンリーダーに毎回の切り替えを読み上げさせず、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は切り替えを止めてください。AWBXCYDZ
Text Replacement (テキストリプレイスメント)
別名 Text Swap
既存のテキストがアニメーションで消え、新しいテキストに置き換わります。
使いどころ
切り替わるラベル
[適用する場所]にテキストリプレイスメント(Text Replacement)エフェクトを追加してください。テキストスワップ(text swap)とも呼ばれます。
テキストが変わるとき、古い文字は上へすべって消え、新しい文字は下から入ってくるように、1文字ずつ素早くなめらかな波のように切り替えてください。
切り替え中にテキストボックスのサイズが急に変わらないようにし、スクリーンリーダーには新しいテキストだけを読み上げさせてください。Textのほかのモーション
Q
R
U
P
D
H
LY
O
S
G
K
X
BA
F
J
Z
V
M
EH
L
C
N
W
T
IX
B
Q
R
U
P
DM
E
Y
O
S
G
KT
I
A
F
J
Z
VP
D
H
L
C
N
W
Matrix Text (マトリックステキスト)
別名 Digital Rain Text
緑色の文字が、映画『マトリックス』のコードの雨のように列になって降り注ぎます。
使いどころ
ハッカー風のテーマ
[適用する場所]にマトリックステキスト(Matrix Text)のエフェクトを追加してください。デジタルレインテキスト(digital rain text)とも呼ばれます。
文字の列がそれぞれ少しずつ違う速さで一定に降り続け、先頭の文字は明るく光り、その後ろに尾がフェードアウトしていくようにしてください。
スクリーンリーダーからは隠した装飾として扱い、軽量に保ち、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は止めてください。ABCDEF
文字が溶けるように、しずくを垂らしながら下へ伸びていきます。
使いどころ
ホラーや遊び心のあるタイトル
[適用する場所]にメルティングテキスト(Melting Text)のエフェクトを追加してください。
文字がゆっくり下へたわみ、その下にしずくが伸びて溶けていくように見せ、最後は溶けた形のまま静止させてください。
テキストが画面に入ったときに一度だけ再生し、最後に単語が読める状態を保ち、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしにしてください。ABCDEFGHI
Morphing Text (モーフィングテキスト)
別名 Text Morph
ひとつの単語がぼやけながら、同じ位置で次の単語へ溶け込むように変わります。
使いどころ
ヒーローエリアのキャッチコピー
[適用する場所]にモーフィングテキスト(Morphing Text)のエフェクトを追加してください。テキストモーフ(text morph)とも呼ばれます。
ひとつの単語が同じ位置でぼやけ、とろりと柔らかく混ざり合いながら次の単語へ溶け込み、次に切り替わる前に少し静止するようにしてください。
単語を途切れなく順に切り替え、スクリーンリーダーには通常のテキストとして読ませ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は切り替えを止めてください。