Components
Loading preview...
A component for displaying text with streaming animations, perfect for chat interfaces, AI responses, or any text that should appear progressively.
@motion-primitives
npx shadcn@latest add https://21st.dev/r/ibelick/response-streamimport { 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>
)
}