Typing Animation

|

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

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

Open in

|

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

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

Open in

|

Open in

With blinking cursor (default) - watch during pause

|

Without blinking cursor - static during pause

|

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

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

Open in

Line cursor (default)

|

Block cursor (VSCode style)

▌

Underscore cursor

_

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

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

Prop	Type	Default	Description
`children`	`string`	`-`	Single string to animate
`words`	`string[]`	`-`	Array of strings to type and delete in sequence
`className`	`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`	`React.ElementType`	`"span"`	Component 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)

Prop	Type	Default	Description
`children`	`string`	`-`	Single string to animate
`words`	`string[]`	`-`	Array of strings to type and delete in sequence
`className`	`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`	`React.ElementType`	`"span"`	Component 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)

Typing Animation

Installation

Examples

Basic Usage

Multiple Words with Loop

Custom Speed

Start on View

Without Cursor

Single Play (No Loop)

Cursor Blinking

Cursor Styles

Usage

Props

Typing Animation

Installation

Examples

Basic Usage

Multiple Words with Loop

Custom Speed

Start on View

Without Cursor

Single Play (No Loop)

Cursor Blinking

Cursor Styles

Usage

Props