Text that types itself out, and — given several lines — deletes each one and types the next.
Import it from rei-kit/motion:
import { TypeWriter } from 'rei-kit/motion'
Open TypeWriter in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { TypeWriter } from 'rei-kit/motion'
</script>
<template>
<TypeWriter :text="['Write it once.', 'Change the look.', 'Ship it.']" />
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
text | string | readonly string[] | yes | One line to type, or several to type in turn. |
speed | number | 45 | Milliseconds per character typed. |
deleteSpeed | number | 25 | Milliseconds per character deleted. |
hold | number | 1800 | How long a finished line stays before it is deleted, in milliseconds. |
loop | boolean | true | With several lines, start again after the last. With one, it is typed once. |
cursor | boolean | true | Show a blinking caret after the text. |
paused | boolean | false | Stops where it is. |
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.