Typing Animation

PreviewCode

|

@/demos/TypingAnimationDemo.tsx

import { TypingAnimation } from '@/registry/magicui/typing-animation'

export function TypingAnimationDemo() {
  return <TypingAnimation>Hello World! 👋</TypingAnimation>
}

Installation

pnpm

pnpm dlx shadcn@latest add @magicui-solid/typing-animation

bun

bunx shadcn@latest add @magicui-solid/typing-animation

yarn

yarn dlx shadcn@latest add @magicui-solid/typing-animation

npm

npx shadcn@latest add @magicui-solid/typing-animation

Examples

Basic Usage

PreviewCode

|

@/demos/TypingAnimationDemo.tsx

import { TypingAnimation } from '@/registry/magicui/typing-animation'

export function TypingAnimationDemo() {
  return <TypingAnimation>Hello World! 👋</TypingAnimation>
}

Multiple Words with Loop

PreviewCode

|

@/demos/TypingAnimationDemo2.tsx

import { TypingAnimation } from '@/registry/magicui/typing-animation'

export function TypingAnimationDemo2() {
  return <TypingAnimation words={['Design 🎨', 'Build 🔨', 'Ship 🚀']} loop />
}

Custom Speed

PreviewCode

|

@/demos/TypingAnimationDemo3.tsx

import { TypingAnimation } from '@/registry/magicui/typing-animation'

export function TypingAnimationDemo3() {
  return (
    <TypingAnimation
      words={['Fast typing', 'Slow delete']}
      typeSpeed={50}
      deleteSpeed={150}
      pauseDelay={2000}
      loop
    />
  )
}

Start on View

PreviewCode

|

@/demos/TypingAnimationDemo4.tsx

import { TypingAnimation } from '@/registry/magicui/typing-animation'

export function TypingAnimationDemo4() {
  return <TypingAnimation startOnView>Starts typing when in view</TypingAnimation>
}

Without Cursor

PreviewCode

@/demos/TypingAnimationDemo5.tsx

import { TypingAnimation } from '@/registry/magicui/typing-animation'

export function TypingAnimationDemo5() {
  return <TypingAnimation showCursor={false}>No cursor shown</TypingAnimation>
}

Single Play (No Loop)

PreviewCode

|

@/demos/TypingAnimationDemo6.tsx

import { TypingAnimation } from '@/registry/magicui/typing-animation'

export function TypingAnimationDemo6() {
  return <TypingAnimation words={['First', 'Second', 'Final']} loop={false} />
}

Cursor Blinking

PreviewCode

With blinking cursor (default) - watch during pause

|

Without blinking cursor - static during pause

|

@/demos/TypingAnimationDemo7.tsx

import { TypingAnimation } from '@/registry/magicui/typing-animation'

export function TypingAnimationDemo7() {
  return (
    <div class="flex-1 space-y-8">
      <div>
        <p class="mb-2 text-sm text-muted-foreground">
          With blinking cursor (default) - watch during pause
        </p>
        <TypingAnimation
          words={['Type', 'Pause', 'Delete']}
          blinkCursor={true}
          pauseDelay={2000}
          loop
          class="text-4xl font-bold"
        >
          Blinking cursor
        </TypingAnimation>
      </div>
      <div>
        <p class="mb-2 text-sm text-muted-foreground">
          Without blinking cursor - static during pause
        </p>
        <TypingAnimation
          words={['Type', 'Pause', 'Delete']}
          blinkCursor={false}
          pauseDelay={2000}
          loop
          class="text-4xl font-bold"
        >
          Static cursor
        </TypingAnimation>
      </div>
    </div>
  )
}

Cursor Styles

PreviewCode

Line cursor (default)

|

Block cursor (VSCode style)

▌

Underscore cursor

_

@/demos/TypingAnimationDemo8.tsx

import { TypingAnimation } from '@/registry/magicui/typing-animation'

export function TypingAnimationDemo8() {
  return (
    <div class="flex-1 space-y-8">
      <div>
        <p class="mb-2 text-sm text-muted-foreground">
          Line cursor (default)
        </p>
        <TypingAnimation
          words={['Line cursor']}
          cursorStyle="line"
          loop
          class="text-4xl font-bold"
        />
      </div>
      <div>
        <p class="mb-2 text-sm text-muted-foreground">
          Block cursor (VSCode style)
        </p>
        <TypingAnimation
          words={['Block cursor']}
          cursorStyle="block"
          loop
          class="text-4xl font-bold"
        />
      </div>
      <div>
        <p class="mb-2 text-sm text-muted-foreground">Underscore cursor</p>
        <TypingAnimation
          words={['Underscore cursor']}
          cursorStyle="underscore"
          loop
          class="text-4xl font-bold"
        />
      </div>
    </div>
  )
}

Import

import { TypingAnimation } from '@/components/magicui/typing-animation'

Usage

<TypingAnimation>Hello World! 👋</TypingAnimation>

Props

Prop	Type	Default	Description
children	string	-	Single string to animate
words	string[]	-	Array of strings to type and delete in sequence
class	string	-	The class name to be applied to the component
duration	number	100	Duration for each character
typeSpeed	number	100	Speed of typing animation (ms per character)
deleteSpeed	number	50	Speed of deleting animation (ms per character)
delay	number	0	Delay before animation starts (in ms)
pauseDelay	number	1000	Pause duration between words (in ms)
loop	boolean	false	Whether to loop the animation
as	ValidComponent	"span"	The element to render as
startOnView	boolean	true	Start animation when component is in view
showCursor	boolean	true	Whether to show the typing cursor
blinkCursor	boolean	true	Whether the cursor should blink
cursorStyle	"line" "block" "underscore"	"line"	Style of the cursor (like VSCode)

Original:

magicui.design/docs/components/typing-animation