Typewriter Text React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import TypewriterText from "./TypewriterText";

export default function Example() {
  return (
    <TypewriterText
      phrases={[
        "something different.",
        "a little unexpected.",
        "your next idea."
      ]}
      prefix={"Build "}
      typingSpeed={85}
      deletingSpeed={35}
      pause={1600}
      loop={true}
      cursorColor={"#cdb5eb"}
      style={{
        "fontSize": 38,
        "letterSpacing": "-.045em",
        "fontWeight": 500
      }}
    />
  );
}

Using Typewriter Text

Supply the sequence through phrases and optional fixed introductory copy through prefix.

typingSpeed, deletingSpeed, and pause control the pacing. Set loop according to whether the sequence should repeat or finish on its final phrase.

Props

Name	Type	Required	Default	Description
phrases	string[]	No	[]	Array of phrases to type in sequence. Empty arrays display no text.
typingSpeed	number	No	80	Milliseconds between typed characters.
deletingSpeed	number	No	40	Milliseconds between deleted characters.
pause	number	No	1400	Pause after completing a phrase, in milliseconds.
loop	boolean	No	true	Repeat the sequence. When false, stop at the final phrase.
cursorColor	string	No	"#cdb5eb"	Cursor colour. Reduced-motion users see a static phrase and cursor.
prefix	string	No	""	Optional static text before the typed phrase.
className	string	No	""	Additional CSS classes, merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing and visual overrides.