Documentation

Documentation

React

Typewriter

Typewriter

Checking Motion+ status…

This content is exclusive to Motion+ members

One-time payment, no subscription

Already joined?

Checking Motion+ status…

This content is exclusive to Motion+ members

One-time payment, no subscription

Already joined?

Checking Motion+ status…

This content is exclusive to Motion+ members

One-time payment, no subscription

Already joined?

Typewriter is a 1.3kb React component for creating realistic typewriter animations.

Features

  • Natural animation: Typing speeds and variance emulate real-world behaviours

  • Playback control: For easy scroll-triggered animations

  • Accessible: Correct ARIA labels for screen reader compatibility

  • Reactive: Will animate with backspace and typing to the latest provided value

Typewriter has a simple API.

<Typewriter>Hello world!</Typewriter>

When its content changes, it'll naturally type from the current content to the new content.

Typing speed is naturally variable, for example taking slight pauses between sentences and slowing down during longer words.

The text and cursor can be styled independently, and everything about the animation and typing behaviour can be modified.

<Typewriter
  speed="fast"
  variance={0.8}
  backspace="word"
  cursorBlinkSpeed={2}
>
  {text}
</Typewriter>

It's exclusive to Motion+ members. Motion+ is a one-time fee, all-in membership that offers exclusive components, premium examples and access to a private Discord community.

Level up your animations with Motion+

More than 150+ Motion examples, exclusive APIs like Cursor, private Discord and GitHub, and powerful VS Code animation editing tools.

One-time payment, lifetime updates.

Stay in the loop

Subscribe for the latest news & updates.

Stay in the loop

Subscribe for the latest news & updates.