Magnetic Button

Fine-pointer magnetic pull with short travel, spring settle and visible focus rings.

Restrained desktop pullFine-pointer magnetic pull with short travel, spring settle and visible focus rings.Use this asset as a visual and interaction brief. Copy the prompt into your AI coding tool, then adapt layout, brand voice and motion intensity to your product.

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
}