Typewriter Effect

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

Motion Effectslayoutspringtypingcursorherolooptext

Typewriter Effect

Ship delightful interfaces with Nexus-UI

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

Installation