MotionStream

Texto em streaming exibido em ritmo constante, que alcança as rajadas.

WebReact NativeNúmeros e texto

Experimente

Preparando o exemplo…

O JavaScript está desativado. O código abaixo é o exemplo completo.

App.jsx

import { useEffect, useRef, useState } from 'react';
import { MotionStream } from '@kkwaenggwari/animated-chorus';
import './styles.css';

const answer =
  'Motion helps people follow change. When a total updates, a rolling number shows which way it moved. ' +
  'When a panel opens, the height that follows its content keeps the reader in place. ' +
  'When an answer arrives in bursts, a steady reveal turns the bursts into reading: nothing waits for the ' +
  'next packet, and nothing is dumped at once. The pace speeds up only when a backlog builds, so the text ' +
  'never falls far behind what the server has already sent.';

// Network-like bursts: long pauses, then a lot of text at once.
const pauses = [300, 1100, 250, 1500, 400, 900];

export default function App({ speed = 90, catchUp = 900, chunk = 160, effect = 'fade' }) {
  const [received, setReceived] = useState(0);
  const [chunks, setChunks] = useState(0);
  const renders = useRef(0);
  renders.current += 1;

  useEffect(() => {
    if (received >= answer.length) return;
    const timer = setTimeout(
      () => {
        setReceived((current) => Math.min(answer.length, current + chunk));
        setChunks((count) => count + 1);
      },
      pauses[chunks % pauses.length],
    );
    return () => clearTimeout(timer);
  }, [received, chunks, chunk]);

  const askAgain = () => {
    setReceived(0);
    setChunks(0);
  };

  return (
    <div className="chat">
      <p className="question">Why does motion help an interface?</p>
      <p className="answer">
        <MotionStream
          text={answer.slice(0, received)}
          speed={speed}
          catchUp={catchUp}
          effect={effect}
        />
      </p>
      <footer>
        <output>
          {chunks} chunks · App rendered {renders.current} times
        </output>
        <button onClick={askAgain}>Ask again</button>
      </footer>
    </div>
  );
}

styles.css

.chat {
  display: grid;
  gap: 16px;
  max-width: 620px;
  margin: 0 auto;
  padding: 24px 20px;
}

.question {
  justify-self: end;
  max-width: 80%;
  margin: 0;
  padding: 10px 16px;
  border-radius: 18px 18px 4px 18px;
  background: #176b52;
  color: #fff;
}

.answer {
  min-height: 180px;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid #cfe8dc;
  border-radius: 18px 18px 18px 4px;
  background: #fff;
  color: #16181d;
  line-height: 1.65;
}

footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

output {
  font:
    600 13px ui-monospace,
    Consolas,
    monospace;
  color: #176b52;
}

footer button {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #fff;
  font:
    600 14px system-ui,
    sans-serif;
  cursor: pointer;
}

Uso mais curto

Answer.jsx

<MotionStream text={answerSoFar} initial />

<MotionStream text={answerSoFar}>
  {visible => <Markdown>{visible}</Markdown>}
</MotionStream>

O que ele resolve para você

Rajadas viram leitura: o texto aparece a speed caracteres por segundo em vez de em blocos.
Um acúmulo acelera a exibição para aparecer em cerca de catchUp milissegundos.
Emojis, bandeiras e marcas combinadas nunca são partidos, e um emoji recebido pela metade espera o resto.
Uma resposta reescrita continua do começo em comum em vez de recomeçar.
Os caracteres exibidos vão direto para a página; o React só renderiza poucas vezes por segundo.

Use para

A resposta de um assistente em um chat.
Um log de build ou deploy.
Legendas ao vivo.

Props

Prop	Tipo	Padrão	Descrição
`text`	`string`	`—`obrigatória	O texto até agora. Texto que cresce aparece em ritmo constante; uma reescrita continua do começo em comum.
`speed`	`number`	`90`	Velocidade base de exibição, em caracteres por segundo.
`catchUp`	`number`	`900`	Um acúmulo é exibido em cerca desse número de milissegundos, acelerando.
`initial`	`boolean`	`false`	Exibe aos poucos também o texto presente na montagem (senão ele aparece na hora).
`effect`	`'fade' \| 'none'`	`'fade'`	`fade` faz os caracteres novos aparecerem com fade; `none` os mostra direto.
`children`	`(visible: string) => ReactNode`		Uma função que recebe o texto no ritmo, por exemplo para renderizar Markdown.
`as`	`element`	`'span'`	O elemento a renderizar.
`onMotionComplete`	`(text) => void`		Roda sempre que a exibição alcança `text`.

As outras props vão para o elemento renderizado, então className, style e handlers de eventos funcionam normalmente.

Web e React Native

Na web, os caracteres novos aparecem com fade (effect="fade") e são incorporados a texto comum e selecionável. Um filho função recebe a string no ritmo, para Markdown, no máximo a cada dois quadros. Em uma aba oculta, tudo aparece de uma vez.

No React Native, o texto é um Text de verdade e aparece sem fade.

Usado nestes exemplos

Resposta de chatSugestões que se recolhem, uma resposta que chega em ritmo constante e uma linha de status que troca.MotionStreamMotionListMotionSwapMotionHeight