Magnetic Interaction

磁吸按钮与光标跟随

把鼠标位置换算成位移,再给一个 lerp 阻尼。四个变体都是同一个公式。

01 基础磁吸

整个按钮朝光标偏移 35%。

02 双层磁吸

内部文字再多走一点,做出层次感。

03 高光跟随

不动元素,只把坐标传给 CSS 变量。

Spotlight Card 鼠标在哪,光晕就在哪。完全由 CSS 渲染。

04 3D 倾斜

把偏移换成 rotateX / rotateY。

TILT

全部基于同一个公式:offset = (鼠标 - 元素中心) × strength,再用 lerp 0.15 平滑到位。触屏设备与减弱动画偏好下自动降级。