StreamingText

Token-by-token text reveal — mimics ChatGPT / Claude streaming output with a blinking caret.

Basic Usage

Preview

brand · fast

tsx

import { StreamingText } from '@toffee.studio/ai-interaction-design/client'

<StreamingText
  text="The quick brown fox jumps over the lazy dog."
  speed="fast"
  tone="brand"
  showCaret
/>

Tones

neutral / brand / muted

neutral

brand

muted

Speeds

slow / normal / fast

slow

normal

fast

With Overlay Slot

overlay render prop

tsx

<StreamingText
  text="Streaming with a progress overlay..."
  speed="fast"
  tone="brand"
  showCaret
  slots={{
    overlay: ({ done, progress }) =>
      done
        ? <span>✓ Complete</span>
        : <span>{Math.round(progress * 100)}%</span>,
  }}
/>

Headless: useStreamingText

Full control over streaming with start, pause, and reset. Build your own UI.

Headless hook demo

Press Start to begin streaming...

tsx

import { useStreamingText } from '@toffee.studio/ai-interaction-design/client'

const { displayedText, done, progress, start, pause, reset } =
  useStreamingText({
    text: 'Your full text here...',
    tickMs: 25,
    autoStart: false,
  })

Props

Prop	Type	Default	Description
text	string	—	Full text to stream (required)
chunkSize	number	1	Characters revealed per tick
tickMs	number	from speed	Milliseconds between ticks
showCaret	boolean	true	Show blinking cursor while streaming
autoStart	boolean	true	Begin streaming on mount
onComplete	() => void	—	Called when streaming finishes
variant	'default' \| 'soft' \| 'strong'	'default'	Visual intensity
speed	'slow' \| 'normal' \| 'fast' \| number	'normal'	Animation speed
tone	'neutral' \| 'brand' \| 'muted'	'neutral'	Color palette
reducedMotion	boolean \| 'auto'	'auto'	Motion override
slots.overlay	({displayedText, progress, done}) => ReactNode	—	Live state render prop