Typewriter Effect — React Component

Character-by-character typewriter text animation with blinking cursor, optional deleting, looping, and semantic heading support.

Motion Effectslayoutspringtypingcursorherolooptext

Typewriter Effect

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

typingSpeed

Delay in ms between typed characters.

deletingSpeed

Delay in ms between deleted characters.

delay

Initial delay in ms before typing starts.

pauseDuration

Pause in ms after a full phrase is typed.

loop

Loops phrases continuously after completion.

showCursor

Shows blinking typewriter cursor.

cursorClassName

Optional class names for cursor styling.

Semantic element used as root.

Generated JSX

Copy this into your page.

<TypewriterEffect
  typingSpeed={65}
  deletingSpeed={42}
  delay={0}
  pauseDuration={1200}
  loop={false}
  showCursor={true}
  cursorClassName=""
  as="span"
/>

Animation effects

layoutspring

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

Full-page demo

About Typewriter Effect

The Typewriter Effect is a text cycling component that types, pauses, and deletes through an array of strings character by character. Typing speed, pause duration, and deletion speed are independently configurable. A blinking cursor animates between cycles with a CSS keyframe. The component includes an aria-live region so screen readers announce the changing content. The standard hero headline pattern for products serving multiple use cases — each string can target a different audience segment.

Common use cases

Hero section value proposition cycles
Multi-audience product taglines
Feature benefit rotation
Animated product description displays

Installation