プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にカーソルスポットライト(Cursor Spotlight)の効果を追加してください。懐中電灯カーソル(flashlight cursor)、スポットライト効果(spotlight effect)とも呼ばれます。
やわらかな光の円がポインターを追いかけてその下のコンテンツを照らし出し、それ以外の部分は暗くしたままにしてください。
追いかけるポインターがないタッチデバイスでは、代わりにコンテンツ全体を明るく表示してください。似ているモーション
A
ポインターを動かしてください
Card Spotlight (カードスポットライト)
別名 Spotlight hover, Pointer glow, Mouse-following glow, Radial gradient hover
やわらかな放射状の光がポインターを追ってカードの表面を移動し、下の背景を浮かび上がらせます。
使いどころ
機能紹介カード、ベントーグリッド
[適用する場所]にカードスポットライト(Card Spotlight)のエフェクトを追加してください。スポットライトホバー(spotlight hover)、ポインターグロー(pointer glow)、マウス追従グロー(mouse-following glow)、ラジアルグラデーションホバー(radial gradient hover)とも呼ばれます。
やわらかくほのかな放射状の光がポインターを追ってカードの表面を移動し、ポインターが入ったらフェードイン、離れたらフェードアウトするようにしてください。
文字が読みやすいよう光はカードの内容の背後に置き、タッチデバイスではカードを光らせないでください。A
マウスを乗せてください
SVG Mask Reveal (SVGマスクリビール)
別名 SVG Mask Effect, Clip-path Reveal, Spotlight Mask
マスクの形がワイプしたりポインターを追ったりして、下にあるコンテンツを見せます。
使いどころ
画像やコンテンツの表示演出
[適用する場所]にSVGマスクリビール(SVG Mask Reveal)のホバー効果を追加してください。クリップパスリビール(clip-path reveal)、スポットライトマスク(spotlight mask)とも呼ばれます。
ポインターを乗せている間は円形のマスクが中央から広がって下のコンテンツを見せ、ポインターが外れると再び閉じるようにしてください。滑らかで、やや素早く。
何もずれないよう2つのレイヤーをまったく同じサイズにし、キーボードフォーカスやタップでも同じ表示をしてください。ABCDEFGHIJKL
ポインターを動かしてください
Text Reveal Card (テキストリビールカード)
別名 Spotlight Text Reveal
カード上でポインターを動かすと、マスクの境界やスポットライトの下に隠れたテキストが現れます。
使いどころ
機能紹介カード
[適用する場所]にテキストリビールカード(Text Reveal Card)エフェクトを追加してください。スポットライトテキストリビール(spotlight text reveal)とも呼ばれます。
ポインターがカード上を動くと、縦の境界線がぴったり追従して片側に隠れたテキストを見せるようにしてください。遅れのない、なめらかで直接的な動きにしてください。
ポインターのないタッチデバイスではドラッグやタップで隠れたテキストが見えるようにし、隠れたテキストもスクリーンリーダーで読めるようにしてください。Spotlight (スポットライト)
別名 Spotlight sweep, Light cone
柔らかな光の円錐や光だまりがすっと入ってきて、背景の一部を照らします。
使いどころ
ヒーロー見出し
[適用する場所]にスポットライト(Spotlight)のエフェクトを追加してください。スポットライトスイープ(spotlight sweep)、ライトコーン(light cone)とも呼ばれます。
ページが読み込まれたら、柔らかな光の円錐が角から斜めに差し込み、見出しの上で止まって、届くにつれて明るくなるようにしてください。ゆっくりなめらかに。
再生は一度だけにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は最初から光が当たった状態で表示してください。Cursorのほかのモーション
ポインターを動かしてください
Cursor Trail (カーソルトレイル)
別名 Mouse trail
ポインターの動きに合わせて、消えていく図形の連なりが後ろに残ります。
使いどころ
遊び心のあるランディングページ
[適用する場所]にカーソルトレイル(Cursor Trail)の効果を追加してください。マウストレイル(mouse trail)とも呼ばれます。
ポインターが動くと、小さな点の短い連なりが後ろに残り、それぞれがすばやく縮んで消えていくようにしてください。軌跡は短く、なめらかに経路をなぞる感じです。
軌跡はポインターが動いている間だけ描き、クリックを妨げないようにし、タッチデバイスやユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は表示しないでください。B
ポインターを動かしてください
Custom Cursor (カスタムカーソル)
別名 Animated cursor, Cursor replacement
標準の矢印が装飾された点やリングに置き換わり、操作できる要素の上で形が変わります。
使いどころ
ポートフォリオやエージェンシーのサイト
[適用する場所]にカスタムカーソル(Custom Cursor)を追加してください。アニメーテッドカーソル(animated cursor)、カーソルリプレースメント(cursor replacement)とも呼ばれます。
標準の矢印を、ポインターにぴったり付いてくる小さな点と、少し遅れて追いかけるリングに置き換え、リンクやボタンの上ではリングがなめらかに大きくなるようにしてください。
タッチデバイスとテキスト入力欄では通常のカーソルのままにし、カスタムカーソルがクリックを妨げないようにしてください。A
ポインターを動かしてください
Magnetic Button (マグネティックボタン)
別名 Magnetic target, Magnetic hover
ポインターが近づくと要素が引き寄せられ、離れるとぱっと元の位置に戻ります。
使いどころ
CTAボタン、ナビゲーションのアイコン
[適用する場所]にマグネティックボタン(Magnetic Button)の効果を追加してください。マグネティックターゲット(magnetic target)、マグネティックホバー(magnetic hover)とも呼ばれます。
ポインターが近づくとボタンが少しそちらへ引き寄せられ、ラベルはさらに少し大きく動くようにしてください。ポインターが離れたら、小さく弾んで元の位置へ戻ります。
周りのレイアウトがずれないようにし、タッチデバイスやユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は引き寄せをオフにしてください。