Streaming Text

import { StreamingText } from "@/components/ui/streaming-text";

export default function Example() {
  return <StreamingText />;
}

"use client";

import { forwardRef, useState, useEffect } from "react";
import { cn } from "@/lib/utils";

const StreamingText = forwardRef(({ className, text = "", speed = 20, onComplete, ...props }, ref) => {
  const [displayed, setDisplayed] = useState("");
  useEffect(() => {
    setDisplayed("");
    let i = 0;
    const timer = setInterval(() => {
      if (i < text.length) { setDisplayed((p) => p + text[i]); i++; }
      else { clearInterval(timer); onComplete?.(); }
    }, speed);
    return () => clearInterval(timer);
  }, [text, speed]);

  return <span ref={ref} className={cn("whitespace-pre-wrap", className)} {...props}>{displayed}<span className="inline-block w-0.5 h-4 bg-current animate-pulse ml-0.5 align-text-bottom" /></span>;
});
StreamingText.displayName = "StreamingText";

export { StreamingText };