Typewriter

Angular adaptation of an effect by David Haz / reactbits.dev.

import { WrTypewriter } from 'ngwr/typewriter';

We design.

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

Customize

Typing Speed (ms)

50 ms

Deleting Speed (ms)

30 ms

Pause (ms)

2000 ms

Loop

Cursor

Name	Description	Type	Default
`text`	A single string to type. Use either `text` or `texts` — neither has a value on its own.	`string`	—
`texts`	Strings to cycle. Use either `text` or `texts` — neither has a value on its own.	`readonly string[]`	—
`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.	`{ text: string; index: number }`	`—`

Variable	Default	Declared on
`--wr-typewriter-cursor-blink`	`0.5s`	`.wr-typewriter`

Import

Playground

Customize

API

CSS variables