Response Stream

AI chats 279

About

A component for displaying text with streaming animations, perfect for chat interfaces, AI responses, or any text that should appear progressively.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Response Stream to your project and fits it to your theme.

Code

How Response Stream is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { ResponseStream } from "@/components/ui/response-stream"

export function ResponseStreamFade() {
  const text = `This text is fading in word by word. The fade mode creates a smooth and elegant text reveal. You can customize the fadeDuration but also the segmentDelay to control the speed of the animation.`

  return (
    <div className="w-full min-w-full">
      <ResponseStream
        textStream={text}
        mode="fade"
        className="text-sm"
        fadeDuration={1200}
      />
    </div>
  )
}