Typing Animation Custom Speed

PreviousNext

Example showing custom typing and deleting speeds.

Docs
magicuiexample

Preview

Loading preview…
registry/example/typing-animation-demo-3.tsx
import { TypingAnimation } from "@/registry/magicui/typing-animation"

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

Installation

npx shadcn@latest add @magicui/typing-animation-demo-3

Usage

import { TypingAnimationDemo3 } from "@/components/typing-animation-demo-3"
<TypingAnimationDemo3 />