プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にテキストディストーション(Text Distortion)のエフェクトを追加してください。オーガニックテキストディストーション(organic text distortion)とも呼ばれます。
1行のテキストが横へ途切れなく流れながら、揺れる水越しに見ているように有機的にゆがみ波打ち、その流れはユーザーのスクロールで動くようにしてください。
ゆがみは文字が読める程度に軽くし、処理の遅い端末でもなめらかに動くようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はオフにしてください。似ているモーション
ABC
ABC
マウスを乗せてください
SVG Displacement Distortion (SVGディスプレイスメントディストーション)
別名 feTurbulence Distortion, Displacement Map Effect
SVGフィルターがアニメーションするノイズでテキストや図形を歪ませます。
使いどころ
液体や波紋のホバー効果
[適用する場所]にSVGディスプレイスメントディストーション(SVG Displacement Distortion)のホバー効果を追加してください。ディスプレイスメントマップエフェクト(displacement map effect)とも呼ばれます。
ポインターを乗せている間、テキストや図形が揺れる水越しに見るように波打ってゆらめき、効果はふわっと現れ、ポインターが外れるとくっきりした状態に戻るようにしてください。
静止時に負荷がかからないよう歪みフィルターは効果が有効な間だけ適用し、キーボードフォーカスでも同じ効果を出してください。ABCDEF
Squiggly Text (スクイグリーテキスト)
別名 Wobbly Text, Turbulence Text
SVGのディスプレイスメントフィルターで、文字の輪郭が手描きのように揺らぎます。
使いどころ
ラフスケッチ風や遊び心のある見出し
[適用する場所]にスクイグリーテキスト(Squiggly Text)のエフェクトを追加してください。ウォブリーテキスト(wobbly text)、タービュランステキスト(turbulence text)とも呼ばれます。
文字の輪郭が、1秒間に何度も手で描き直しているようにわずかに揺らぐようにしてください。なめらかな波ではなく、控えめで小刻みに震える感じです。
文字は読める状態を保ち、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止させてください。ABCDEF
文字が溶けるように、しずくを垂らしながら下へ伸びていきます。
使いどころ
ホラーや遊び心のあるタイトル
[適用する場所]にメルティングテキスト(Melting Text)のエフェクトを追加してください。
文字がゆっくり下へたわみ、その下にしずくが伸びて溶けていくように見せ、最後は溶けた形のまま静止させてください。
テキストが画面に入ったときに一度だけ再生し、最後に単語が読める状態を保ち、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしにしてください。Textのほかのモーション
ABCDEFGHIJKLMNOPQRSTUVWX
Text Generate (テキストジェネレート)
別名 Text Generate Effect
ページの読み込み時に単語が順番にフェードインし、多くの場合ぼかしが晴れていくことで、生成されているように見えます。
使いどころ
AI風のイントロ文
[適用する場所]にテキストジェネレート(Text Generate)エフェクトを追加してください。
単語が一つずつフェードインし、それぞれのやわらかなぼかしが晴れていくことで、テキストが生成されているように見せてください。一定のペースで落ち着いた動きにしてください。
読み込み時に一度だけ再生し、スクリーンリーダーにはすぐに全文を読ませ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしで表示してください。ABC DEFG HIJ KL
Text Highlighter (テキストマーカー)
別名 Highlight Marker, Marker Underline, Hero Highlight
マーカーのような色の帯がフレーズの上に引かれ、強調します。
使いどころ
重要なフレーズの強調
[適用する場所]にテキストマーカー(Text Highlighter)エフェクトを追加してください。ハイライトマーカー(highlight marker)、マーカーアンダーライン(marker underline)とも呼ばれます。
マーカーのような色の帯が、ペンで線を引くようにキーフレーズの背後を左から右へなめらかに走るようにしてください。
フレーズがスクロールで画面に入ったときに一度だけ再生し、帯の上でもテキストが読みやすいようにし、フレーズが2行に折り返しても帯が正しく追従するようにしてください。ABCDABCD
マウスを乗せてください
Text Hover Effect (テキストホバーエフェクト)
別名 Gradient Outline Text Hover, Text Fill on Hover
アウトラインの単語が、ポインターを追うかその上を横切るグラデーションで塗られたり照らされたりします。
使いどころ
大きなディスプレイ文字、フッター
[適用する場所]にテキストホバーエフェクト(Text Hover Effect)を追加してください。ホバーでのテキスト塗り(text fill on hover)、グラデーションアウトラインのテキストホバー(gradient outline text hover)とも呼ばれます。
単語は最初アウトラインだけで表示し、ポインターが乗っている間はベタ塗りが左から右へなめらかに広がり、ポインターが離れると引いていくようにしてください。
塗られる前のアウトラインの単語も読みやすく保ち、キーボードフォーカス時にも同じ効果を表示してください。