# <motion-magnetic>

Magnetic cursor pull. Slotted content drifts toward the pointer by
`strength`, springs back when the mouse leaves. Best on small interactive
targets like buttons and icons.

**Use it for:** small targets such as buttons, icon buttons and short links
that should drift a little toward the mouse pointer.

**Avoid it for:** large areas such as cards or images. The pull is a
fraction of the distance from the center, so large elements move far. Use
`motion-tilt` or `motion-hover` there.

**Accessibility:** it adds no role, `tabindex` or ARIA attributes, so the
slotted content keeps its own role and keyboard behavior. The pull reacts
to mouse movement only, so keyboard focus does not move it. Only transform
changes, so the layout does not shift. Put a real link or button inside.

**Reduced motion:** mouse movement does nothing, and the content stays in
its normal position.

**Common mistakes:** expecting the pull to start before the pointer reaches
the element. It reacts only while the pointer is over `motion-magnetic`
itself; to make the active area larger, add `padding` to `motion-magnetic`.

Docs: https://www.motion-components.dev/docs/respond/motion-magnetic/

## Install

```js
import 'motion-components/motion-magnetic'
```

Or without a build step:

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/motion-components@1/dist/motion-magnetic.js/+esm"></script>
```

## Example

```html
<motion-magnetic strength="0.5">
  <a href="/contact">Contact</a>
</motion-magnetic>
```

## Attributes

| Attribute | Type | Default | Description |
| --- | --- | --- | --- |
| `strength` | `number` | `0.4` | Pull strength as a fraction of cursor-to-center distance. |
| `duration` | `number` | `0.5` | Spring duration of the pull and release transitions, in seconds. |
| `bounce` | `number` | `0.4` | Spring bounciness of the pull and release (0 = no overshoot). |
| `disabled` | `boolean` | `false` | When `true`, ignores pointer input and settles to the rest state. |

## Slots

| Slot | Description |
| --- | --- |
| (default) | The element that follows the cursor. |