Typewriter Text

Text 5

About

Animated text that reveals character by character with a typewriter effect, with configurable speed, optional looping, and reduced-motion support.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Typewriter Text to your project and fits it to your theme.

Code

How Typewriter Text is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import TypewriterText from "@/components/ui/typewriter-text";

export default function TypewriterTextDemo() {
  return (
    <div className="flex w-full flex-col items-center justify-center gap-4 px-8 py-16 text-center">
      <TypewriterText
        className="text-3xl font-semibold tracking-tight text-foreground"
        speed={80}
        loop
      >
        Welcome to SmoothUI
      </TypewriterText>
      <TypewriterText
        className="max-w-md text-lg text-muted-foreground"
        speed={40}
        loop
      >
        This text loops so you can preview the typewriter effect.
      </TypewriterText>
    </div>
  );
}