プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にモーフィングテキスト(Morphing Text)のエフェクトを追加してください。テキストモーフ(text morph)とも呼ばれます。
ひとつの単語が同じ位置でぼやけ、とろりと柔らかく混ざり合いながら次の単語へ溶け込み、次に切り替わる前に少し静止するようにしてください。
単語を途切れなく順に切り替え、スクリーンリーダーには通常のテキストとして読ませ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は切り替えを止めてください。似ているモーション
ABDEFGHIJKLDEFMN
Word Rotate (ワードローテート)
別名 Rotating Words, Flip Words, Container Text Flip, Layout Text Flip, Rotating Text Wheel
文中の一語が、スライド・フリップ・フェードでリストの次の単語に入れ替わります。
使いどころ
ヒーローのキャッチコピー
[適用する場所]にワードローテート(Word Rotate)エフェクトを追加してください。ローテーティングワード(rotating words)、フリップワード(flip words)とも呼ばれます。
行の中の一語が上へすべって消え、リストの次の単語が下から入ってくるようにし、次の切り替えの前に各単語で少し止めてください。
単語の幅が違っても行の残りが跳ねないようにし、スクリーンリーダーに毎回の切り替えを読み上げさせず、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は切り替えを止めてください。AWBXCYDZ
Text Replacement (テキストリプレイスメント)
別名 Text Swap
既存のテキストがアニメーションで消え、新しいテキストに置き換わります。
使いどころ
切り替わるラベル
[適用する場所]にテキストリプレイスメント(Text Replacement)エフェクトを追加してください。テキストスワップ(text swap)とも呼ばれます。
テキストが変わるとき、古い文字は上へすべって消え、新しい文字は下から入ってくるように、1文字ずつ素早くなめらかな波のように切り替えてください。
切り替え中にテキストボックスのサイズが急に変わらないようにし、スクリーンリーダーには新しいテキストだけを読み上げさせてください。ABCD
Blur In (ブラーイン)
別名 Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
要素が強くぼやけた状態から徐々にピントが合い、多くの場合スライドやフェードインを伴います。
使いどころ
見出しやヒーローテキストの表示
[適用する場所]にブラーイン(Blur In)の登場アニメーションを追加してください。テキストフォーカスイン(text focus in)、フォーカスイン(focus in)、ブラーテキストリビール(blur text reveal)とも呼ばれます。
コンテンツが強くぼやけて透明な状態から、その場でピントが合っていくようにしてください。柔らかくややゆっくりで、位置は動かしません。
再生は一度だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は最初からくっきり表示してください。マウスを乗せてください
Gooey Effect (グーイーエフェクト)
別名 Goo Effect, Liquid Blob Merge, Metaball Effect, Gooey / Liquid Metaball, Metaballs, Liquid blobs
ぼかしとコントラストのフィルターで、近くの形同士が液体のしずくのように溶け合います。
使いどころ
メニュー、カーソル、ページネーション
[適用する場所]にグーイーエフェクト(Gooey Effect)を追加してください。グーエフェクト(goo effect)、メタボール(metaballs)とも呼ばれます。
ポインターを乗せると小さなしずくが本体から液体のように伸びてから離れ、ポインターが外れると流れるように戻って滑らかに溶け合うようにしてください。
ぼかしとコントラストのフィルターはページ全体ではなく小さな形のグループだけにかけ、キーボードフォーカスやタップでも同じ効果を出してください。Textのほかのモーション
ABCDEF
Neon Glow Text (ネオングローテキスト)
別名 Neon Sign Flicker, Glowing Text
テキストがネオン管のように光り、ちらついたり脈打ったりします。
使いどころ
ナイトライフやゲーム系のテーマ
[適用する場所]にネオングローテキスト(Neon Glow Text)のエフェクトを追加してください。ネオンサインフリッカー(neon sign flicker)、グローイングテキスト(glowing text)とも呼ばれます。
テキストがネオン管のように柔らかく安定した光で輝き、ときどき本物の看板のように一瞬消えるようにしてください。
速い点滅は一部のユーザーに害を与えることがあるので、ちらつきは速くせずたまに起こる程度にし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は光を一定に保ってください。A
E
I
MB
F
J
NC
G
K
OD
H
L
PQ
R
S
T
中をスクロールしてください
Scrolling Letters (スクローリングレター)
別名 On-Scroll Letter Animations
ユーザーがセクションをスクロールするにつれて、タイトルの文字が順番に入れ替わったり動いたりします。
使いどころ
セクションインジケーター
[適用する場所]にスクローリングレター(Scrolling Letters)を追加してください。オンスクロールレターアニメーション(on-scroll letter animations)とも呼ばれます。
ユーザーがセクションをスクロールするにつれて、タイトルの文字が左から右へ1文字ずつ次の文字へ回転して切り替わり、スクロール位置に直接連動するようにしてください。
上へ戻すと逆に回転して戻り、スクリーンリーダーには現在のタイトルを通常のテキストとして渡してください。ABC DEFGH
Shimmer Text (シマーテキスト)
別名 Animated Shiny Text, Metallic Shimmer Text, Gradient Text Shimmer
明るいハイライトが文字の上を繰り返し横切ります。
使いどころ
バッジ、お知らせ用のピル
[適用する場所]にシマーテキスト(Shimmer Text)のエフェクトを追加してください。アニメーテッドシャイニーテキスト(animated shiny text)、メタリックシマーテキスト(metallic shimmer text)とも呼ばれます。
光の帯が文字の上を左から右へなめらかに横切り、少し間をおいて繰り返すようにしてください。
ハイライトの下でも文字が読めるようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止させてください。