Streaming text

Renders text progressively, word by word — mirroring how AI responses stream from the server. Includes a blinking cursor that disappears on completion.

Live demo

Here are three options based on your preferences. Would you like me to walk you through each one?

Why it animates

AI responses arrive as a stream, not all at once. Rendering each word as it arrives reduces perceived latency and makes the interface feel responsive even before the full answer is ready.

Usage

import { StreamingText } from '@/components/ui/StreamingText'

<StreamingText
  text="Here are three options based on your preferences."
  speed={75}
/>