AI/Streaming Text

StreamingText

Renders text token by token with configurable speed, smooth cursor animation, and an onComplete callback. Perfect for LLM streaming responses.

import { StreamingText } from "@animui/ui"

Live preview

With real streaming API

Set speed=0 when appending tokens externally from a ReadableStream — StreamingText will render each update immediately without adding additional delay.

"use client";

import { StreamingText } from "@animui/ui";
import { useState } from "react";

export default function Page() {
  const [text, setText] = useState("");

  const handleFetch = async () => {
    const res = await fetch("/api/generate");
    const reader = res.body!.getReader();
    const decoder = new TextDecoder();
    setText("");

    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      setText((t) => t + decoder.decode(value));
    }
  };

  return (
    <div>
      <StreamingText text={text} speed={0} cursor />
      <button onClick={handleFetch}>Generate</button>
    </div>
  );
}

Props

Prop	Type	Default	Description
`text`	`string`	—	The full text string to animate. Characters are revealed progressively.
`speed`	`number`	`18`	Milliseconds between each character. Set to 0 to render instantly (for real streaming where text grows externally).
`cursor`	`boolean`	`true`	Shows a blinking cursor at the end of the displayed text while streaming.
`animate`	`boolean`	`true`	If true, re-animates whenever text changes.
`onComplete`	`() => void`	—	Called when all characters have been displayed.
`className`	`string`	—	Additional classes on the text container.