Typewriter Text

Animated typewriter text for React with character-by-character reveal and looping. Ideal for hero sections and AI chat UIs.

~0.4 kB

Last updated: March 18, 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

Animated React scroll-reveal paragraph component with viewport-triggered fade and translate animations using Intersection Observer.

Wave Text

Animated React wave text component with smooth character-by-character wave effect, customizable amplitude, and GPU-accelerated motion.