Typewriter Text
Animated typewriter text for React with character-by-character reveal and looping. Ideal for hero sections and AI chat UIs.
Typewriter Effect Examples
Installation
npx smoothui-cli add typewriter-textFeatures
- 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
Top Down Letters
Animated React per-character text reveal where letters descend from above in a pronounced staircase, one symbol at a time, with zero blur. The top-down counterpart to Bottom Up Letters, built with Motion.
Wave Text
Animated React wave text component with smooth character-by-character wave effect, customizable amplitude, and GPU-accelerated motion.