# Falling Text

> Words fall like physical bodies — gravity, wall / floor collision, body-to-body bouncing, and cursor drag-to-pick-up. Words start at their typeset position and release into the simulator on trigger. Reactbits' original uses matter-js; this port ships a minimal in-house AABB physics simulator so there's no extra runtime dependency.

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

## Import

```angular-ts
import { WrFallingText } from 'ngwr/falling-text';
```

## Playground

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

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `text`required | Text to render. Words are separated by spaces. | `string` | `— (required)` |
| `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'` |