Elements magnetically ease toward the cursor then settle back with spring physics.
Move the pointer near the button and it follows you. Padding and Strength are wired to the controls underneath.
| Prop | Type | Default | Description |
|---|---|---|---|
padding | number | 100 | Specifies the distance (in pixels) around the element that activates the magnet pull. |
disabled | boolean | false | Disables the magnet effect when set to true. |
magnetStrength | number | 2 | Controls the strength of the pull; higher values reduce movement, lower values increase it. |
activeTransition | string | "transform 0.3s ease-out" | CSS transition applied to the element when the magnet is active. |
inactiveTransition | string | "transform 0.5s ease-in-out" | CSS transition applied when the magnet is inactive (mouse out of range). |
innerClassName | string | "" | Optional CSS class name for the moving (inner) element. The outermost wrapper takes the regular class attribute. |
| Slot | Description |
|---|---|
default | The content to be displayed inside the magnetized element. |
Keyboard shortcuts and ARIA behavior.