Effect 15 - Typewriter Text

Pro

A reusable inline typewriter text effect that cycles through an array of words by typing, pausing, deleting, and repeating.

Prev Next

Theme

Upgrade to Pro

Effect 15

Build interfaces that feel faster

A reusable inline typewriter effect for hero headlines, feature callouts, and product copy. It types each word, pauses, deletes one character at a time, and continues through the next.

Pill-sized label

Longer rotating phrases

Perfect for design systems

Loading code...

Starwind Dependencies

This component requires Starwind Pro.

Get lifetime access to all premium components, updates, and priority support.

Upgrade to Pro

Failed to load code. Please try again.

Code

Usage

<Effect15
  typing-speed={90}
  deleting-speed={55}
  pause-duration={1400}
  start-delay={0}
  loop={true}
/>

Props

prop	type	default	description
`words`	`string[]`	`[]`	Words or phrases cycled by the typewriter effect.
`typingSpeed`	`number`	`110`	Delay in milliseconds between typed characters.
`deletingSpeed`	`number`	`70`	Delay in milliseconds between deleted characters.
`pauseDuration`	`number`	`1600`	Pause in milliseconds after a word is fully typed.
`startDelay`	`number`	`0`	Delay in milliseconds before the typewriter starts.
`loop`	`boolean`	`true`	Whether the typewriter continues cycling after the final word.
`cursor`	`boolean`	`true`	Whether to render the blinking cursor.
`cursorCharacter`	`string`	`"\|"`	Character displayed as the cursor when cursor rendering is enabled.