A smooth text typing animation component that cycles through an array of texts with typewriter effect. Features customizable cursor styles, typing/deleting speeds, infinite loop, and Framer Motion animations. Perfect for hero sections, portfolios, and dynamic content.
npx shadcn@latest add "https://ui-struct.vercel.app/r/text-typing"
import TextTyping from "@/components/ui/text-typing";<TextTypingtexts={['Developer', 'Designer', 'Creator']}typingSpeed={80}cursorStyle="bar"/>
Watch the text type and delete in a smooth infinite loop.
Three cursor styles to match your design aesthetic.
| Cursor Style | Description |
|---|---|
bar | Classic blinking vertical bar |
underscore | Terminal-style underscore |
block | Block cursor like text editors |
Control how fast text types and deletes.
| Speed | Typing | Deleting | Use Case |
|---|---|---|---|
| Fast | 30ms | 20ms | Quick, energetic feel |
| Normal | 80ms | 50ms | Natural typing speed |
| Slow | 150ms | 80ms | Dramatic, deliberate |
| Very Slow | 250ms | 100ms | Cinematic effect |
Perfect for portfolio and landing page hero sections.
Combine with CSS gradients and glow effects for stunning visuals.
Classic terminal/command line aesthetic.
Simulated chat typing effect.
Code editor style with syntax highlighting.
Various use cases in different contexts.
| Prop | Type | Default | Description |
|---|---|---|---|
texts | string[] | - | Array of texts to cycle through |
className | string | '' | Additional CSS classes |
typingSpeed | number | 80 | Typing speed in milliseconds |
deletingSpeed | number | 50 | Deleting speed in milliseconds |
pauseDuration | number | 1500 | Pause after typing completes (ms) |
cursor | boolean | true | Show/hide cursor |
cursorStyle | 'bar' | 'underscore' | 'block' | 'bar' | Cursor style |
cursorColor | string | 'currentColor' | Cursor color |
cursorBlinkSpeed | number | 0.8 | Cursor blink duration (seconds) |
loop | boolean | true | Loop through texts infinitely |
onComplete | () => void | - | Callback when loop finishes (if loop=false) |
<TextTyping texts={['Hello', 'World']} />
<span className="text-2xl font-bold">I am a{' '}<TextTypingtexts={['Developer', 'Designer', 'Creator']}className="text-blue-500"typingSpeed={100}cursorColor="#3B82F6"/></span>
<span className="text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-pink-500"><TextTypingtexts={['Amazing', 'Beautiful', 'Stunning']}cursorColor="#A855F7"/></span>
<div className="font-mono bg-black text-green-400 p-4"><span>$ </span><TextTypingtexts={['npm install', 'yarn add', 'pnpm add']}cursorStyle="block"cursorColor="#22C55E"typingSpeed={50}/></div>
<TextTypingtexts={['Loading complete!']}loop={false}onComplete={() => console.log('Done!')}/>
texts array reasonably sizedpauseDuration for readabilityI build beautiful, performant web applications with modern technologies.
✓ Success!
Package installed successfully. Run npm run dev to start.
Online
Optimized animations that run smoothly on any device.
Customize colors, gradients, and cursor styles easily.
Even emojis work great with the typing animation!