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:

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

js (global):

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

js (module):

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

options

{selectors: ['.nav-link','.spa-link','.btn','[data-magnetic]'],proximityRadius: 80,// pxmaxMovement: 12,// pxstrength: 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