# Falling Text

> Words that fall like objects and can be dragged around.

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

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

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

## Playground

Give it a height; the words fall to its bottom edge.

```angular-html
<wr-falling-text
  text="Hover this block. Each word falls and you can drag them around."
  trigger="hover"
  [highlightWords]="['Hover', 'drag']"
  [gravity]="980"
  fontSize="1.5rem"
/>
```

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

import { WrFallingText } from 'ngwr/bits/falling-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: [WrFallingText],
})
export class NgwrTheAngularUiLibraryForSignalFormsPlaygroundExample {}
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `text`required | Text to render. Words are separated by spaces. | `string` | — |
| `highlightWords` | Prefix-match keywords. Matching words get the `wr-falling-text__word--hl` class. | `readonly string[]` | `[]` |
| `trigger` | When to release the words into the simulator. | `'auto' \| 'scroll' \| 'hover' \| 'click'` | `'auto'` |
| `gravity` | Gravity in pixels/sec². | `number` | `980` |
| `fontSize` | Font size as a CSS length. | `string` | `'1rem'` |

## See also

- [Split Text](https://ngwr.dev/bits/split-text) — Reveals text piece by piece when it scrolls into view.
- [Blur Text](https://ngwr.dev/bits/blur-text) — Text that blurs into place when it scrolls into view.