Typing Animation

Overview

The TypingAnimation component reveals text one character at a time, simulating real-time text generation. It’s commonly used for AI assistant responses and chat interfaces. Since it extends the Text component, it accepts all of Text’s styling props.

Variations

Custom speed

Control the typing speed with typingSpeed (milliseconds per character).

With delay

Add a delay before the animation starts with delay (milliseconds).

With text variants

Because TypingAnimation extends TextProps, you can use any Text variant.

With colors

Installation

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 a completion callback
<TypingAnimation
  text="Processing complete."
  onComplete={() => console.log("Typing finished!")}
/>

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

Usage

Behavior

• Plays once. The typing effect runs a single time. After it completes, later re-renders of the same instance show the full text immediately.
• Changing text. If text changes before the first animation finishes, it resets and replays with the new value. Once the animation has completed, a new text value is shown immediately without replaying.
• Line clamping. The component applies lineClamp={1} by default to reduce layout shift as characters are revealed. You can override it by passing your own lineClamp.

Note

onComplete fires when the last character has been revealed. It does not fire when text is shown immediately (for example, on a re-render after the animation has already completed).

Best practices

Do

• Use it for streamed or assistant-style responses where the reveal reinforces that content is being generated.
• Keep typingSpeed fast enough that readers aren’t waiting on the effect — the default of 50ms works for short messages.
• Override lineClamp when the message is expected to wrap across multiple lines.

Don’t

• Don’t animate long-form or critical content a user needs to read immediately — the reveal delays comprehension.
• Don’t rely on the animation replaying when text changes after it has finished; it won’t.

Accessibility

Labeling & semantics

• The text is revealed character by character in the DOM and is not wrapped in an aria-live region, so assistive tech is not notified as it types, and there is no prefers-reduced-motion handling. Treat the animation as decorative.
• When the message content matters for assistive tech, expose the full text through a live region or a visually-hidden node you control, rather than depending on this component to announce it.

Properties

Properties

Component props

Prop	Required	Default	Type
text	true		string
typingSpeed	false	50	number
delay	false	0	number
onComplete	false		() => void

Inherited Text props

All props from the Text component are supported except children and ref. The most common ones:

Prop	Required	Default	Type
variant	false	'body-normal'	TextVariant
color	false	'foreground-2'	TextColor
align	false		'left' | 'center' | 'right'
truncate	false	false	boolean
lineClamp	false	1	1 | 2 | 3 | 4 | 5 | 6
wrap	false		'wrap' | 'nowrap' | 'pretty' | 'balance'