# <motion-blur-in>

Viewport-triggered blur reveal. Starts blurred and translated, snaps to
focus once the element enters the viewport. The dominant editorial
entrance pattern of 2024–2025.

**Use it for:** headlines, hero text and images that should come into
focus with a short animation the first time they scroll into view.

**Avoid it for:** effects that should follow the scroll position; use
`motion-blur`. For a list of items, use `motion-stagger`. For a fade
without blur, use `motion-reveal`.

**Accessibility:** the content stays in the page while it is hidden and
blurred, so screen readers read it before it animates. Only opacity, filter
and transform change, so the layout does not shift.

**Reduced motion:** the content is never hidden or blurred. It shows at its
final position at once, with no animation. The `motion-start` and
`motion-finish` events still fire when it enters the view.

**Common mistakes:** wrapping a whole page section in one `motion-blur-in`,
so nothing shows until 10% of it is in view; wrap each block instead, or
lower `threshold`. Changing `threshold` after the element has rendered has
no effect, because it is read only once.

Docs: https://www.motion-components.dev/docs/reveal/motion-blur-in/

## Install

```js
import 'motion-components/motion-blur-in'
```

Or without a build step:

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

## Example

```html
<motion-blur-in intensity="12" y="8" duration="0.7">
  <h1>Headline</h1>
</motion-blur-in>
```

## Attributes

| Attribute | Type | Default | Description |
| --- | --- | --- | --- |
| `duration` | `number` | `0.7` | Spring duration of the reveal animation, in seconds. |
| `intensity` | `number` | `10` | Initial blur in pixels; animates to 0 on reveal. |
| `y` | `number` | `12` | Initial vertical offset in pixels; animates to 0 on reveal. |
| `threshold` | `number` | `0.1` | IntersectionObserver threshold (0–1) at which the reveal triggers. |
| `once` | `boolean` | `true` | When `true`, only animate the first time the element enters view. Set `once="false"` to turn it off. |

## Properties

| Property | Type | Description |
| --- | --- | --- |
| `playState` | `'idle' \| 'running' \| 'paused' \| 'finished'` | Current state: `'idle'`, `'running'`, `'paused'` or `'finished'`. |
| `finished` | `Promise<void>` | Resolves when the current run settles. A new run replaces the promise. |

## Methods

| Method | Description |
| --- | --- |
| `replay()` | Resets to the blurred initial state and re-runs the reveal. |
| `play()` | Starts the animation, or resumes it when paused. Resolves once the run settles. Under `prefers-reduced-motion: reduce` the final state is applied immediately without animating. |
| `pause()` | Holds the animation at its current position. No-op unless running. |
| `finish()` | Jumps to the final state and settles. Fires `motion-finish`. |
| `cancel()` | Reverts to the initial state and returns to idle. Fires `motion-cancel`. |

## Events

The `motion-*` events bubble and are composed.

| Event | Description |
| --- | --- |
| `motion-start` | When a run starts. |
| `motion-finish` | When a run finishes, or `finish()` jumps to the end. |
| `motion-cancel` | When `cancel()` stops a run and resets it. |

## Slots

| Slot | Description |
| --- | --- |
| (default) | The content to blur-reveal. |