Typewriter

About this component

Typewriter

Text typed out one character at a time behind a thin caret that keeps a slow pulse once the line is finished. The element keeps the whole string as its accessible name.

Usage

The import and the props worth knowing about, in one place.

import { Text6 } from "@/components/beste/component/text6";

<Text6
  as="h2"
  text="Come as you are."
  speed={45}          // ms per character
  delay={200}         // ms before the first one
  caret              // keep the caret after the last character
  className="font-serif text-5xl"
/>

Props

Read from the component's own type, so this cannot drift from what it accepts.

PropTypeDefaultDescription
text*string—The text; it is typed out character by character
as"h1" | "h2" | "h3" | "p" | "span"—
trigger"view" | "mount"—"view" (default) starts typing when scrolled into view; "mount" starts at once
speednumber—Milliseconds per character
delaynumber—Milliseconds before the first character
caretboolean—Keep the caret blinking after the last character
classNamestring—

More Text components

View all Text

Every letter, loose.