Stream Text

Text arriving a piece at a time, ending in the Terminal's caret.

DisplayClient component

Preview

The CLI writes the source into your project and pulls in whatever it depends on.

$pnpm dlx shadcn@latest add @duck/stream-text

Pulls in @duck/theme. Already installed items are skipped.

import { StreamText } from "@/components/ui/stream-text"

The file lands in components/ui/stream-text.tsx and belongs to you from that point on. Edit it in place rather than wrapping it.

Everything not listed here is forwarded to the underlying element.

Prop	Type	Default	Description
text	string	-	Typed out at speed. This is the demo mode — a timer, not a stream.
streaming	string	-	Already-streaming content. Rendered as given, so the model sets the pace. This is the real mode.
active	boolean	-	True while more tokens are coming. Keeps the caret lit in streaming mode.
speed	number	18	Milliseconds per character, in text mode only.
onDone	() => void	-	Fires when the typed string finishes.

What keeps this component from turning into noise.

Use streaming for real output. Re-typing text you already have wastes the user's time to look busy.
Under reduced motion the whole string appears at once. Someone who asked for less movement should not be made to wait for a typewriter.