プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にグラデーションテキストアニメーション(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)にしている場合は静止させてください。ABCDEF
マウスを乗せてください
Holographic Text (ホログラフィックテキスト)
別名 Holographic Foil Text
テキストに虹色のホログラム箔のような反射が現れ、ポインターや時間に合わせて移ろいます。
使いどころ
プレミアム感のあるカード
[適用する場所]にホログラフィックテキスト(Holographic Text)のホバー効果を追加してください。ホログラフィックフォイルテキスト(holographic foil text)とも呼ばれます。
ポインターが文字に乗っている間、箔のような色の帯が文字の上をゆっくりなめらかに行き来し、ポインターが離れたら元のシンプルな見た目に戻るようにしてください。
きらめきのどの瞬間も文字が読めるようにし、キーボードフォーカス時にも同じ効果を出してください。Animated Gradient (グラデーションアニメーション)
別名 Gradient animation, Moving gradient, Background gradient animation
グラデーション背景の色がゆっくり移り変わったり、流れたり、回転したりします。
使いどころ
ヒーローの背景、ボタン
[適用する場所]にグラデーションアニメーション(Animated Gradient)の背景を追加してください。ムービンググラデーション(moving gradient)、gradient animation とも呼ばれます。
グラデーションの色がエリア全体をゆっくり流れるように、やわらかく途切れず漂わせ、ループが戻るときに跳ねが見えないようにしてください。
上に載るテキストはどの色の上でも読めるようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きを止めてください。Video Text (ビデオテキスト)
別名 Text Video Mask
大きな文字が窓のようになり、その内側で再生中の動画が見えます。
使いどころ
ヒーロータイトル
[適用する場所]にビデオテキスト(Video Text)エフェクトを追加してください。テキストビデオマスク(text video mask)とも呼ばれます。
大きく太い文字を再生中の動画をのぞく窓にして、動く映像が文字の形の内側にだけ見えるようにしてください。
動画はミュートでコントロールなしのループ再生にし、スクリーンリーダー向けに言葉を実際のテキストとして用意し、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止画を表示してください。Textのほかのモーション
ABCDEF
マウスを乗せてください
Glitch Text (グリッチテキスト)
別名 Text Glitch, RGB Split Glitch
テキストが壊れた信号のように、スライスのずれや赤とシアンの色ずれを伴って震えます。
使いどころ
サイバーパンク風・ゲーム系の見出し
[適用する場所]にグリッチテキスト(Glitch Text)のホバー効果を追加してください。テキストグリッチ(text glitch)、RGBスプリットグリッチ(RGB split glitch)とも呼ばれます。
ポインターが文字に乗っている間、素早く鋭いバースト状に震え、細い横スライスが横へずれ、2つの色付きコピーが壊れた信号のように分かれ、ポインターが離れたら元に戻るようにしてください。
スクリーンリーダーがコピーを読まないよう実際のテキストは文書内に一度だけ置き、キーボードフォーカス時にも同じ効果を出してください。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)にしている場合は動きを止めてください。