【CodePen】マウスストーカーのアイデア12選

💡 実装のポイント
Canvas APIでマウス位置（mouseオブジェクト）とカーソル位置（cursorオブジェクト）を別々に管理し、cursor.x += (mouse.x - cursor.x) * options.easeの線形補間で追従させる構成。GUIからease値（0.05〜1）をリアルタイム調整でき、移動速度に応じてcursor.s（スケール）が縦に潰れるストレッチ変形もctx.scale(1, cursor.s)で実現している。外部ライブラリはlil-guiのみ。

💡 実装のポイント
外部ライブラリ不使用のバニラJS実装。フレームごとにdeltaMouseX/Yで前フレームとの差分を取り、ピタゴラスの定理で速度（mouseVelocity）を算出。それを0〜0.5に変換したscaleValueでスクイーズ量を決め、Math.atan2で進行方向の角度を求めてrotateに適用している。translate→rotate→scaleの順でtransformを結合するのがポイント。速度が20以下のときは角度更新をスキップして微小な揺れを抑えている。

💡 実装のポイント
中央の小さなドット（.cursor__circle--small）と外側のリング（.cursor__circle--large）を別々の追従速度（lerpの係数0.2と0.1）で動かすことで奥行き感を演出。gsap.ticker.addでアニメーションループを管理し、data-pointer="hover"属性を持つ要素へのマウスエンター時にgsap.toでリングをscale拡大・ドットをscale 0に切り替えるインタラクション設計。Bowserライブラリでタッチデバイスを判別し、モバイルでは自動的に無効化する配慮もある。

💡 実装のポイント
#cursor（黒い小ドット）と#follower（半透明の黄色い大円）の2要素構成で、それぞれにgsap.quickSetterを使ってx/y座標を高速更新している。speed = 0.5（コメントに0.01〜1と記載）をgsap.ticker.deltaRatio()でフレームレート正規化し、pos.x += (mouse.x - pos.x) * dtの計算で遅延追従を実現。.linkクラスへのホバーでis-activeクラスをトグルし、.followerのサイズを40pxから120pxに拡大するインタラクション設計になっている。

💡 実装のポイント
jQueryとrequestAnimationFrameを組み合わせたシンプルな構成。posX += (mouseX - posX) * 0.2の遅延係数でなめらかな追従を実現し、$cursor.css({ left, top })でDOM位置を更新。.hover-linkホバー時に.hoveringクラスを付与し、width/heightを15px→40pxに、border-colorとbox-shadowを白から#ff6b6bに切り替えるCSSトランジションで演出している。

💡 実装のポイント
Reactコンポーネントとして実装され、trailLength定数（デフォルト10）本の.trail-segmentをuseRefの配列で管理している。各セグメントをインデックスに応じたdelayでGSAPアニメーションさせることでトレイル効果を生成。マウスダウン時にはcursorRefのwidthを50pxに拡大し--green色のborder+boxShadowを付与。移動が500ms停止するとisMovingがfalseになりトレイルのopacityをフェードアウトする設計になっている。

💡 実装のポイント
mousemoveイベントでマウス座標を--x/--yのCSS変数としてdocument.documentElementに設定し、.overlayのclip-path: circle(20vmin at calc(var(--x, 50%) * 1%) calc(var(--y, 50%) * 1%))でスポットライト円を追従させる仕組み。ボタンクリックで.is-openクラスをトグルし、clip-path: circle(200%)＋cubic-bezier(1,-0.01,.01,.99)のカスタムイージングでオーバーレイを全画面に展開する演出になっている。

💡 実装のポイント
mousemoveごとにdocument.createElement('div')で.cursor要素を動的生成し、配列trailに積み上げていく仕組み。trailLength = 20を超えた古い要素はtrail.shift()で除去。CSSの@keyframes fadeOut（opacityを0に・scaleを2に）をそのまま使い、animationendイベントで要素をDOMから削除するシンプルな設計。ネオン色の変更は.cursorのbackground-colorとbox-shadowの#ff007fを差し替えるだけでOK。

💡 実装のポイント
JSでdiv#stalkerを動的生成し、mousemoveでleft/topをリアルタイム更新するjQuery実装。#stalkerのスタイルはCSSのlinear-gradient二重がけ（横5px・縦5px）で十字線を描いており、transform: translate(-50%, -50%)で中心合わせ。リンクホバー時に.activeクラスを付与するとbackground-sizeが拡大しopacity: 0＋filter: blur(1em)でフワッと消える演出になっている。

💡 実装のポイント
JSで36個の.box（span要素）を生成し、それぞれにhue-rotate(${i * 10}deg)フィルターを適用することで虹色グラデーションを作り出している。CSSのtransform-origin: center 50pxで各ピースを円の外周に沿わせ、gsap.to(".box", { rotate: (index) => index * 10, stagger: 0.05 })のstagger設定でパーティクルが順番にカーソル位置まで追従する動きを実現している。

💡 実装のポイント
TypeScriptで記述された本格的なクラス構成（App・Follower・Input）で、RxJSのObservableでマウス・タッチイベントを統合している。FollowerクラスがSVG<path>にポイント配列を書き込み続け、removeDelay = 400ms経過した末尾ポイントをpopすることでテールが自然消滅する。ランダムにmakeCircle/makeSquare/makeTriangleを呼び出してSVG要素を生成し、TweenMax.fromToでscale 0まで弾き飛ばす演出も含まれる。

💡 実装のポイント
⚠️ このPenはフェッチ時にbot保護が作動したため、ソースコードの詳細確認ができていません。CodePenのページでソースを直接ご確認ください。