# <motion-hover>

Spring-based hover transform primitive. Animates scale, translation, rotation,
and skew on mouse enter, springs back on leave. Composes with any slotted content.

**Use it for:** buttons, links, cards and images that should grow, move or
rotate a little while the mouse pointer is over them.

**Avoid it for:** feedback on click or tap; use `motion-press`. For effects
that follow the pointer, use `motion-magnetic` or `motion-tilt`. Do not use
it as the only sign that something is interactive, because it does not run
on keyboard focus.

**Accessibility:** it adds no role, `tabindex` or ARIA attributes, so the
slotted content keeps its own role and keyboard behavior. The effect reacts
to mouse enter and leave only, so keyboard focus does not trigger it; give
the content its own visible focus style. Only transform changes, so the
layout does not shift, but the moved content can cover nearby elements.

**Reduced motion:** mouse enter and leave do nothing, and the content stays
at its rest state.

**Common mistakes:** wrapping a block element such as a card. The host is
`display: inline-block`, so the card can shrink to the width of its
content; set `display: block` on `motion-hover`.

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

## Install

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

Or without a build step:

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

## Example

```html
<motion-hover scale="1.08" rotate="-2">
  <button>Hover me</button>
</motion-hover>
```

## Attributes

| Attribute | Type | Default | Description |
| --- | --- | --- | --- |
| `scale` | `number` | `1.05` | Scale factor on hover. `1` is no scaling. |
| `x` | `number` | `0` | Horizontal translation in pixels on hover. |
| `y` | `number` | `0` | Vertical translation in pixels on hover. |
| `rotate` | `number` | `0` | Rotation in degrees on hover. |
| `skew` | `number` | `0` | Skew along the X axis in degrees on hover. |
| `duration` | `number` | `0.3` | Spring duration of the hover transition, in seconds. |
| `bounce` | `number` | `0.3` | Spring bounciness (0 = critically damped, higher = more elastic). |
| `disabled` | `boolean` | `false` | When `true`, ignores pointer input and settles to the rest state. |

## Slots

| Slot | Description |
| --- | --- |
| (default) | The content that lifts on hover. |