Stream Text - terminal-kit

cat components/stream-text.tsx

❯

# stream-text

Agent text that types out or fades in word-by-word, modeled on a terminal-native take on streaming output.

when to use — Simulate progressive agent text in demos or scripted sessions. For real LLM output, append tokens directly instead.

──

examples

❯

Typewriter

Types out character-by-character with a blinking caret until complete.

❯

Fade

Reveals word-by-word with a fade-in. Use a higher speed for a snappy reveal.

Done — hover now eases to 90% opacity and the button presses in on click. Want the same pass on the secondary and ghost variants?

──

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	"typewriter" \| "fade"	"typewriter"	Character-by-character typing, or word-by-word fade-in.
speed	number	26	1 (slowest) to 100 (fastest).
variant	TerminalLineVariant	—	Line color variant (default, dim, success, etc.).
enabled	boolean	true	Start streaming. Set false to hold until revealed.
showCaret	boolean	true	Show a blinking caret while typing (typewriter mode).
onComplete	() => void	—	Called once the full text is revealed.
sessionPause	number	—	Ms to wait before SessionContent reveals the next line. Defaults to the estimated stream duration.
characterChunkSize	number	—	Typewriter: characters revealed per frame (overrides speed).
segmentDelay	number	—	Fade: delay between word segments in ms (overrides speed).
fadeDuration	number	—	Fade: fade-in duration per segment in ms (overrides speed).
className	string	—	Additional CSS classes on the TerminalLine wrapper.

useTextStream

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

Prop	Type	Default	Description
text *	string	—	The text to stream.
mode	"typewriter" \| "fade"	"typewriter"	Animation mode.
speed	number	20	1 (slowest) to 100 (fastest).
characterChunkSize / segmentDelay / fadeDuration	number	—	Fine-grained timing overrides (override speed).

──

install

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