magnetic-hover

proximity hover micro-interactions (Apple-style) in pure JS

installation

• global script: copy src/magnetic-hover.js and import it via <script>
• ESM: import the module directly into your app

quick usage

html:

<button class="btn" data-magnetic>Button</button>

js (global):

<script src="src/magnetic-hover.js"></script>
<script>
  const { initMagneticHover } = window.MagneticHoverBundle;
  initMagneticHover();
</script>

js (module):

import { MagneticHover, initMagneticHover } from './src/magnetic-hover.js';
const mh = initMagneticHover({ maxMovement: 12, strength: 2 });

options

{
  selectors: ['.nav-link', '.spa-link', '.btn', '[data-magnetic]'],
  proximityRadius: 80,   // px
  maxMovement: 12,       // px
  strength: 2,           // 0-∞
  enabled: true
}

api

• initMagneticHover(options) → global instance (unique)
• instance.enable() / instance.disable()
• instance.configure(opts)
• instance.findElements() → rescans the DOM
• instance.destroy()

accessibility

• respects prefers-reduced-motion → effect auto-disabled
• disable via .no-magnetic class, [data-magnetic="false"] attribute, or localStorage if you implement your own toggle

examples

• examples/basic.html
• examples/custom-selectors.html
• examples/reduced-motion.html

license

MIT