プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にホログラフィックテキスト(Holographic Text)のホバー効果を追加してください。ホログラフィックフォイルテキスト(holographic foil text)とも呼ばれます。
ポインターが文字に乗っている間、箔のような色の帯が文字の上をゆっくりなめらかに行き来し、ポインターが離れたら元のシンプルな見た目に戻るようにしてください。
きらめきのどの瞬間も文字が読めるようにし、キーボードフォーカス時にも同じ効果を出してください。似ているモーション
ABCDEF
Animated Gradient Text (グラデーションテキストアニメーション)
別名 Aurora Text, Rainbow Text Sweep, Gradient Text Color Wave
グラデーションで塗られたテキストの色が、絶えず移り変わったり流れたりします。
使いどころ
ブランドの見出し
[適用する場所]にグラデーションテキストアニメーション(Animated Gradient Text)の効果を追加してください。オーロラテキスト(aurora text)、レインボーテキストスイープ(rainbow text sweep)とも呼ばれます。
文字をグラデーションで塗り、その色がテキスト上をゆっくりなめらかに流れ、つなぎ目なく無限にループするようにしてください。
背景に対してどの瞬間も文字が読みやすいようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は色を止めてください。ABC DEFGH
Shimmer Text (シマーテキスト)
別名 Animated Shiny Text, Metallic Shimmer Text, Gradient Text Shimmer
明るいハイライトが文字の上を繰り返し横切ります。
使いどころ
バッジ、お知らせ用のピル
[適用する場所]にシマーテキスト(Shimmer Text)のエフェクトを追加してください。アニメーテッドシャイニーテキスト(animated shiny text)、メタリックシマーテキスト(metallic shimmer text)とも呼ばれます。
光の帯が文字の上を左から右へなめらかに横切り、少し間をおいて繰り返すようにしてください。
ハイライトの下でも文字が読めるようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止させてください。A
ポインターを動かしてください
Glare / Holographic Card (グレア/ホログラフィックカード)
別名 Glare hover, Glare card, Magic card, Glare
明るいハイライトが反射光のようにポインターを追ってカードの表面を動きます。
使いどころ
プレミアムカード、コレクションカード
[適用する場所]にグレア/ホログラフィックカード(Glare / Holographic Card)エフェクトを追加してください。グレアカード(glare card)、グレアホバー(glare hover)とも呼ばれます。
やわらかく明るいハイライトが、光の反射のようにポインターを追ってカードの表面を動き、カードはポインターの方へわずかに傾くようにしてください。ポインターが離れたらどちらも消えます。なめらかで控えめに。
クリックは光のレイヤーを通り抜けるようにし、その下のコンテンツは読みやすく保ち、タッチ端末では光なしでカードを表示してください。Textのほかのモーション
ABC DEF GHI JKLABC DEF GHI JKL
MNO PQR STU VWXMNO PQR STU VWX
YZA BCD EFG HIJYZA BCD EFG HIJ
Kinetic Typography (キネティックタイポグラフィ)
別名 Kinetic Text
テキストが静的な文章ではなく、動くグラフィック要素として拡大縮小・移動・回転します。
使いどころ
ブランドのヒーローセクション
[適用する場所]にキネティックタイポグラフィ(Kinetic Typography)を追加してください。キネティックテキスト(kinetic text)とも呼ばれます。
大きな文字を繰り返した行が、1行ごとに逆方向へゆっくり一定のペースで横に流れ、言葉そのものが動くグラフィックになるようにしてください。
各行はつなぎ目なくループさせ、スクリーンリーダーには一度だけ読ませ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きを止めてください。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)にしている場合は影を止めてください。