プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にテキスト3Dフリップ(Text 3D Flip)のホバーエフェクトを追加してください。3Dフリップテキストリビール(3D flip text reveal)とも呼ばれます。
ポインターがテキストに乗ると、各文字が横軸を中心に3Dで回転して裏側の新しい文字を見せ、1文字ずつ素早くなめらかに流れるように切り替わり、ポインターが離れたら元に戻るようにしてください。
回転中もテキストボックスの大きさは変えず、キーボードフォーカスでも同じエフェクトを表示してください。似ているモーション
H
G
F
E
D
C
BK
J
I
H
G
F
EN
M
L
K
J
I
HQ
P
O
N
M
L
KT
S
R
Q
P
O
N
Split-Flap Text (スプリットフラップテキスト)
別名 Text Flipping Board, Flip Board, Vestaboard display
空港の発車案内板のように文字がパタパタとめくれ、目的の文字で止まります。
使いどころ
ステータスボード、レトロな表示
[適用する場所]にスプリットフラップテキスト(Split-Flap Text)のエフェクトを追加してください。テキストフリッピングボード(text flipping board)、フリップボード(flip board)とも呼ばれます。
各文字のパネルがアルファベットを素早くめくっていき目的の文字で止まり、パネルは左から右へ順番に止まっていくようにしてください。
テキストが表示されたり変わったりするたびに一度だけ実行し、スクリーンリーダーには最終的なテキストだけを読み上げさせ、ユーザーがモーションを減らす設定(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)にしている場合は切り替えを止めてください。A
Flip In (フリップイン)
別名 Flip In X, Flip In Y
要素が横軸または縦軸を中心に3D回転し、真横を向いた状態から正面を向きます。
使いどころ
カードやタイルの表示
[適用する場所]にフリップイン(Flip In)の登場アニメーションを追加してください。フリップインX(flip in X)、フリップインY(flip in Y)とも呼ばれます。
要素が真横を向いた状態から横軸を中心に回転して正面を向き、少し行き過ぎて戻ってから落ち着くようにしてください。素早く、小さな揺れを伴って。
回転に奥行きが感じられるよう遠近感(perspective)をつけ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きなしで正面を向いた状態で表示してください。A
B
マウスを乗せてください
Card Flip (カードフリップ)
別名 Flip card, Card flip 3D, 3D flip on hover
カードが軸を中心に半回転し、裏面を見せます。
使いどころ
チーム紹介カード、単語カード、料金の詳細
[適用する場所]にカードフリップ(Card Flip)エフェクトを追加してください。フリップカード(flip card)、カードフリップ3D(card flip 3D)とも呼ばれます。
ポインターがカードに乗ったら、カードが縦軸を中心に立体的に裏返って裏面を見せ、離れたら元に戻るようにしてください。なめらかに、一定の速さで。
各面の裏側は隠して表裏が透けて重ならないようにし、キーボードフォーカスやタッチ端末のタップでも裏返るようにしてください。Textのほかのモーション
ABCDEFGHIJABCDEFGHIJ
Text Distortion (テキストディストーション)
別名 Organic Text Distortion
スクロールやポインターの動きに合わせて、テキストが有機的にゆがみ、波打ちます。
使いどころ
実験的なポートフォリオ
[適用する場所]にテキストディストーション(Text Distortion)のエフェクトを追加してください。オーガニックテキストディストーション(organic text distortion)とも呼ばれます。
1行のテキストが横へ途切れなく流れながら、揺れる水越しに見ているように有機的にゆがみ波打ち、その流れはユーザーのスクロールで動くようにしてください。
ゆがみは文字が読める程度に軽くし、処理の遅い端末でもなめらかに動くようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合はオフにしてください。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行に折り返しても帯が正しく追従するようにしてください。