Skip to the content

Library/ 01 magneticProButtons

Magnetic

A button that leans toward the cursor, then snaps home.

A Pro component: the live demo and the code come with Pro.

Settings

Pro
  • strength
  • radius
  • innerStrength
  • stiffness
Tune it live with Pro

What it does

Magnetic is an animated button ready for your AI assistant, React or plain JavaScript, with no dependencies. Also called magnetic button, cursor attraction or button motion.

The element drifts toward the pointer as it comes near, its label following a little further, and springs back into place once the pointer leaves. Gives a call to action a tactile feel. Turns itself off on touch screens.

With Pro

The AI prompt, the React component, the plain JavaScript file and the embed come with Pro, along with the live demo. Every setting is optional: with none, you get the effect as the preview shows it.