Typing Text

"use client"

import {
  TypingText,
  TypingTextCursor,
} from "@animate-ui/react/primitives/texts/typing"

export default function TypingTextDemo({
  delay = 0,
  holdDelay = 1000,
  loop = false,
  cursor = true,
}: {
  delay?: number
  holdDelay?: number
  loop?: boolean
  cursor?: boolean
}) {
  return (
    <TypingText
      key={`${delay}-${holdDelay}-${loop}-${cursor}`}
      className="text-4xl font-semibold"
      text="Typing Text component made with Motion. Highly customizable and easy to use."
      delay={delay}
      holdDelay={holdDelay}
      loop={loop}
    >
      {cursor && <TypingTextCursor className="ml-1 h-8! w-1! rounded-full" />}
    </TypingText>
  )
}

InstallationCopy Anchor Link

npm install @animate-ui/react motion

pnpm add @animate-ui/react motion

yarn add @animate-ui/react motion

bun add @animate-ui/react motion

UsageCopy Anchor Link

import {
  TypingText,
  TypingTextCursor,
} from '@animate-ui/react/primitives/texts/typing';

export function Hero() {
  return (
    <TypingText text={['Design', 'Build', 'Ship']} loop>
      <TypingTextCursor />
    </TypingText>
  );
}

AnimationCopy Anchor Link

• Characters are typed every duration ms (100). With several texts (or loop), a typed text holds for holdDelay, is erased at the same pace, and the next one is typed.
• The text is written to the DOM directly: typing a character never re-renders React. Changing duration or holdDelay mid-animation takes effect without restarting.
• A loop pauses off screen and in a hidden tab; a single run only in a hidden tab. It resumes where it stopped.
• The cursor blinks (a 1s on/off loop) while it waits for delay and once a text is typed, and stays solid while typing or erasing (it fades in over 0.3s as typing starts). It holds still off screen and in a hidden tab.
• Under reduced motion, the text appears at once (the last text, or the first one with loop) and the cursor doesn't blink.
• Screen readers read every text once, never the partially typed ones.

API ReferenceCopy Anchor Link

TypingTextCopy Anchor Link

TypingTextCursorCopy Anchor Link