概要
マウスに少し遅れて追従する円形カーソル。リンク上では拡大し、`mix-blend-mode` で背景色に応じて色が反転する、サイト全体の没入感を高めるインタラクション。
使用技術
・GSAP（`quickTo` による高頻度更新）/ CSS `mix-blend-mode`
実装ポイント
・追従は `gsap.quickTo` を使用。`mousemove` の度に `gsap.to` を作り直すのではなく、専用の高速セッターで座標を更新するためパフォーマンスが良い
・`duration: 0.4, ease: “power3″` で、マウスにわずかに遅れて滑らかに追従する「ストーカー」感を表現
・`mix-blend-mode: difference` により、カーソルが背景の上で常に反転色になり、どんな色/画像の上でも視認性を確保
・`body { cursor: none }` でOSカーソルを隠し、この円だけを見せる
・`a, button` に `mouseenter/mouseleave` を付与し、ホバーで `scale: 1.5` に拡大してクリック可能を示唆
コアスニペット
// quickToで専用の高速セッターを用意し、mousemoveごとに座標だけ更新
gsap.set(stalker, { xPercent: -50, yPercent: -50 });
const xTo = gsap.quickTo(stalker, "x", { duration: 0.4, ease: "power3" });
const yTo = gsap.quickTo(stalker, "y", { duration: 0.4, ease: "power3" });
window.addEventListener("mousemove", (e) => {
xTo(e.clientX);
yTo(e.clientY);
});