Menu

Magnetic

magnetic allows elements to be attracted toward the cursor based on proximity.
This is useful for buttons, icons, or hover effects that feel dynamic and interactive.

Basic Usage

magnetic('.magnet', {
  enterRadius: 100,
  leaveRadius: 150,
  strength: 5,
  enterSpeed: 0.15,
  leaveSpeed: 0.1,
})

Live Example

Configuration Options

Property
Description
activeClass
Class added when the element snaps to the cursor.
enterRadius
Distance in px or CSS unit at which an element starts snapping.
leaveRadius
Distance at which snapping ends.
enterSpeed
Lerp speed for entering (0–1).
leaveSpeed
Lerp speed for leaving (0–1).
strength
How strong the magnetic effect appears (lower = stronger displacement).
singleElement
If true, only one element can snap at a time.
dev
Enable debug logging (default: true).
onEnter
Callback when an element starts snapping.
onLeave
Callback when an element stops snapping.