Response Stream

A component that displays text progressively, simulating a typing or fading effect. It handles both static text and async streams, updating the display in chunks. Use it to create realistic AI response animations or controlled text reveal effects.

byJulien Thibeaut from Prompt Kit

Installation

terminal

pnpm dlx layro-cli add @ibelick/response-stream

npx layro-cli add @ibelick/response-stream

npx layro-cli add @ibelick/response-stream

bunx layro-cli add @ibelick/response-stream

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import { cn } from "@/lib/utils"
import React, { useCallback, useEffect, useRef, useState } from "react"

export type Mode = "typewriter" | "fade"

export type UseTextStreamOptions = {
  textStream: string | AsyncIterable<string>
  speed?: number
  mode?: Mode
  onComplete?: () => void
  fadeDuration?: number
  segmentDelay?: number