StreamingText
A reply as it's written (after beautifului.dev): letter by letter, a step behind the words as they come so it never stops to wait, a thin caret just after the last one while more is on its way. Nothing fades or blurs — the pace and the caret are the motion — and the rest of a word being written holds its place unseen, so nothing jumps lines. A reply that lands at once rushes in and eases off. Words already said show whole.
As it's written
<ChatMessage from="agent">
<StreamingText text={reply} live writing={!done} />
</ChatMessage>All at once
<StreamingText text={reply} live />API
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | The reply so far; it grows as it's written. |
| live | boolean | false | Arriving now, so its words resolve in. Left out, it shows whole — a reply from earlier in the thread. |
| writing | boolean | false | More is still on its way: the caret stays. |
| onSettled | () => void | — | Every word is in and nothing more is coming: chips may follow. |
Guidelines
- Only for the reply arriving now: a thread read back shows whole, nothing resolving twice.
- The pace is the scale's: four letters a stagger beat (--duration-stagger), a backlog drained within --duration-very-slow. Under reduced motion the words simply appear. Letters never fade in: a fading tail reads as grey, broken text.
- Chips and actions under a reply wait for onSettled, so they don't arrive before the words they answer.