Getting Started
Blocks
Components
Device Mocks
Special Effects
Animations
Text Animations
Buttons
import { TypingAnimation } from "@/registry/magicui/typing-animation";
export function TypingAnimationDemo() {
return (
<TypingAnimation startOnView={true}>Typing Animation 👋</TypingAnimation>
);
}
Installation
pnpm dlx shadcn@latest add @magicui/typing-animation
Usage
import { TypingAnimation } from "@/components/magicui/typing-animation";<TypingAnimation>Typing Animation</TypingAnimation>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | string | - | Text content to animate |
className | string | - | The class name to be applied to the component |
duration | number | 100 | Duration to wait in between each char type |
delay | number | 0 | Delay before animation starts (in ms) |
as | React.ElementType | "div" | Component to render as |
startOnView | boolean | false | Start animation when component is in view |
Limited Time Offer
Ship Faster with Magic UI ProMagic UI Pro
Stop building from scratch.
Get 8 production-ready templates and 50+ premium components that your users will love.
✓
Next.js 15 + TypeScript ready✓
Copy, paste, customize in minutes✓
Save 100+ hours of development