Typewriter Text

Animated typewriter text effect for React with character-by-character reveal and looping support. Ideal for hero sections, landing pages, and AI chat interfaces.

Open in v0

Last updated: January 29, 2026

Typewriter Effect Examples

Installation

pnpm dlx shadcn add @smoothui/typewriter-text
npx shadcn@latest add @smoothui/typewriter-text
yarn dlx shadcn add @smoothui/typewriter-text
bunx shadcn add @smoothui/typewriter-text

Features

  • Progressive character reveal with configurable speed
  • Optional looping with pauses
  • Works with headings, paragraphs, and inline text
  • Built with Framer Motion
  • Accessible and performant

Props

Reveal Text

Animate text into view from different directions with staggered characters.

Scramble Hover

Animated text scramble effect on hover for React. Creates playful, Matrix-style character animations with customizable speed and duration. Built with Motion.

On this page

Installation
Features
Props

Created by

Edu Calvo's avatar
Edu Calvo