AI Streaming Text

Results

Character-by-character text streaming animation with a pulsing cursor. Simulates AI typing effect for chat interfaces and response displays.

Preview

Watch the text stream in real-time

Speed Variants

Control typing speed in milliseconds per character

Fast (15ms)

Normal (30ms - default)

Slow (60ms)

Cursor Variants

Customize cursor visibility and color

Default cursor (indigo)

Custom cursor (emerald)

No cursor

Props

AIStreamingText component API reference

Prop	Type	Default	Description
`text`	`string`	`''`	The text to stream character by character
`speed`	`number`	`30`	Speed in milliseconds per character (lower = faster)
`onComplete`	`() => void`	—	Callback function when streaming completes
`showCursor`	`boolean`	`true`	Show pulsing cursor while streaming
`cursorColor`	`string`	`'bg-indigo-500'`	Tailwind background color class for cursor
`as`	`'p' \| 'span' \| 'div'`	`'p'`	HTML element to render the text as
`className`	`string`	—	Additional CSS classes for the text element

Usage

Import and implementation example

import { AIStreamingText } from '@/blocks/ai-conversation/ai-streaming-text'

export default function Example() {
  return (
    <>
      {/* Basic usage */}
      <AIStreamingText text="Your streaming text here" />

      {/* Custom speed and completion callback */}
      <AIStreamingText
        text="Slower typing with callback..."
        speed={50}
        onComplete={() => console.log('Done!')}
      />

      {/* Custom cursor color */}
      <AIStreamingText
        text="Custom cursor color"
        cursorColor="bg-emerald-500"
      />

      {/* As inline span */}
      <p>
        Response: <AIStreamingText text="inline text" as="span" />
      </p>

      {/* Custom styling */}
      <AIStreamingText
        text="Styled text"
        className="text-lg font-semibold text-indigo-600"
      />
    </>
  )
}

This block is self-contained (no UI component dependencies)

Features

Built-in functionality

Character streaming: Smooth typewriter effect one character at a time
Animated cursor: Pulsing cursor indicator while typing is in progress
Configurable speed: Control typing speed in milliseconds per character
Completion callback: Optional callback when streaming finishes
Custom cursor color: Use any Tailwind background color class
Flexible rendering: Render as p, span, or div element
Auto-cleanup: Automatic interval cleanup on unmount prevents memory leaks
Text reactivity: Restarts animation when text prop changes
Dark mode: Full dark mode support with proper text colors

Accessibility

Accessibility considerations

ARIA Attributes

Renders as semantic text element (p, span, or div)Cursor is purely decorative and hidden from screen readers

Keyboard Navigation

Key	Action
`N/A`	Component is non-interactive, content is read-only

Notes

Screen readers will read the full text content, not the streaming animation
Consider using aria-live="polite" on a parent container for dynamic updates
The streaming effect is visual-only and does not affect content accessibility
Cursor animation respects prefers-reduced-motion via Tailwind animate class

Related Components

AI Chat Message AI Thinking Indicator AI Code Block