Typed Text

Classic typewriter effect cycling through an array of words. No dependencies — pure React state.

Use and inspectUse this when the motion supports the surrounding content. Connect callbacks and state to your app, keep the reset preview as a local demonstration, and add a reduced-motion fallback for movement or looping. The preview is synthetic; it does not call a backend.Next: inspect the source below and replace the demo inputs with your own data.

Typed TextClassic typewriter effect cycling through an array of words. No dependencies — pure React state.

"use client";
import { useState, useEffect } from "react";

type TypedTextProps = {
  words: string[];
  typingSpeed?: number;
  deletingSpeed?: number;
  pauseDuration?: number;
};

export function TypedText({
  words,
  typingSpeed = 80,
  deletingSpeed = 40,
  pauseDuration = 1600,
}: TypedTextProps) {
  const [wordIndex, setWordIndex] = useState(0);
  const [displayed, setDisplayed] = useState("");
  const [isDeleting, setIsDeleting] = useState(false);

  useEffect(() => {
    const word = words[wordIndex];
    let timeout: ReturnType<typeof setTimeout>;

    if (!isDeleting && displayed === word) {
      timeout = setTimeout(() => setIsDeleting(true), pauseDuration);
    } else if (isDeleting && displayed === "") {
      setIsDeleting(false);
      setWordIndex((i) => (i + 1) % words.length);
    } else {
      const speed = isDeleting ? deletingSpeed : typingSpeed;
      timeout = setTimeout(() => {
        setDisplayed(
          isDeleting
            ? word.slice(0, displayed.length - 1)
            : word.slice(0, displayed.length + 1)
        );
      }, speed);
    }

    return () => clearTimeout(timeout);
  }, [displayed, isDeleting, wordIndex, words, typingSpeed, deletingSpeed, pauseDuration]);

  return (
    <span>
      {displayed}
      <span style={{ animation: "typed-blink 1s step-end infinite", opacity: 1 }}>|</span>
    </span>
  );
}

Props

Prop	Type	Default	Description
wordsrequired	string[]	—	Array of strings to cycle through
typingSpeed	number	80	ms per character typed
deletingSpeed	number	40	ms per character deleted
pauseDuration	number	1600	ms to pause on completed word