StreamingReveal
StableText that appears as it is written, with each new word fading in once.
Also known as streaming text, typewriter, stream
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
A reply as it is written
Sales rose 12% in the third quarter. Most of the gain came from
const { text, streaming } = useStreamingText(answer);
<StreamingReveal text={text} streaming={streaming} />Replay writes the text again. Only the newest words are faint.
When to use it
Shows a reply as it is being written, fading in each new word once. Words already shown never move or fade again, so the text stays calm to read.
Made of: Words · Spaces
Use it for
- The text of an assistant reply while it streams in.
- Any text that grows word by word from a live source.
Not for
- Content that appears all at once: use Reveal.
- A whole reply with its avatar, cursor and actions: use Message.
- Showing the assistant is busy before any words arrive: use TypingIndicator.
Do and avoid
Your flight lands at 9:40. The hotel lets you check in from 2 pm.
Your flight lands at 9:40. The hotel lets you
Do
- Add words in place and let lines wrap on their own.
- Pass text in at a steady pace, about 30 times a second at most.
- Mark the reply as finished when it ends so the last word shows.
- Let Message handle what screen readers announce.
Avoid
- Do not animate height or position.
- Do not rebuild old words, which would replay their fade.
- Do not add your own blur or slide on top of the built-in fade.
- Do not slow the text down to show off the effect.
On a phone
- Each new word fades in from a faint blur in --dur-base (220ms) on --ease-arrive, and new words add to the end so the text does not jump as it streams.
- With reduced motion turned on in the phone settings, the text just appears.
Seen in products
- Streamdown fades in each word over a short time and suggests a slightly longer fade, or a blur for fast replies.
- Upstash describes limiting updates to about 30 a second and showing whole words.
- Both say words already shown must not animate again and that only fading should change.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| textrequired | string | none | Text received so far. Pass the buffer, not a delta. |
| streaming | boolean | false | While true, a trailing partial word is held back until it is complete. |
| className | string | none | Class for the wrapping span. |
"Show code under the preview gives the code for the example on the stage."
Tokens
Change one of these and every part that uses it follows.
--animate-word-in--blur-arrive--dur-base--ease-arrive
Built in
- When people turn off motion in their system settings, the text appears with no fade or blur.
- A half-written word is held back until it is complete, so words never appear in pieces.
- Words are real text, so selecting, copying and searching the page still work.
- It announces nothing by itself, so screen readers are not flooded with every new word.
What you need to do
- Put it inside Message, or another part that tells screen readers when the reply is complete.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide