StreamingText

Animates text character by character with a blinking cursor, simulating LLM streaming output.

Live Demo

The quick brown fox jumps over the lazy dog.

Faster stream at 10ms per character.

Custom pipe cursor.

No cursor shown here.

Props

Prop	Type	Default	Description
`text`	`string`	`—`	The full text string to animate.
`speed`	`number`	`30`	Milliseconds between each character.
`cursor`	`boolean`	`true`	Show a blinking cursor while streaming.
`cursorChar`	`string`	`'▋'`	Character used as the cursor.
`onComplete`	`() => void`	`—`	Called when the animation finishes.

Usage

import { StreamingText } from '@ghiberti85/ui'

// Basic usage
<StreamingText text="Hello, world!" />

// Custom speed and cursor
<StreamingText text="Fast stream" speed={10} cursorChar="|" />

// No cursor
<StreamingText text="No cursor" cursor={false} />

// With completion callback
<StreamingText
  text="Done!"
  onComplete={() => console.log('finished')}
/>

// Simulated LLM streaming
const [text, setText] = useState('')
// Update text as chunks arrive from your API
<StreamingText text={text} speed={1} />

View in Storybook

Open in Storybook →

←ChatMessage HoverCard→