AgentsAnimated
Streaming Text
A reply arriving token by token, without the jitter.
Streaming Text renders an AI reply as it streams: each new chunk fades up out of a slight blur instead of popping in, a signal caret marks the writing edge, and text already on screen never moves.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/streaming-text.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/streaming-text.
Builds on: motion
Usage
import { StreamingText } from "@/components/ui/streaming-text";
<StreamingText text={partial} streaming={isStreaming} />Motion
How it moves
New chunks fade in from a 3px blur (GSAP).
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
StreamingText
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | Text so far. |
| streaming | boolean | — | Shows the caret. |
Accessibility
- Fully keyboard operable with visible focus.
- Live regions announce streaming updates politely.
FAQ
Also searched as: streaming text react · ai typing effect · token streaming ui · llm streaming response · typewriter ai response