プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にテキストスクランブル(Text Scramble)のホバーエフェクトを追加してください。テキストデコード(text decode)、暗号化テキスト(encrypted text)とも呼ばれます。
ポインターがテキストに乗ると、各文字がランダムな文字で素早くちらつき、左から右へ順番に本来の文字に落ち着くようにしてください。
スクランブル中もテキストの幅が変わらないようにし、スクリーンリーダーには本来のテキストを読ませ、キーボードフォーカス時にも同じ効果を表示してください。似ているモーション
ABC DEFG
Typewriter (タイプライター)
別名 Typing Animation, Typewriter Effect, Typing Text
文字がタイプされるように一つずつ現れ、たいていその後に点滅するキャレットが続きます。
使いどころ
ヒーローの見出し、キャッチコピー
[適用する場所]にタイプライター(Typewriter)エフェクトを追加してください。タイピングアニメーション(typing animation)、タイピングテキスト(typing text)とも呼ばれます。
文字が一定のタイピングのペースで一つずつ現れ、最後に打った文字のすぐ後ろにキャレットを置き、打ち終わったら数回点滅させてください。
ループではなく一度だけ再生し、スクリーンリーダーにはすぐに全文を読ませ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は全文をそのまま表示してください。ABCDEFGHIJKLMNOPQRSTUVWX
Text Generate (テキストジェネレート)
別名 Text Generate Effect
ページの読み込み時に単語が順番にフェードインし、多くの場合ぼかしが晴れていくことで、生成されているように見えます。
使いどころ
AI風のイントロ文
[適用する場所]にテキストジェネレート(Text Generate)エフェクトを追加してください。
単語が一つずつフェードインし、それぞれのやわらかなぼかしが晴れていくことで、テキストが生成されているように見せてください。一定のペースで落ち着いた動きにしてください。
読み込み時に一度だけ再生し、スクリーンリーダーにはすぐに全文を読ませ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしで表示してください。H
G
F
E
D
C
BK
J
I
H
G
F
EN
M
L
K
J
I
HQ
P
O
N
M
L
KT
S
R
Q
P
O
N
Split-Flap Text (スプリットフラップテキスト)
別名 Text Flipping Board, Flip Board, Vestaboard display
空港の発車案内板のように文字がパタパタとめくれ、目的の文字で止まります。
使いどころ
ステータスボード、レトロな表示
[適用する場所]にスプリットフラップテキスト(Split-Flap Text)のエフェクトを追加してください。テキストフリッピングボード(text flipping board)、フリップボード(flip board)とも呼ばれます。
各文字のパネルがアルファベットを素早くめくっていき目的の文字で止まり、パネルは左から右へ順番に止まっていくようにしてください。
テキストが表示されたり変わったりするたびに一度だけ実行し、スクリーンリーダーには最終的なテキストだけを読み上げさせ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はめくらずに最終テキストを表示してください。ABCDEF
マウスを乗せてください
Glitch Text (グリッチテキスト)
別名 Text Glitch, RGB Split Glitch
テキストが壊れた信号のように、スライスのずれや赤とシアンの色ずれを伴って震えます。
使いどころ
サイバーパンク風・ゲーム系の見出し
[適用する場所]にグリッチテキスト(Glitch Text)のホバー効果を追加してください。テキストグリッチ(text glitch)、RGBスプリットグリッチ(RGB split glitch)とも呼ばれます。
ポインターが文字に乗っている間、素早く鋭いバースト状に震え、細い横スライスが横へずれ、2つの色付きコピーが壊れた信号のように分かれ、ポインターが離れたら元に戻るようにしてください。
スクリーンリーダーがコピーを読まないよう実際のテキストは文書内に一度だけ置き、キーボードフォーカス時にも同じ効果を出してください。Textのほかのモーション
ABCDEF
ポインターを動かしてください
Text Tilt (テキストチルト)
別名 Perspective Text Tilt
テキストがマウスの位置を追って3Dパースペクティブで傾きます。
使いどころ
ヒーロー見出し
[適用する場所]にテキストチルト(Text Tilt)エフェクトを追加してください。パースペクティブテキストチルト(perspective text tilt)とも呼ばれます。
テキストがポインターの動きになめらかに追従して3Dでやさしくポインター側へ傾き、ポインターが離れるとゆっくり平らに戻るようにしてください。
傾きは控えめにしてテキストを読みやすく保ち、タッチデバイスと、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は平らなままにしてください。ABC DEF
マウスを乗せてください
Underline Draw (アンダーラインドロー)
別名 Animated Underline, Hover Underline Animation, Underline Stretch, Underline Grow, Underline Slide, Underline From Left
ホバーすると、リンクの下に片側または中央から下線が伸びます。
使いどころ
ナビゲーションリンク、インラインリンク
[適用する場所]にアンダーラインドロー(Underline Draw)のホバーエフェクトを追加してください。アニメーション下線(animated underline)、ホバー下線アニメーション(hover underline animation)とも呼ばれます。
ポインターがリンクに乗ると、テキストの下に下線が左から右へなめらかに伸び、ポインターが離れると縮んで戻るようにしてください。素早く控えめな動きにしてください。
下線で周囲のレイアウトがずれないようにし、キーボードフォーカス時にも同じ効果を表示してください。