Motion+
DocsVue

Typewriter

A customizable typewriter animation component for Vue that creates realistic typing animations with human-like variance, stylable cursors and accessibility.

Typewriter is a 1.5kb Vue 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.

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.

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.

>Live exampleOpen
>Live exampleOpen