Typewriter

Text 4

About

An animated typewriter text effect that types and deletes multiple text sequences in sequence, with natural timing variance and auto-looping.

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

Code

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

Usage.tsx

import { Typewriter } from "@/components/ui/components-texts-typewriter";

type TypewriterDemoProps = {
  typingSpeed?: number;
  deleteSpeed?: number;
  pauseBeforeDelete?: number;
  loopDelay?: number;
  autoLoop?: boolean;
  naturalVariance?: boolean;
};

export default function TypewriterDemo({
  typingSpeed = 100,
  deleteSpeed = 40,
  pauseBeforeDelete = 1600,
  loopDelay = 1200,
  autoLoop = true,
  naturalVariance = true,
}: TypewriterDemoProps) {
  return (
    <div className="flex items-center justify-center p-10">
      <Typewriter
        key={`${typingSpeed}-${deleteSpeed}-${pauseBeforeDelete}-${loopDelay}-${autoLoop}-${naturalVariance}`}
        sequences={[
          { text: "Full-Stack Developer", deleteAfter: true },
          { text: "UI/UX Enthusiast", deleteAfter: true },
          { text: "Open to remote work", deleteAfter: false },
        ]}
        typingSpeed={typingSpeed}
        deleteSpeed={deleteSpeed}
        pauseBeforeDelete={pauseBeforeDelete}
        loopDelay={loopDelay}
        autoLoop={autoLoop}
        naturalVariance={naturalVariance}
        className="font-mono text-3xl tracking-tight text-foreground md:text-5xl"
      />
    </div>
  );
}