# <motion-glitch>

RGB-split glitch effect on text. Renders red and cyan duplicate layers
that jitter on hover, an automatic loop, or a single auto-play.

**Use it for:** short labels with a technical or error look, such as
`ERROR_404` or a game title.

**Avoid it for:** long text, body copy and text with markup. For text that
decodes through random letters, use `motion-scramble`.

**Accessibility:** the original text stays as real text and is read as
normal. The red and cyan copies are `aria-hidden`. `trigger="hover"` reacts
to the mouse only, not to keyboard focus. With `trigger="loop"`, the bursts
never stop on their own; if people must be able to stop them, add a button
that calls `pause()`.

**Reduced motion:** no glitch bursts run, with any `trigger` and with
`glitch()`. The text stays still.

**Common mistakes:** putting a link or other markup inside. Only the plain
text is kept, so put the `motion-glitch` inside the link instead. Changing
`trigger` after the element first renders has no effect.

Docs: https://www.motion-components.dev/docs/text/motion-glitch/

## Install

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

Or without a build step:

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

## Example

```html
<motion-glitch trigger="loop" intensity="6" interval="2.5">
  ERROR_404
</motion-glitch>
```

## Attributes

| Attribute | Type | Default | Description |
| --- | --- | --- | --- |
| `intensity` | `number` | `5` | Maximum horizontal displacement of the RGB layers, in pixels. |
| `trigger` | `'hover' \| 'mount' \| 'loop'` | `'loop'` | When the glitch fires: `'hover'`, `'mount'` (once on load), or `'loop'` (keep firing). This is a trigger mode, not the boolean `loop` other components use. |
| `interval` | `number` | `2` | Time between glitch bursts when `trigger="loop"`, in seconds. |

## 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()` | Plays the glitch again from the start: one burst, or the loop from its first burst. |
| `glitch()` | Fires one extra burst. While a loop runs, the loop keeps its rhythm; otherwise this is `replay()`. |
| `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 text to glitch. Plain text only — markup inside is replaced. |