Cursor Follower
カーソルフォロワー
どんな動き？
デフォルトのカーソルを非表示にし、代わりに丸い点やリングをマウス位置に追従させるカスタムカーソル演出。中心の点は即座に動く一方、外側のリングはわずかに遅れて追いかけてくるため、独特の粘り気のある操作感が生まれる。JavaScriptでマウス座標を取得し、GSAPなどでイージングをかけて実装するのが一般的。クリエイティブ系サイトのブランド体験を高める要素として使われる。
よく使う場所
ポートフォリオサイトブランドサイトアートディレクション系LP
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Replace the default cursor with a dot and a larger ring that trails behind it with a slight delay as the mouse moves.Trigger:
mousemove anywhere on the page (hover).
Initial state:
Dot: centered exactly on the pointer position
Ring: centered exactly on the pointer position
Animation:
The dot tracks the pointer instantly, while the ring eases toward the pointer's position with a short lag, always trailing slightly behind the dot's movement.
Final state:
Both settle on the pointer's current position once the mouse stops moving.
Timing:
dot: near-instant (no easing delay); ring: ~0.3s ease-out lag per movement update.実装方法の候補
この動きは以下の技術で実装できます。
JavaScriptGSAP
別名・関連ワード
Custom CursorCursor RingTrailing Cursor