Orbeez kit
Conversation

Response stream

<ResponseStream />
An answer arriving a character at a time, or a word at a time with a blur fade, with a bead as the caret.
Typewriter
Fade

Install

bash
npx shadcn@latest add https://orbeez-kit.vercel.app/r/response-stream.json

Usage

tsx
<ResponseStream text={answer} streaming={!done} />
<ResponseStream text={answer} mode="fade" streaming={!done} />

// or reveal it yourself
const { text, done } = useTypewriter(answer, { speed: 40 })

Good to know

  • The caret is drawn after the text rather than laid beside it, so the growing text never pushes anything along.
  • Text that keeps growing carries on from where it is; replaced text starts over.
PreviousCode blockNextSource