プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にグリッチテキスト(Glitch Text)のホバー効果を追加してください。テキストグリッチ(text glitch)、RGBスプリットグリッチ(RGB split glitch)とも呼ばれます。
ポインターが文字に乗っている間、素早く鋭いバースト状に震え、細い横スライスが横へずれ、2つの色付きコピーが壊れた信号のように分かれ、ポインターが離れたら元に戻るようにしてください。
スクリーンリーダーがコピーを読まないよう実際のテキストは文書内に一度だけ置き、キーボードフォーカス時にも同じ効果を出してください。似ているモーション
A
Q
J
P
N
V
Y
HB
K
M
L
Z
W
T
XC
R
G
Q
J
P
N
VD
Y
H
K
M
L
Z
WE
T
X
R
G
Q
J
PF
N
V
Y
H
K
M
L
マウスを乗せてください
Text Scramble (テキストスクランブル)
別名 ScrambleText, Text Decode, Encrypted Text, Text Unscramble, Hyper Text
テキストがランダムな文字に置き換わって切り替わり続け、徐々に最終的な単語に落ち着きます。
使いどころ
テック系のヒーロータイトル、リンクのホバー
[適用する場所]にテキストスクランブル(Text Scramble)のホバーエフェクトを追加してください。テキストデコード(text decode)、暗号化テキスト(encrypted text)とも呼ばれます。
ポインターがテキストに乗ると、各文字がランダムな文字で素早くちらつき、左から右へ順番に本来の文字に落ち着くようにしてください。
スクランブル中もテキストの幅が変わらないようにし、スクリーンリーダーには本来のテキストを読ませ、キーボードフォーカス時にも同じ効果を表示してください。ABC
Flicker (フリッカー)
別名 Flickering
要素の不透明度が、切れかけた電灯のように不規則にちらつきます。
使いどころ
ネオンやグリッチの演出
[適用する場所]にフリッカー(Flicker)のエフェクトを追加してください。flickering とも呼ばれます。
要素はほとんどの時間は安定させ、切れかけたネオンのように短く不規則に途切れて暗くなるようにしてください。
タイミングは等間隔ではなく不規則にし、最大の明るさでの速い点滅は避け、モーションを減らす設定にしているユーザーには止めてください。ABCABCABC
中をスクロールしてください
Sliced Text (スライステキスト)
別名 On-Scroll Sliced Text
見出しが横方向のスライスに切り分けられ、スクロールに合わせて互いに左右へずれていきます。
使いどころ
エディトリアルなヒーロー
[適用する場所]にスライステキスト(Sliced Text)のエフェクトを追加してください。オンスクロールスライステキスト(on-scroll sliced 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)にしている場合は止めてください。Textのほかのモーション
ABCDEF
マウスを乗せてください
Holographic Text (ホログラフィックテキスト)
別名 Holographic Foil Text
テキストに虹色のホログラム箔のような反射が現れ、ポインターや時間に合わせて移ろいます。
使いどころ
プレミアム感のあるカード
[適用する場所]にホログラフィックテキスト(Holographic Text)のホバー効果を追加してください。ホログラフィックフォイルテキスト(holographic foil text)とも呼ばれます。
ポインターが文字に乗っている間、箔のような色の帯が文字の上をゆっくりなめらかに行き来し、ポインターが離れたら元のシンプルな見た目に戻るようにしてください。
きらめきのどの瞬間も文字が読めるようにし、キーボードフォーカス時にも同じ効果を出してください。ABC DEF GHI JKLABC DEF GHI JKL
MNO PQR STU VWXMNO PQR STU VWX
YZA BCD EFG HIJYZA BCD EFG HIJ
Kinetic Typography (キネティックタイポグラフィ)
別名 Kinetic Text
テキストが静的な文章ではなく、動くグラフィック要素として拡大縮小・移動・回転します。
使いどころ
ブランドのヒーローセクション
[適用する場所]にキネティックタイポグラフィ(Kinetic Typography)を追加してください。キネティックテキスト(kinetic text)とも呼ばれます。
大きな文字を繰り返した行が、1行ごとに逆方向へゆっくり一定のペースで横に流れ、言葉そのものが動くグラフィックになるようにしてください。
各行はつなぎ目なくループさせ、スクリーンリーダーには一度だけ読ませ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きを止めてください。ABCDEF
マウスを乗せてください
Letter Scatter (レタースキャッター)
別名 Explosive Letter Burst, Scatter Gather Letters
ホバーで文字が飛び散って戻ったり、登場時に外側へはじけたりします。
使いどころ
遊び心のあるリンク
[適用する場所]にレタースキャッター(Letter Scatter)のホバー効果を追加してください。スキャッターギャザーレター(scatter gather letters)、エクスプローシブレターバースト(explosive letter burst)とも呼ばれます。
ポインターが文字に乗ると、各文字が少し回転しながらそれぞれの方向へ少し飛び出し、ポインターが離れたらなめらかに集まって元の単語に戻るようにしてください。
文字が動く間も単語のレイアウト上の領域は固定し、スクリーンリーダーには1つの単語として読ませ、キーボードフォーカス時にも同じ効果を出してください。