プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にリキッドフィルテキスト(Liquid Fill Text)の効果を追加してください。ウォーターフィルテキスト(water fill text)とも呼ばれます。
輪郭だけの文字に液体が満ち、波打つ水面が横へ流れながら水位がゆっくり上下する、やわらかく途切れないループにしてください。
スクリーンリーダー向けに単語は実際のテキストとして残し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は液体を一定の水位で止めてください。似ているモーション
Video Text (ビデオテキスト)
別名 Text Video Mask
大きな文字が窓のようになり、その内側で再生中の動画が見えます。
使いどころ
ヒーロータイトル
[適用する場所]にビデオテキスト(Video Text)エフェクトを追加してください。テキストビデオマスク(text video mask)とも呼ばれます。
大きく太い文字を再生中の動画をのぞく窓にして、動く映像が文字の形の内側にだけ見えるようにしてください。
動画はミュートでコントロールなしのループ再生にし、スクリーンリーダー向けに言葉を実際のテキストとして用意し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止画を表示してください。ABCDABCD
マウスを乗せてください
Text Hover Effect (テキストホバーエフェクト)
別名 Gradient Outline Text Hover, Text Fill on Hover
アウトラインの単語が、ポインターを追うかその上を横切るグラデーションで塗られたり照らされたりします。
使いどころ
大きなディスプレイ文字、フッター
[適用する場所]にテキストホバーエフェクト(Text Hover Effect)を追加してください。ホバーでのテキスト塗り(text fill on hover)、グラデーションアウトラインのテキストホバー(gradient outline text hover)とも呼ばれます。
単語は最初アウトラインだけで表示し、ポインターが乗っている間はベタ塗りが左から右へなめらかに広がり、ポインターが離れると引いていくようにしてください。
塗られる前のアウトラインの単語も読みやすく保ち、キーボードフォーカス時にも同じ効果を表示してください。Stroke Text Draw (ストロークテキストドロー)
別名 Draw In Text, Animated Stroke Text
文字の輪郭が線として描かれてから、塗りが現れます。
使いどころ
ロゴ、ヒーローエリアの単語
[適用する場所]にストロークテキストドロー(Stroke Text Draw)のエフェクトを追加してください。ドローインテキスト(draw in text)、アニメーテッドストロークテキスト(animated stroke text)とも呼ばれます。
文字の輪郭がなめらかに描かれていき、輪郭が描き終わったら塗りがフェードインするようにしてください。
読み込み時に一度だけ再生し、単語は実際のテキストとしてアクセシブルに保ち、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は最初から塗られたテキストを表示してください。Textのほかのモーション
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)にしている場合は動きなしですぐに表示してください。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)にしている場合は動きなしにしてください。