✨ If you like Ebon UI, please give us a star on GitHub.
1
3
Block

Typing Animation

PreviousNext

An animation for typing text.

import { TypingAnimation } from "@/components/ui/typing-animation"

export function Component() {
  return (
    <TypingAnimation
      words={["Developer", "Designer", "Creator", "Dreamer"]}
      typeSpeed={120}
      deleteSpeed={60}
      pauseDelay={1500}
      loop
      className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-3xl font-bold text-transparent md:text-6xl"
    />
  )
}

Installation

pnpm dlx shadcn@latest add https://ebonui.com/r/typing-animation.json

Examples

Hero headline + subheadline combo

import { TypingAnimation } from "@/components/ui/typing-animation"

export function Component() {
  return (
    <div className="space-y-6">
      <TypingAnimation
        words={["Design.", "Develop.", "Deploy.", "Dominate."]}
        typeSpeed={200}
        deleteSpeed={80}
        pauseDelay={1000}
        loop
        className="bg-gradient-to-br from-blue-600 via-purple-600 to-red-600 bg-clip-text text-4xl font-black tracking-tighter text-transparent md:text-6xl"
      />
      <TypingAnimation
        words={["One line of code at a time."]}
        typeSpeed={80}
        showCursor={false}
        className="text-2xl text-gray-500"
      />
    </div>
  )
}

Super fast glitch-style

import { TypingAnimation } from "@/components/ui/typing-animation"

export function Component() {
  return (
    <TypingAnimation
      words={["HACKER", "CODER", "ENGINEER", "WIZARD"]}
      typeSpeed={40}
      deleteSpeed={20}
      pauseDelay={800}
      loop
      cursorStyle="block"
      className="font-mono text-7xl tracking-wider text-green-400"
    />
  )
}

Elegant with underscore cursor

import { TypingAnimation } from "@/components/ui/typing-animation"

export function Component() {
  return (
    <TypingAnimation
      words={["minimalist", "elegant", "timeless", "refined"]}
      typeSpeed={150}
      pauseDelay={2000}
      loop
      cursorStyle="underscore"
      className="font-serif text-6xl text-gray-800 italic"
    />
  )
}

Emoji support

import { TypingAnimation } from "@/components/ui/typing-animation"

export function Component() {
  return (
    <TypingAnimation
      words={["Hello 👋", "Bonjour 🌍", "Ciao ✨", "Hola 🔥"]}
      typeSpeed={100}
      pauseDelay={1800}
      loop
      className="text-6xl"
    />
  )
}

Very long phrases

import { TypingAnimation } from "@/components/ui/typing-animation"

export function Component() {
  return (
    <TypingAnimation
      words={[
        "Building the next generation of AI-powered applications",
        "Turning coffee into beautiful, performant code",
        "Shipping features faster than you can say deploy",
      ]}
      typeSpeed={80}
      deleteSpeed={40}
      pauseDelay={2000}
      loop
      className="mx-auto max-w-5xl text-4xl leading-relaxed md:text-5xl"
    />
  )
}

One-time reveal with motion

import { TypingAnimation } from "@/components/ui/typing-animation"

export function Component() {
  return (
    <TypingAnimation
      words={["This is the moment you've been waiting for..."]}
      showCursor={false}
      className="text-5xl font-bold"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ delay: 3, duration: 1 }}
    />
  )
}

Terminal style

import { TypingAnimation } from "@/components/ui/typing-animation"

export function Component() {
  return (
    <div className="mx-auto max-w-2xl rounded-lg bg-black p-8 text-left font-mono">
      <span className="text-green-400">$ </span>
      <TypingAnimation
        as="span"
        words={["npm run dev", "cargo build --release", "docker compose up"]}
        typeSpeed={100}
        pauseDelay={1200}
        loop
        cursorStyle="block"
        className="text-green-400"
      />
    </div>
  )
}

Usage

import { TypingAnimation } from "@/components/ui/typing-animation"
<TextAnimate
  text="We build the future"
  preset="fadeUp"
  className="text-5xl font-bold tracking-tighter md:text-7xl"
/>

Props

PropTypeDefaultDescription
childrenstring-Single string to animate
wordsstring[]-Array of strings to type and delete in sequence
classNamestring-The class name to be applied to the component
durationnumber100Duration for each character
typeSpeednumber100Speed of typing animation (ms per character)
deleteSpeednumber50Speed of deleting animation (ms per character)
delaynumber0Delay before animation starts (in ms)
pauseDelaynumber1000Pause duration between words (in ms)
loopbooleanfalseWhether to loop the animation
asReact.ElementType"span"Component to render as
startOnViewbooleantrueStart animation when component is in view
showCursorbooleantrueWhether to show the typing cursor
blinkCursorbooleantrueWhether the cursor should blink
cursorStyle"line" | "block" | "underscore""line"Style of the cursor (like VSCode)