マグネティックホバー — 動きの伝え方辞典

hover

magnetic hover / magnetic button

マグネティックホバー

カーソルが近づくと、要素が磁石のように吸い寄せられて追従する動き。離れると元の位置に弾性で戻る。Awwwards系サイトのボタンで最頻出のマイクロインタラクション。

01 — Demo video

Play live →

02 — Prompt template

ボタンに magnetic hover を実装してください。

- カーソルが要素の中心から {{radius}}px 以内に入ったら反応
- 要素はカーソル方向に strength {{strength}} で吸い付く
- 追従は毎フレーム lerp(係数 {{lerp}})で補間し、遅れて付いてくる質感にする
- 内側のテキストは外枠の 0.35 倍の強さで動かす(視差)
- mouseleave 時は elastic 系イージングで元の位置に戻す
- prefers-reduced-motion 時はアニメーションを無効化

ボタンに magnetic hover を実装してください。

- カーソルが要素の中心から {{radius}}px 以内に入ったら反応
- 要素はカーソル方向に strength {{strength}} で吸い付く
- 追従は毎フレーム lerp(係数 {{lerp}})で補間し、遅れて付いてくる質感にする
- 内側のテキストは外枠の 0.35 倍の強さで動かす(視差)
- mouseleave 時は elastic 系イージングで元の位置に戻す
- prefers-reduced-motion 時はアニメーションを無効化

ボタンに magnetic hover を実装してください。

- カーソルが要素の中心から {{radius}}px 以内に入ったら反応
- 要素はカーソル方向に strength {{strength}} で吸い付く
- 追従は毎フレーム lerp(係数 {{lerp}})で補間し、遅れて付いてくる質感にする
- 内側のテキストは外枠の 0.35 倍の強さで動かす(視差)
- mouseleave 時は elastic 系イージングで元の位置に戻す
- prefers-reduced-motion 時はアニメーションを無効化

03 — Params

strength(吸い付きの強さ) — 範囲 0.05〜1 / 初期 0.35
1に近いほどカーソルにベッタリ付いてくる。0.3前後が上品。
lerp(追従の粘り) — 範囲 0.03〜0.5 / 初期 0.12
小さいほど「ぬるっと」遅れて付いてくる。大きいと機敏。
radius(反応距離 px) — 範囲 60〜300 / 初期 140
この距離に入った瞬間から吸い付き始める。

04 — Vocab

lerp — 線形補間。「毎フレーム、目標位置に少しずつ近づける」計算。遅れて付いてくる質感の正体。
strength — カーソル位置をどれだけ反映するかの係数。吸い付きの強さ。
elastic ease — 行き過ぎてから戻る、ばねのようなイージング。GSAPなら elastic.out(1, 0.4)。
inner / outer — 枠と中のテキストを別の強さで動かすと高級感が出る(テキストは弱め)。

05 — NG → OK examples

言い方: 「「ボタンをぬるっと磁石っぽくして」」

なぜNG: 「ぬるっと」は速度・粘り・距離のどれを指すのか曖昧。AIはtransitionを付けただけの平凡なhoverを返しがち。何が「磁石」なのかも未定義。

言い方: 「「magnetic hoverを実装。lerpで追従、strengthとradiusは数値指定、mouseleaveでelastic系イージングで戻す」」

なぜOK: 動きの正式名称 + 実装方式(lerp) + パラメータ数値 + 終了時の挙動。この4点が揃うと一発で意図通りになる。