# Split Text

> Reveals text piece by piece when it scrolls into view.

Source: https://ngwr.dev/bits/split-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 { WrSplitText } from 'ngwr/bits/split-text';

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

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

## Playground

```angular-html
<!-- rootMargin is "-100px" by default, which holds the animation until the
     text is 100px INSIDE the viewport. The playground overrides it so the
     replay fires where the demo already sits. -->
<wr-split-text
  text="Hello, ngwr!"
  splitType="chars"
  [delay]="40"
  [duration]="1.2"
  rootMargin="0px"
/>
```

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

import { WrSplitText } from 'ngwr/bits/split-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: [WrSplitText],
})
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` | — |
| `splitType` | Split granularity. | `'chars' \| 'words'` | `'chars'` |
| `delay` | Stagger delay between pieces in ms. | `number` | `50` |
| `duration` | Animation duration in seconds. | `number` | `1.25` |
| `easing` | CSS easing function. | `string` | `'cubic-bezier(0.16, 1, 0.3, 1)' (~power3.out)` |
| `from` | Start state for each piece. Properties: `opacity`, `x`, `y` (px), `scale`, `rotate` (deg). | `WrSplitTextMotion` | `{ opacity: 0, y: 40 }` |
| `to` | End state for each piece. Same shape as `from`. | `WrSplitTextMotion` | `{ opacity: 1, y: 0 }` |
| `threshold` | IntersectionObserver threshold (0..1). | `number` | `0.1` |
| `rootMargin` | IntersectionObserver rootMargin. | `string` | `'-100px'` |
| `textAlign` | Text alignment on the host. | `'left' \| 'center' \| 'right' \| 'justify'` | `'center'` |
| `(animationComplete)` | Emitted once all pieces finish animating. | `void` | `—` |

## See also

- [Blur Text](https://ngwr.dev/bits/blur-text) — Text that blurs into place when it scrolls into view.
- [Typewriter](https://ngwr.dev/bits/typewriter) — Types and deletes strings with a blinking cursor.
- [Waves](https://ngwr.dev/bits/waves) — Drifting lines behind your content that bend around the pointer.
- [Falling Text](https://ngwr.dev/bits/falling-text) — Words that fall like objects and can be dragged around.
- [Decrypt Text](https://ngwr.dev/bits/decrypt-text) — Text that scrambles, then resolves into the real string.