プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にカスタムカーソル(Custom Cursor)を追加してください。アニメーテッドカーソル(animated cursor)、カーソルリプレースメント(cursor replacement)とも呼ばれます。
標準の矢印を、ポインターにぴったり付いてくる小さな点と、少し遅れて追いかけるリングに置き換え、リンクやボタンの上ではリングがなめらかに大きくなるようにしてください。
タッチデバイスとテキスト入力欄では通常のカーソルのままにし、カスタムカーソルがクリックを妨げないようにしてください。似ているモーション
A
ポインターを動かしてください
Cursor Follower (マウスストーカー)
別名 Following Pointer, Smooth Cursor, Cursor follow, Spring follow cursor
図形やラベルが、バネのような、またはなめらかな遅れでポインターを追いかけます。
使いどころ
カスタムカーソル、ツールチップ
[適用する場所]にマウスストーカー(Cursor Follower)を追加してください。フォローポインター(following pointer)、スムーズカーソル(smooth cursor)とも呼ばれます。
小さな丸いマーカーが、やわらかくなめらかな遅れでポインターを追いかけ、ポインターが止まった位置にすっと滑り込んで止まるようにしてください。弾みは不要です。
本来のポインターは表示したままにし、マーカーがクリックを妨げないようにして、タッチデバイスでは表示しないでください。AB
ポインターを動かしてください
Blend-Mode Cursor (ブレンドモードカーソル)
別名 Difference cursor, Inverting cursor
円形のカーソルが mix-blend-mode の difference で下にある色を反転させます。
使いどころ
クリエイティブなポートフォリオ
[適用する場所]にブレンドモードカーソル(Blend-Mode Cursor)を追加してください。ディファレンスカーソル(difference cursor)、反転カーソル(inverting cursor)とも呼ばれます。
ポインターを塗りつぶしの円に置き換え、遅れなくポインターの真下に置き、通過するテキストや図形の色を反転させてください。
合成はその範囲内に閉じ込めてページの他の部分と混ざらないようにし、ダークモードでもはっきり反転するようにして、タッチデバイスでは通常のカーソルのままにしてください。ポインターを動かしてください
Cursor Trail (カーソルトレイル)
別名 Mouse trail
ポインターの動きに合わせて、消えていく図形の連なりが後ろに残ります。
使いどころ
遊び心のあるランディングページ
[適用する場所]にカーソルトレイル(Cursor Trail)の効果を追加してください。マウストレイル(mouse trail)とも呼ばれます。
ポインターが動くと、小さな点の短い連なりが後ろに残り、それぞれがすばやく縮んで消えていくようにしてください。軌跡は短く、なめらかに経路をなぞる感じです。
軌跡はポインターが動いている間だけ描き、クリックを妨げないようにし、タッチデバイスやユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は表示しないでください。aBcD
ポインターを動かしてください
Adaptive Caret (アダプティブキャレット)
別名 Cursor: Adaptive caret size
テキストキャレットが、隣の文字の大きさに合わせて伸び縮みします。
使いどころ
エディター、タイピング演出
[適用する場所]にアダプティブキャレット(Adaptive Caret)の効果を追加してください。アダプティブキャレットサイズ(adaptive caret size)とも呼ばれます。
テキストキャレットがポインターに最も近い文字の前へ移動し、その文字の高さに合わせて素早く伸び縮みするようにしてください。なめらかでキビキビとしたサイズ変化で、弾みは不要です。
テキスト自体はずらさず、キャレットがポインターと同じようにキーボード操作にも追従するようにしてください。Cursorのほかのモーション
A
ポインターを動かしてください
Magnetic Button (マグネティックボタン)
別名 Magnetic target, Magnetic hover
ポインターが近づくと要素が引き寄せられ、離れるとぱっと元の位置に戻ります。
使いどころ
CTAボタン、ナビゲーションのアイコン
[適用する場所]にマグネティックボタン(Magnetic Button)の効果を追加してください。マグネティックターゲット(magnetic target)、マグネティックホバー(magnetic hover)とも呼ばれます。
ポインターが近づくとボタンが少しそちらへ引き寄せられ、ラベルはさらに少し大きく動くようにしてください。ポインターが離れたら、小さく弾んで元の位置へ戻ります。
周りのレイアウトがずれないようにし、タッチデバイスやユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は引き寄せをオフにしてください。ポインターを動かしてください
並んだ小さな線が、磁石の周りの砂鉄のようにポインターの方向へ向きを変えます。
使いどころ
クリエイティブな背景
[適用する場所]にマグネティックフィリング(Magnetic Filings)の効果を追加してください。
格子状に並んだ短い線が、磁石の周りの砂鉄のように、それぞれすぐにポインターの方を真っすぐ向くようにしてください。ポインターがないときは全部が中心を向きます。
クリックを妨げない装飾的な背景として扱い、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は線を静止させてください。