A button that is attracted toward the cursor using a smooth physics-based motion.
Magnetic Button is a cursor-responsive interaction that simulates magnetic attraction using a lightweight physics model. As the pointer approaches the button, an attraction force pulls the element toward the cursor. A spring force continuously pulls the button back toward its original position, while damping stabilizes the motion and prevents oscillation. The animation runs on GSAP’s ticker with quickSetter updates, ensuring high-performance frame updates even during rapid pointer movement.
npm i gsap @gsap/react
Ideal for call-to-action buttons, interactive landing pages, creative portfolios, and UI elements where subtle physics-driven motion enhances user engagement.
Easy-Intermediate
| Prop | Type | Description |
|---|---|---|
| force | number | Strength of the cursor attraction force applied to the button. |
| damping | number | Velocity damping factor that stabilizes motion and reduces oscillation. |
| spring | number | Spring force pulling the button back toward its original resting position. |
These components are designed for developers who have at least an intermediate understanding of React and GSAP. To fully customize, extend, or modify the behavior, familiarity with both libraries is recommended. They are not specifically intended for absolute beginners.
However, beginners can still use them by simply copying and pasting the code, it is already optimized and production-ready out of the box.
© 2026 dropui.design