Magnetic Button

A physics-based magnetic button that smoothly drifts towards the pointer position when within proximity, creating an irresistible tactile pull.

Primary call-to-action buttons in hero banners and splash landing pages.
Guiding user attention towards key conversion targets with interactive attraction.
Parallax text/icon drift within the button for exaggerated physical feel.

Prop	Type	Default	Description
`children`	`ReactNode`	—	Button label and icon contents.
`magneticRadius`	`number`	`220`	Detection radius in pixels around the button center.
`magneticStrengthX`	`number`	`16`	Maximum displacement in pixels along the X axis.
`magneticStrengthY`	`number`	`8`	Maximum displacement in pixels along the Y axis.
`className`	`string`	—	Additional CSS class names applied to the button element.
`wrapperClassName`	`string`	—	Class names applied to the outer pointer tracking container.

Spring physics with stiffness 180, damping 15, and light mass 0.1 for high-speed responsiveness.
Inner text/icon contents translate with differentiated multipliers creating parallax depth inside the pill.
Smooth cosine ease-out attenuation as pointer approaches the boundary radius.