Skip to content

Streaming Text

Text that arrives word by word, as a model writes it.

Try the Ethiopia Guji. It is a washed light roast with peach and jasmine notes, close to the Kenyan coffee you reordered twice. Brew it at 93 °C and give the bloom a full 30 seconds.

'use client';

import { useState } from 'react';
import { Button, StreamingText } from '@brand-studio/ui';

const answer = 'Try the Ethiopia Guji. It is a washed light roast with peach and jasmine notes, close to the Kenyan coffee you reordered twice. Brew it at 93 °C and give the bloom a full 30 seconds.';

export default function StreamingTextDemo() {
  const [run, setRun] = useState(0);
  return (
    <div style={{ display: 'grid', gap: 20, maxWidth: 520 }}>
      <StreamingText key={run} text={answer} />
      <div><Button tone="secondary" onClick={() => setRun(run + 1)}>Replay</Button></div>
    </div>
  );
}

Installation

pnpm add @brand-studio/ui

npm install @brand-studio/ui

yarn add @brand-studio/ui

bun add @brand-studio/ui

Install the peer dependencies
```
npm install react react-dom
```
Import the stylesheet once
```
import '@brand-studio/ui/styles.css';
```

Wrap your app in a brand theme

import { BrandTheme, StreamingText } from '@brand-studio/ui';
import brand from './brand.json';

<BrandTheme palette={brand.tokens} mode="system">
  {/* your app */}
</BrandTheme>

Usage

import { StreamingText } from '@brand-studio/ui';

<StreamingText text={answer} />

Accessibility

The whole text is in the HTML from the first byte; CSS reveals it word by word.
Screen readers hear the text once, not word by word.
Change the key to replay. Under reduced motion the text appears at once.

API Reference

Prop	Type	Default
`text`	`string`	–
`wordsPerSecond?`	`number`	`14`
`as?`	`React.ElementType`	–
`className?`	`string`	`''`
`onDone?`	`(() => void)`	–