Magnetic Button Demo

Live Development
Edit the TypeScript source and see changes instantly with HMR!

Basic Examples

data-magnetic
distance="120" attraction="0.2"
distance="80" attraction="0.8" fraction="0.05"
distance="200" attraction="0.1" fraction="0.2"

Interactive Controls

Adjust Parameters Live

Usage Examples

<!-- Basic usage --> <button data-magnetic>Hover me!</button> <!-- With custom parameters --> <button data-magnetic data-distance="150" data-attraction="0.3" data-fraction="0.2"> Custom magnetic button </button> <!-- Programmatic usage --> <script> import { MagneticButton } from '@phucbm/magnetic-button'; // Auto-initialize all elements with data-magnetic new MagneticButton(); // Or target specific element const button = document.querySelector('.my-button'); new MagneticButton(button, { distance: 200, attraction: 0.5, onEnter: (data) => console.log('Magnetized!', data) }); </script>