はじめに
自分用メモ。
カーソル系は盛りすぎるとすぐ使いづらくなるので、まずは控えめな追従と控えめな吸着だけで十分。CTA を主役にしたいなら、カーソルは目立たせすぎない方がまとまる。
このサンプルで見返したいのは、遅れてついてくるカーソルと、ボタン側の小さい磁力表現のバランス。どちらも少し物足りないくらいで止めた方が違和感が出にくい。
組み合わせのポイント
- カーソルはぴったり追いかけず、わずかに遅らせて余韻をつくる
- ボタンは吸い付く量を控えめにして、意図しない操作感にならないようにする
- hover 中だけ反応を強め、離れた瞬間はすっと元に戻して切り替えを明確にする
- 戻りのイージングを柔らかくすると、実際の操作に対して違和感が出にくい
- 演出の主役はあくまでボタンなので、カーソル側を目立たせすぎない
実装のポイント
- カーソル用とボタン用で ref を分け、追従処理と吸着処理を混ぜない
- カーソルの追従は
pointermoveで受けてgsap.to()に流す - ボタンの磁力は
getBoundingClientRect()から中心差分を取り、移動量を縮小して使う - hover 解除時は
x: 0, y: 0に戻す専用処理を用意して、残留を防ぐ
まとめ
覚えておくことは、マウス演出は派手さより触感優先。強く引っ張らず、小さく追従して、小さく戻すところから始める。