Typing Animation

The TypingAnimation component creates an animated typing effect, commonly used for AI assistant responses or chat interfaces to simulate real-time text generation.

Usage

With Custom Speed

Control the typing speed using the typingSpeed prop (in milliseconds per character).

With Delay

Add a delay before the typing animation starts using the delay prop (in milliseconds).

With Text Variants

Since TypingAnimation extends TextProps, you can use all Text component variants.

With Colors

Usage

import { TypingAnimation } from '@harnessio/ui/components'

// Basic usage
<TypingAnimation text="Hello, world!" />

// With custom speed and delay
<TypingAnimation
  text="Welcome to the chat!"
  typingSpeed={30}
  delay={500}
/>

// With completion callback
<TypingAnimation
  text="Processing complete."
  onComplete={() => console.log('Typing finished!')}
/>

// With Text styling
<TypingAnimation
  text="Important message"
  variant="heading-small"
  color="foreground-1"
/>

API Reference

Props

Prop	Type	Default	Description
text	string	—	The text to animate
typingSpeed	number	50	Milliseconds between each character
delay	number	0	Milliseconds to wait before starting the animation
onComplete	() => void	—	Callback fired when typing animation completes

Additionally, all props from the Text component are supported (except children and ref), including:

Prop	Type	Default	Description
variant	TextVariant	"body-normal"	Typography variant
color	TextColor	"foreground-2"	Text color
align	"left" | "center" | "right"	—	Text alignment
truncate	boolean	false	Enable text truncation
lineClamp	1 | 2 | 3 | 4 | 5 | 6	1	Limit visible lines
wrap	"wrap" | "nowrap" | "pretty" | "balance"	—	Text wrapping behavior

Behavior

1. Single animation: The typing effect only plays once. After completion, subsequent renders show the full text immediately.

2. Text changes: When the text prop changes, the animation resets and plays again.

3. Line clamping: By default, lineClamp={1} is applied to prevent layout shifts during animation.