StreamingText
Reveals text character by character with a blinking cursor, catching up as a streamed reply grows
Category: display · WCAG 2.2-AA · ai, streaming, typewriter, text, chat
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | — | The target text. Pass the accumulating reply as it streams; typing catches up as it grows, and restarts if it is replaced by a shorter string. |
speed | number | 2 | Characters revealed per animation frame. |
onComplete | () => void | — | Called when the displayed text has caught up with `text`. |
Design tokens
--cascivo-duration-loop-fast
When to use
- Rendering an assistant reply as it streams in, smoothing bursty token arrival into steady typing
When not to use
- Static text — render it directly
- Announcing the reply to screen readers — StreamingText is never a live region; announce completion with announce() or AiStatus
How to build an accessible StreamingText in React →
Examples
Typing
<StreamingText text="Hello, I am cascivo." speed={3} />Related components
- AiStatus — AiStatus announces the phase while StreamingText renders the words
- TypingIndicator — Before the first token arrives, show TypingIndicator instead