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.

~0.4 kB

Last updated: March 7, 2026

Typewriter Effect Examples

Installation

npx smoothui-cli add typewriter-text

npx smoothui-cli add 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

Accessibility

Reduced Motion

Respects the prefers-reduced-motion media query via a custom useReducedMotion hook. When enabled, the full text is displayed immediately without the character-by-character reveal animation.

Props

Scroll Reveal Paragraph

Reveal paragraphs as they enter the viewport with subtle motion and fade.

Wave Text

An animated text component that creates a smooth wave effect across characters.