TextTypewriter Text

Typewriter Text

Animates text as if being typed out, letter by letter. Supports custom speed and looping.

Code

1

Install with shadcn Beta

Terminal

npx shadcn@latest add "https://smoothui.dev/r/typewriter-text.json"

Or install the demo

Terminal

npx shadcn@latest add "https://smoothui.dev/r/typewriter-text-demo.json"

How to use

Demo.tsx

"use client"

import TypewriterText from "@/components/smoothui/ui/TypewriterText"

export default function TypewriterTextDemo() {
  return (
    <div className="relative max-w-md space-y-6">
      <div>
        <TypewriterText>Typewriter effect for your text!</TypewriterText>
        <div>
          <TypewriterText speed={100} className="text-brand font-mono text-lg">
            Slower typing speed example
          </TypewriterText>
        </div>
        <div>
          <TypewriterText loop className="text-2xl font-semibold">
            This will loop forever!
          </TypewriterText>
        </div>
      </div>
    </div>
  )
}

Props

PropTypeDefault
children
string
-
speed?
number
50
loop?
boolean
-
className?
string
-
Scramble Hover
Text component that animates by scrambling its letters on hover, then resolves to the original text. Useful for headings, buttons, and interactive UI.
Wave Text
Animates each letter in a wave pattern using Framer Motion.