# Typewriter

> Classic typewriter — types out a string char-by-char, optionally deletes it, then types the next string. Cycles through `[texts]` (or a single string) with a blinking cursor. Pure JS (no GSAP), pure CSS cursor blink.

Source: https://ngwr.dev/animations/typewriter  
Kind: Animation

## Import

```angular-ts
import { WrTypewriter } from 'ngwr/typewriter';
```

## Playground

```html
<wr-typewriter
  [texts]="['design.', 'ship.', 'iterate.']"
  [typingSpeed]="50"
  [deletingSpeed]="30"
  [pauseDuration]="2000"
  [loop]="true"
  cursorCharacter="|"
/>
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `text / texts` | A single string or an array to cycle. | `string \| readonly string[]` | `— (one of them required)` |
| `typingSpeed` | Per-char typing speed in ms. | `number` | `50` |
| `initialDelay` | Delay before typing starts, in ms. | `number` | `0` |
| `pauseDuration` | Pause after typing complete, before deleting, in ms. | `number` | `2000` |
| `deletingSpeed` | Per-char deletion speed in ms. | `number` | `30` |
| `loop` | Loop back to the first string after the last. | `boolean` | `true` |
| `showCursor` | Show the cursor glyph. | `boolean` | `true` |
| `hideCursorWhileTyping` | Hide the cursor while typing / deleting. | `boolean` | `false` |
| `cursorCharacter` | Cursor glyph. | `string` | `'\|'` |
| `cursorBlinkDuration` | Cursor blink half-cycle in seconds. | `number` | `0.5` |
| `textColors` | Cycle through these colours per string. | `readonly string[]` | `[]` |
| `variableSpeed` | Randomise typing speed per char between `min` and `max`. | `{ min: number; max: number }` | `—` |
| `reverseMode` | Type each string backwards. | `boolean` | `false` |
| `startOnVisible` | Start only after the host enters the viewport. | `boolean` | `false` |
| `(sentenceComplete)` | Emits `{ text, index }` when a string finishes typing. | `EventEmitter` | `—` |