プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にテキストリビールカード(Text Reveal Card)エフェクトを追加してください。スポットライトテキストリビール(spotlight text reveal)とも呼ばれます。
ポインターがカード上を動くと、縦の境界線がぴったり追従して片側に隠れたテキストを見せるようにしてください。遅れのない、なめらかで直接的な動きにしてください。
ポインターのないタッチデバイスではドラッグやタップで隠れたテキストが見えるようにし、隠れたテキストもスクリーンリーダーで読めるようにしてください。似ているモーション
A
マウスを乗せてください
SVG Mask Reveal (SVGマスクリビール)
別名 SVG Mask Effect, Clip-path Reveal, Spotlight Mask
マスクの形がワイプしたりポインターを追ったりして、下にあるコンテンツを見せます。
使いどころ
画像やコンテンツの表示演出
[適用する場所]にSVGマスクリビール(SVG Mask Reveal)のホバー効果を追加してください。クリップパスリビール(clip-path reveal)、スポットライトマスク(spotlight mask)とも呼ばれます。
ポインターを乗せている間は円形のマスクが中央から広がって下のコンテンツを見せ、ポインターが外れると再び閉じるようにしてください。滑らかで、やや素早く。
何もずれないよう2つのレイヤーをまったく同じサイズにし、キーボードフォーカスやタップでも同じ表示をしてください。- A
- B
- C
- D
- E
- F
- G
- H
- I
- J
- K
- L
ポインターを動かしてください
Cursor Spotlight (カーソルスポットライト)
別名 Flashlight cursor, Spotlight effect
ポインターの周りの光の円がコンテンツを照らし出し、それ以外は暗いままです。
使いどころ
ヒーローセクション、リビール演出
[適用する場所]にカーソルスポットライト(Cursor Spotlight)の効果を追加してください。懐中電灯カーソル(flashlight cursor)、スポットライト効果(spotlight effect)とも呼ばれます。
やわらかな光の円がポインターを追いかけてその下のコンテンツを照らし出し、それ以外の部分は暗くしたままにしてください。
追いかけるポインターがないタッチデバイスでは、代わりにコンテンツ全体を明るく表示してください。A
B
ドラッグしてください
Before-After Slider (ビフォーアフタースライダー)
別名 Image comparison slider, Compare slider
ドラッグできる仕切りの左右で、それぞれ別の画像が見えます。
使いどころ
写真のレタッチ、製品比較
[適用する場所]にビフォーアフタースライダー(Before-After Slider)を追加してください。画像比較スライダー(image comparison slider)、コンペアスライダー(compare slider)とも呼ばれます。
2枚の画像を重ね、縦の仕切りをドラッグすると一方が多く、もう一方が少なく見えるようにしてください。仕切りは遅れなくポインターにそのままついてきます。
仕切りは中央から始め、タッチと矢印キーでも動かせるようにしてください。ABCDABCD
マウスを乗せてください
Text Hover Effect (テキストホバーエフェクト)
別名 Gradient Outline Text Hover, Text Fill on Hover
アウトラインの単語が、ポインターを追うかその上を横切るグラデーションで塗られたり照らされたりします。
使いどころ
大きなディスプレイ文字、フッター
[適用する場所]にテキストホバーエフェクト(Text Hover Effect)を追加してください。ホバーでのテキスト塗り(text fill on hover)、グラデーションアウトラインのテキストホバー(gradient outline text hover)とも呼ばれます。
単語は最初アウトラインだけで表示し、ポインターが乗っている間はベタ塗りが左から右へなめらかに広がり、ポインターが離れると引いていくようにしてください。
塗られる前のアウトラインの単語も読みやすく保ち、キーボードフォーカス時にも同じ効果を表示してください。Textのほかのモーション
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)とも呼ばれます。
ポインターがテキストに乗ると、各文字がランダムな文字で素早くちらつき、左から右へ順番に本来の文字に落ち着くようにしてください。
スクランブル中もテキストの幅が変わらないようにし、スクリーンリーダーには本来のテキストを読ませ、キーボードフォーカス時にも同じ効果を表示してください。ABCDEF
ポインターを動かしてください
Text Tilt (テキストチルト)
別名 Perspective Text Tilt
テキストがマウスの位置を追って3Dパースペクティブで傾きます。
使いどころ
ヒーロー見出し
[適用する場所]にテキストチルト(Text Tilt)エフェクトを追加してください。パースペクティブテキストチルト(perspective text tilt)とも呼ばれます。
テキストがポインターの動きになめらかに追従して3Dでやさしくポインター側へ傾き、ポインターが離れるとゆっくり平らに戻るようにしてください。
傾きは控えめにしてテキストを読みやすく保ち、タッチデバイスと、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は平らなままにしてください。ABC DEFG
Typewriter (タイプライター)
別名 Typing Animation, Typewriter Effect, Typing Text
文字がタイプされるように一つずつ現れ、たいていその後に点滅するキャレットが続きます。
使いどころ
ヒーローの見出し、キャッチコピー
[適用する場所]にタイプライター(Typewriter)エフェクトを追加してください。タイピングアニメーション(typing animation)、タイピングテキスト(typing text)とも呼ばれます。
文字が一定のタイピングのペースで一つずつ現れ、最後に打った文字のすぐ後ろにキャレットを置き、打ち終わったら数回点滅させてください。
ループではなく一度だけ再生し、スクリーンリーダーにはすぐに全文を読ませ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は全文をそのまま表示してください。