磁吸按钮
Magnetic Button
指针靠近时按钮被吸过去一点点，移开又弹回原位。
- 又叫：
- 磁力按钮
- 跟随鼠标的按钮
- 吸附光标
- magnetic hover
- cursor-following button
- magnetic pull
- 展厅
- 交互反馈
- 形态
- 指针交互
- 播放
- 手动触发
- 关键词
- 需要 JS / 浏览器 API / 主线程每帧 / 只能指针操作 / 可以直接用
参数工作台
复制给 AI
随参数实时更新做一个磁吸按钮（magnetic button）：监听容器的 pointermove，用 getBoundingClientRect 算出按钮中心，指针进入按钮宽高 1.6 倍范围内时，让按钮朝指针方向偏移，偏移量 = 指针到中心的距离 × 0.30，并限制在 12px 以内；指针离开就复位，复位过渡 350ms cubic-bezier(0.22, 1, 0.36, 1)。用 transform: translate3d 移动，pointermove 里用 requestAnimationFrame 节流。系统减少动态效果时完全不跟随。
magnetic button, pointermove + getBoundingClientRect, offset = (pointer - center) * 0.30, clamp to 12px, activation radius 1.6x button size, return with transition 350ms cubic-bezier(0.22, 1, 0.36, 1), transform: translate3d, throttle with requestAnimationFrame, disable under prefers-reduced-motion
https://publieople.github.io/design-museum/entry/magnetic-button/?stage=light
链接带着你调好的参数
什么时候用
- 首屏主 CTA 想抓一下注意力，又不适合做大动效
- 按钮数量很少的展示页或作品集，允许一个有个性的主操作
- 想暗示「这个按钮在等你」，让指针和它产生关系
适用场景：按钮 / 导航 / 页面
推荐取值
- 触发半径
- 按钮宽高的 1–1.5 倍
- 最大位移
- 6–16px
- 跟随系数
- 0.2–0.4
- 复位时长
- 300–500ms
- 复位缓动
- cubic-bezier(0.22, 1, 0.36, 1)
别搞混
和「悬停抬升（hover lift）」的区别
抬升的方向是固定的，永远垂直向上；磁吸会朝指针方向做二维偏移，指针在左下方就往左下方走。
和「指针视差（pointer parallax）」的区别
视差是整个容器跟着指针大范围移动，几十像素起步；磁吸只在按钮附近的小范围内移动几像素到十几像素。
容易踩的坑
- 触发半径开太大（超过按钮尺寸两倍）会满屏乱飘，1–1.5 倍按钮宽高就够
- 位移不设上限会让按钮躲开指针、点不中，最多 6–16px
- 每次 pointermove 都 setState 会掉帧，用 requestAnimationFrame 节流，或直接改 CSS 变量和 element.style
- 触摸设备没有指针悬停，要直接给静止态；算中心点用 getBoundingClientRect，别忘了页面滚动的影响
无障碍降级
prefers-reduced-motion: reduce 下完全关闭指针跟随，按钮原地不动，悬停反馈改成底色或描边变化。
关键词
- pointermove
- transform: translate3d
- getBoundingClientRect
- CSS custom property
- requestAnimationFrame
- magnetic hover