magnetic cursor hover pull interactive magnetic button that follows cursor interactive hover microinteraction playful UI element behavior hover effects feel static and lifeless need magnetic cursor-follow without heavy libraries want subtle interactive polish
Magnetic
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/magnetic.json Magnetic pointer pull
The element subtly chases the cursor instead of staying rigidly fixed.
Background
Customize
Quick Start
<button class="magnetic px-6 py-3">Hover me</button>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 480 bytes · 22 lines
- Custom Properties
-
--magnetic-strength--magnetic-duration--mouse-x--mouse-y - Classes
-
.magnetic
magnetic cursor hover pull interactive
Elements subtly follow the cursor on hover using CSS transform driven by custom properties. A small JS event listener sets --mouse-x and --mouse-y relative to the element center.
Magnetic button
<button class="magnetic rounded-full bg-white/10 px-8 py-4 text-white font-semibold border border-white/20"
onmousemove="const r=this.getBoundingClientRect();this.style.setProperty('--mouse-x',event.clientX-r.left-r.width/2);this.style.setProperty('--mouse-y',event.clientY-r.top-r.height/2)"
onmouseleave="this.style.setProperty('--mouse-x',0);this.style.setProperty('--mouse-y',0)">
Hover me
</button>