# Blur Text

> Text that blurs into place when it scrolls into view.

Source: https://ngwr.dev/bits/blur-text  
Updated in v15

## Installation

Import the class, and `@use` the entry point in your global styles: without it the component renders unstyled.

```typescript
import { Component } from '@angular/core';
import { WrBlurText } from 'ngwr/bits/blur-text';

@Component({ imports: [WrBlurText] })
export class MyComponent {}
```

```scss
@use 'ngwr/bits/blur-text';
```

## Playground

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

```angular-ts
import { Component } from '@angular/core';

import { WrBlurText } from 'ngwr/bits/blur-text';

/**
 * Playground
 */
@Component({
  selector: 'ngwr-the-angular-ui-library-for-signal-forms-playground-example',
  templateUrl: './ngwr-the-angular-ui-library-for-signal-forms-playground-example.html',
  imports: [WrBlurText],
})
export class NgwrTheAngularUiLibraryForSignalFormsPlaygroundExample {}
```

## Server rendering

Prerendered text stays as it is when the page hydrates. The entrance plays when the component is created in the browser and when `text` changes. Since v15.

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `text`required | Text to animate. | `string` | — |
| `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. | `void` | `—` |

## See also

- [Split Text](https://ngwr.dev/bits/split-text) — Reveals text piece by piece when it scrolls into view.
- [Decrypt Text](https://ngwr.dev/bits/decrypt-text) — Text that scrambles, then resolves into the real string.
- [Falling Text](https://ngwr.dev/bits/falling-text) — Words that fall like objects and can be dragged around.
- [Server-side rendering](https://ngwr.dev/guides/ssr) — Prerender and hydrate an ngwr app without mismatches.