motion-magnetic

Pulls the element toward the cursor as it moves across it. Springs back smoothly on leave.

Preview

Import

import 'motion-components/motion-magnetic'   // just this one
import 'motion-components'               // or the whole library

Usage

<motion-magnetic strength="0.4">
  <button>Magnetic</button>
</motion-magnetic>

Properties

Attribute Property Type Default Description
strength strength number 0.4 Fraction of cursor offset to apply (0 = none, 1 = full)
duration duration number 0.5 Spring duration of the pull and release, in seconds
bounce bounce number 0.4 Spring bounciness of the pull and release (0 = no overshoot)
disabled disabled boolean false Ignore pointer input and settle to the rest state

Accessibility

Respects prefers-reduced-motion: when enabled, the magnetic pull is disabled and the element stays at its natural position.