TypeWriter

A typewriter effect that types out a single string or cycles through a list of strings, with an optional blinking cursor.

Single string

A single sentence typed out once.

Cycling through roles

Pass an array of strings to cycle through them on repeat.

I am a

Without cursor

Disable the cursor with cursor={false}, or customise the character via cursorChar.

Usage

import { TypeWriter } from "@mantleui/react/motion";

// Single string
<TypeWriter text="Craft interfaces that feel inevitable." loop={false} />

// Cycling array
<TypeWriter text={["Designer", "Developer", "Engineer"]} speed={60} />

// Custom cursor, no loop
<TypeWriter text="Ready." cursorChar="_" loop={false} />

Props

Prop	Type	Default	Description
`text`	`string \| string[]`	—	Text or list of texts to cycle through.
`speed`	`number`	`50`	Milliseconds per character while typing or deleting.
`pauseDuration`	`number`	`2000`	Pause in milliseconds after a word finishes typing.
`loop`	`boolean`	`true`	Whether to loop through the text list.
`cursor`	`boolean`	`true`	Whether to render the blinking cursor.
`cursorChar`	`string`	`"\|"`	Character used for the blinking cursor.

text

string | string[]

Text or list of texts to cycle through.

speed50

number

Milliseconds per character while typing or deleting.

pauseDuration2000

number

Pause in milliseconds after a word finishes typing.

looptrue

boolean

Whether to loop through the text list.

cursortrue

boolean

Whether to render the blinking cursor.

cursorChar"|"

string

Character used for the blinking cursor.