# <motion-tilt>

3D tilt-on-hover primitive. Rotates slotted content along X/Y based on
cursor position with a soft drop-shadow that tracks the tilt.
Optional gloss overlay adds a moving highlight.

**Use it for:** cards, product images and feature tiles that should turn in
3D toward the mouse pointer, with an optional moving shine from `gloss`.

**Avoid it for:** small controls such as buttons and icons; use
`motion-hover` or `motion-magnetic`.

**Accessibility:** it adds no role, `tabindex` or ARIA attributes, so the
slotted content keeps its own role and keyboard behavior. The tilt reacts
to the mouse only, so keyboard focus does not trigger it. The `gloss` layer
ignores the pointer, so clicks reach the content. The wrapper does not clip
its content, so focus outlines of slotted content show in full.

**Reduced motion:** mouse movement does nothing. The content stays flat, at
normal size, with no shadow or gloss.

**Common mistakes:** changing the border radius of the content after it
renders, for example in a media query. The wrapper copies the radius of the
first slotted element only on first render and when the slotted content
changes, so the corners of the gloss stop matching. Expecting the wrapper to
clip the content to its rounded corners; give the content its own
`overflow: hidden` for that.

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

## Install

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

Or without a build step:

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

## Example

```html
<motion-tilt max="20" gloss>
  <img src="card.jpg" alt="" />
</motion-tilt>
```

## Attributes

| Attribute | Type | Default | Description |
| --- | --- | --- | --- |
| `max` | `number` | `15` | Maximum tilt angle in degrees on each axis. |
| `duration` | `number` | `0.5` | Spring duration of the tilt and settle, in seconds. |
| `bounce` | `number` | `0.2` | Spring bounciness of the tilt and settle (0 = no overshoot). |
| `scale` | `number` | `1.04` | Scale factor while hovering. |
| `gloss` | `boolean` | `false` | When `true`, render a moving radial-gradient gloss highlight overlay. |
| `disabled` | `boolean` | `false` | When `true`, ignores pointer input and settles to the rest state. |

## Slots

| Slot | Description |
| --- | --- |
| (default) | The content to tilt. Border-radius is mirrored onto the inner wrapper. |