Typewriter typing animation
Classic character-by-character typewriter effect with a blinking cursor, supports looping through multiple phrases. Works well for a rotating value-prop line under a hero headline. Keep phrases short, long strings make the loop feel slow.
Live preview
open in new tab ↗import { TypingAnimation } from "@/components/magicui/typing-animation"
export function TypingAnimationDemo() {
return <TypingAnimation words={["Design faster", "Ship sooner", "Iterate freely"]} loop />
}Block id: magicui-typing-animationreact-tailwind · swap-content
More animation-text blocks
Want the whole site, not just the block?
We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.