プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にアダプティブキャレット(Adaptive Caret)の効果を追加してください。アダプティブキャレットサイズ(adaptive caret size)とも呼ばれます。
テキストキャレットがポインターに最も近い文字の前へ移動し、その文字の高さに合わせて素早く伸び縮みするようにしてください。なめらかでキビキビとしたサイズ変化で、弾みは不要です。
テキスト自体はずらさず、キャレットがポインターと同じようにキーボード操作にも追従するようにしてください。似ているモーション
ABC DEFG
Typewriter (タイプライター)
別名 Typing Animation, Typewriter Effect, Typing Text
文字がタイプされるように一つずつ現れ、たいていその後に点滅するキャレットが続きます。
使いどころ
ヒーローの見出し、キャッチコピー
[適用する場所]にタイプライター(Typewriter)エフェクトを追加してください。タイピングアニメーション(typing animation)、タイピングテキスト(typing text)とも呼ばれます。
文字が一定のタイピングのペースで一つずつ現れ、最後に打った文字のすぐ後ろにキャレットを置き、打ち終わったら数回点滅させてください。
ループではなく一度だけ再生し、スクリーンリーダーにはすぐに全文を読ませ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は全文をそのまま表示してください。B
ポインターを動かしてください
Custom Cursor (カスタムカーソル)
別名 Animated cursor, Cursor replacement
標準の矢印が装飾された点やリングに置き換わり、操作できる要素の上で形が変わります。
使いどころ
ポートフォリオやエージェンシーのサイト
[適用する場所]にカスタムカーソル(Custom Cursor)を追加してください。アニメーテッドカーソル(animated cursor)、カーソルリプレースメント(cursor replacement)とも呼ばれます。
標準の矢印を、ポインターにぴったり付いてくる小さな点と、少し遅れて追いかけるリングに置き換え、リンクやボタンの上ではリングがなめらかに大きくなるようにしてください。
タッチデバイスとテキスト入力欄では通常のカーソルのままにし、カスタムカーソルがクリックを妨げないようにしてください。Cursorのほかのモーション
AB
ポインターを動かしてください
Blend-Mode Cursor (ブレンドモードカーソル)
別名 Difference cursor, Inverting cursor
円形のカーソルが mix-blend-mode の difference で下にある色を反転させます。
使いどころ
クリエイティブなポートフォリオ
[適用する場所]にブレンドモードカーソル(Blend-Mode Cursor)を追加してください。ディファレンスカーソル(difference cursor)、反転カーソル(inverting cursor)とも呼ばれます。
ポインターを塗りつぶしの円に置き換え、遅れなくポインターの真下に置き、通過するテキストや図形の色を反転させてください。
合成はその範囲内に閉じ込めてページの他の部分と混ざらないようにし、ダークモードでもはっきり反転するようにして、タッチデバイスでは通常のカーソルのままにしてください。A
ポインターを動かしてください
Cursor Follower (マウスストーカー)
別名 Following Pointer, Smooth Cursor, Cursor follow, Spring follow cursor
図形やラベルが、バネのような、またはなめらかな遅れでポインターを追いかけます。
使いどころ
カスタムカーソル、ツールチップ
[適用する場所]にマウスストーカー(Cursor Follower)を追加してください。フォローポインター(following pointer)、スムーズカーソル(smooth cursor)とも呼ばれます。
小さな丸いマーカーが、やわらかくなめらかな遅れでポインターを追いかけ、ポインターが止まった位置にすっと滑り込んで止まるようにしてください。弾みは不要です。
本来のポインターは表示したままにし、マーカーがクリックを妨げないようにして、タッチデバイスでは表示しないでください。- A
- B
- C
- D
ABCD
ポインターを動かしてください
Cursor Image Hover (カーソル画像ホバー)
別名 Hover image follow, Image preview on hover
テキストのリスト項目にホバーしている間、プレビュー画像がポインターを追いかけます。
使いどころ
プロジェクト一覧、メニュー
[適用する場所]にカーソル画像ホバー(Cursor Image Hover)の効果を追加してください。ホバー画像フォロー(hover image follow)、ホバー時の画像プレビュー(image preview on hover)とも呼ばれます。
ポインターがテキストのリスト項目の上にある間、その項目の小さなプレビュー画像がポインターの横に浮かび、少しなめらかに遅れて追従し、別の項目へ移ると次の画像へスライドして切り替わるようにしてください。
プレビューがリストのクリックを妨げないようにし、タッチやキーボードではプレビューなしでもリストを完全に使えるようにしてください。