プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にキネティックタイポグラフィ(Kinetic Typography)を追加してください。キネティックテキスト(kinetic text)とも呼ばれます。
大きな文字を繰り返した行が、1行ごとに逆方向へゆっくり一定のペースで横に流れ、言葉そのものが動くグラフィックになるようにしてください。
各行はつなぎ目なくループさせ、スクリーンリーダーには一度だけ読ませ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きを止めてください。似ているモーション
ABCDEF
Split Text Stagger (スプリットテキストスタッガー)
別名 Letter Stagger, Staggered Text Reveal, SplitText, Splitting.js text
見出しを文字・単語・行に分割し、少しずつ時間をずらして順番にアニメーションさせます。
使いどころ
見出し、セクションタイトル
[適用する場所]にスプリットテキストスタッガー(Split Text Stagger)の登場エフェクトを追加してください。レタースタッガー(letter stagger)、スタッガードテキストリビール(staggered text reveal)とも呼ばれます。
見出しを1文字ずつに分割し、少しずつ時間をずらして順番に浮き上がりながらフェードインさせ、素早くなめらかに、弾まないようにしてください。
見出しが画面に入ったときに一度だけ再生し、スクリーンリーダーにはひとつの単語として読ませ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしで表示してください。ABCDEF
Wavy Text (ウェービーテキスト)
別名 Text Wave
文字が順番に上下に揺れ、単語の中を波が流れていくように見えます。
使いどころ
遊び心のある見出し、ローディング表示
[適用する場所]にウェービーテキスト(Wavy Text)エフェクトを追加してください。テキストウェーブ(text wave)とも呼ばれます。
文字を順番に上下させ、やさしくなめらかな波が単語の中を流れ続けるようにしてください。
途切れなくループさせ、スクリーンリーダーには一つの単語として読ませ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は波を止めてください。ABCABCABCABCABC
中をスクロールしてください
Text Repetition (テキストリピティション)
別名 Repeated Text Scroll
単語が何枚も重なったコピーに複製され、スクロールに合わせてずれていきます。
使いどころ
ポートフォリオのタイトル
[適用する場所]にテキストリピティション(Text Repetition)エフェクトを追加してください。リピートテキストスクロール(repeated text scroll)とも呼ばれます。
単語を薄いアウトラインのコピーに重ねて複製し、スクロールに合わせて背後から広がり、上へスクロールすると元に重なるようにしてください。
広がりはスクロール位置に直接連動させ、余分なコピーはスクリーンリーダーから隠して単語が一度だけ読まれるようにしてください。ABCDEF
ポインターを動かしてください
Text Tilt (テキストチルト)
別名 Perspective Text Tilt
テキストがマウスの位置を追って3Dパースペクティブで傾きます。
使いどころ
ヒーロー見出し
[適用する場所]にテキストチルト(Text Tilt)エフェクトを追加してください。パースペクティブテキストチルト(perspective text tilt)とも呼ばれます。
テキストがポインターの動きになめらかに追従して3Dでやさしくポインター側へ傾き、ポインターが離れるとゆっくり平らに戻るようにしてください。
傾きは控えめにしてテキストを読みやすく保ち、タッチデバイスと、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は平らなままにしてください。Textのほかのモーション
ABCDEF
マウスを乗せてください
Letter Scatter (レタースキャッター)
別名 Explosive Letter Burst, Scatter Gather Letters
ホバーで文字が飛び散って戻ったり、登場時に外側へはじけたりします。
使いどころ
遊び心のあるリンク
[適用する場所]にレタースキャッター(Letter Scatter)のホバー効果を追加してください。スキャッターギャザーレター(scatter gather letters)、エクスプローシブレターバースト(explosive letter burst)とも呼ばれます。
ポインターが文字に乗ると、各文字が少し回転しながらそれぞれの方向へ少し飛び出し、ポインターが離れたらなめらかに集まって元の単語に戻るようにしてください。
文字が動く間も単語のレイアウト上の領域は固定し、スクリーンリーダーには1つの単語として読ませ、キーボードフォーカス時にも同じ効果を出してください。ABCDEFABCDEF
Line Shadow Text (ラインシャドウテキスト)
別名 Text Shadow Animation, Dancing Shadow
文字の背後にある縞模様やずらした影が、一方向に動きます。
使いどころ
インパクトのある大見出し
[適用する場所]にラインシャドウテキスト(Line Shadow Text)の効果を追加してください。テキストシャドウアニメーション(text shadow animation)、ダンシングシャドウ(dancing shadow)とも呼ばれます。
文字の背後で、細い斜めストライプでできたずらした影がゆっくり途切れなくスライドし、文字自体は動かずくっきりしたままにしてください。
ストライプの動きはつなぎ目なくループさせ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は影を止めてください。Liquid Fill Text (リキッドフィルテキスト)
別名 Water Fill Text
文字の中に、波打ちながら水位が上がる液体が満ちていきます。
使いどころ
ローディング表示、遊び心のあるタイトル
[適用する場所]にリキッドフィルテキスト(Liquid Fill Text)の効果を追加してください。ウォーターフィルテキスト(water fill text)とも呼ばれます。
輪郭だけの文字に液体が満ち、波打つ水面が横へ流れながら水位がゆっくり上下する、やわらかく途切れないループにしてください。
スクリーンリーダー向けに単語は実際のテキストとして残し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は液体を一定の水位で止めてください。