Library Effects

磁吸按钮

精细指针下的磁吸拉动：短行程、弹簧回弹与可见焦点环。

克制的桌面磁吸精细指针下的磁吸拉动：短行程、弹簧回弹与可见焦点环。将本资源作为视觉与交互简报使用。把 Prompt 复制到 AI 编程工具，再按你的产品调整布局、品牌语气与动效强度。

Back to Library

Then paste it into your favorite AI coding tool.

Details

Type: Effects
Category: Creative
Style: Experimental
Tech stack: CSS
Animation: Cursor
Difficulty: Beginner
License: Personal
Access: Free
Creator: Noah Bennett
Views: 800

Cursor
Magnetic
CSS
JavaScript

Copy. Paste. Create.

This prompt is engineered to communicate visual direction, layout, interaction, animation and technical requirements.

Implement a magnetic button for fine pointers only.

Behavior: on mousemove near the button, translate toward the pointer with max travel ~12–16px; on leave, ease back. Keep scale change subtle (≤1.03). Preserve :focus-visible outlines.

Gates: disable when prefers-reduced-motion, pointer:coarse, or saveData. No library required; vanilla JS + CSS transform.

Do not affect layout (use transform only).

Code

const btn = document.querySelector('[data-magnetic]');
const fine = window.matchMedia('(pointer:fine)').matches;
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (fine && !reduce && btn) {
  // attach pull within 80px radius, clamp to 14px
}