Stream Text - terminal-kit

❯

# stream-text

Agent text inside a TerminalLine. Reveals word-by-word by default; use mode="fade" to fade each word in.

──

examples

❯

Plain

Default — words appear one at a time with no fade transition.

❯

Fade

Same word-by-word pacing, but each word fades in as it appears.

I can tighten the hover transition and add a subtle press-in on click so the button feels more responsive.

──

install

npx shadcn@latest add "https://www.terminal-kit.com/r/stream-text.json"

──

component api

StreamText

Simulated streaming agent text rendered inside a TerminalLine.

Prop	Type	Default	Description
children *	string	—	The text to stream. Must be a plain string.
mode	"plain" \| "fade"	"plain"	Plain reveals word-by-word with no transition. Fade adds a fade-in per word.
speed	number	26	1 (slowest) to 100 (fastest). Controls delay between words.
enabled	boolean	true	Start streaming. Set false to hold until revealed.
onComplete	() => void	—	Called once the full text is revealed.
sessionPause	number	—	SessionContent integration only — ms to wait before the next line when streaming. Put this on StreamText only (other components do not type it). SessionContent reads it from the child element; StreamText itself ignores it. Defaults to estimateStreamDurationMs(text).
segmentDelay	number	—	Delay between word segments in ms (overrides speed).
fadeDuration	number	—	Fade-in duration per segment in ms (overrides speed).
className	string	—	CSS classes on the TerminalLine wrapper (e.g. text-[var(--terminal-dim)] for agent prose).

advanced

useTextStream

Headless hook behind StreamText. Returns segments, isComplete, and timing.

Prop	Type	Default	Description
text *	string	—	The text to stream.
mode	"plain" \| "fade"	"plain"	Plain reveals word-by-word with no transition. Fade adds a fade-in per word.
speed	number	20	1 (slowest) to 100 (fastest). Controls delay between words.
segmentDelay / fadeDuration	number	—	Fine-grained timing overrides (override speed).