Typewriter Text

Text that types itself character-by-character with a blinking cursor. Includes TypewriterLines for multi-line sequential typing (like a terminal).

texttypewritertypingcursor

Installation

bash

# Copy typewriter-text.tsx to your project
cp components/ui/typewriter-text.tsx your-project/components/ui/typewriter-text.tsx

How to use

tsx

import { TypewriterText, TypewriterLines } from "@/components/ui/typewriter-text";

tsx

<TypewriterText
  text="Hello, I'm typing myself out."
  speed={50}
  className="text-2xl font-semibold text-white"
/>

<TypewriterLines
  lines={["$ npm install", "$ Building...", "$ Done ✓"]}
  speed={35}
  lineDelay={600}
  lineClassName="font-mono text-green-400"
/>

Dependencies

framer-motion

Exports

TypewriterTextTypewriterLines

File

components/ui/typewriter-text.tsx

Preview

Single line

Multi-line sequential