# Blur Text

> Reveals text by blurring each piece in from a coloured offset, through a half-blurred mid-step, into the steady state. Triggers on viewport entry. Dependency-free port — uses `IntersectionObserver` + Web Animations API.

Source: https://ngwr.dev/animations/blur-text  
Kind: Animation

## Import

```angular-ts
import { WrBlurText } from 'ngwr/blur-text';
```

## Playground

```html
<wr-blur-text
  text="Welcome to ngwr"
  animateBy="words"
  direction="top"
  [delay]="200"
  [stepDuration]="0.35"
/>
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `text`required | Text to animate. | `string` | `— (required)` |
| `animateBy` | Split granularity. | `'chars' \| 'words'` | `'words'` |
| `direction` | Entry direction: `'top'` slides down into place, `'bottom'` slides up. | `'top' \| 'bottom'` | `'top'` |
| `delay` | Per-piece stagger in ms. | `number` | `200` |
| `stepDuration` | Duration of each keyframe step in seconds (total = 2 × stepDuration). | `number` | `0.35` |
| `easing` | CSS easing function. | `string` | `'linear'` |
| `threshold` | IntersectionObserver threshold (0..1). | `number` | `0.1` |
| `rootMargin` | IntersectionObserver rootMargin. | `string` | `'0px'` |
| `(animationComplete)` | Emitted once all pieces finish animating. | `EventEmitter<void>` | `—` |