MotionStream

Texto en streaming mostrado a un ritmo constante que se pone al día con las ráfagas.

WebReact NativeNúmeros y texto

Pruébalo

Preparando el ejemplo…

JavaScript está desactivado. El código de abajo es el ejemplo 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 mínimo

Answer.jsx

<MotionStream text={answerSoFar} initial />

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

Lo que resuelve por ti

Las ráfagas se vuelven lectura: el texto aparece a speed caracteres por segundo en lugar de a trozos.
Si se acumula texto, el ritmo se acelera para mostrarlo en unos catchUp milisegundos.
Los emojis, las banderas y las marcas combinadas nunca se parten, y un emoji recibido a medias espera al resto.
Una respuesta reescrita continúa desde el inicio común en lugar de empezar de nuevo.
Los caracteres mostrados van directamente a la página; React solo se renderiza unas pocas veces por segundo.

Úsalo para

La respuesta de un asistente en un chat.
Un log de build o de despliegue.
Subtítulos en vivo.

Props

Prop	Tipo	Por defecto	Descripción
`text`	`string`	`—`obligatoria	El texto hasta ahora. El texto que crece aparece a un ritmo constante; una reescritura continúa desde el inicio común.
`speed`	`number`	`90`	Ritmo base de revelado, en caracteres por segundo.
`catchUp`	`number`	`900`	Lo acumulado se revela en unos tantos milisegundos acelerando el ritmo.
`initial`	`boolean`	`false`	Revela también el texto presente al montar (si no, se muestra de inmediato).
`effect`	`'fade' \| 'none'`	`'fade'`	`fade` hace aparecer los caracteres nuevos con un fundido; `none` los muestra directamente.
`children`	`(visible: string) => ReactNode`		Una función que recibe el texto dosificado, por ejemplo para renderizar Markdown.
`as`	`element`	`'span'`	El elemento que se renderiza.
`onMotionComplete`	`(text) => void`		Se ejecuta cada vez que el revelado alcanza a `text`.

Las demás props van al elemento renderizado, así que className, style y los manejadores de eventos funcionan como siempre.

Web y React Native

En la web, los caracteres nuevos aparecen con un fundido (effect="fade") y se integran en texto normal y seleccionable. Un hijo función recibe la cadena dosificada para Markdown, como mucho cada dos fotogramas. En una pestaña oculta todo se muestra de golpe.

En React Native, el texto es un Text real y aparece sin fundido.

Se usa en estos ejemplos

Respuesta de chatSugerencias que se pliegan, una respuesta que llega a un ritmo constante y una línea de estado que se intercambia.MotionStreamMotionListMotionSwapMotionHeight