MotionStream

Du texte en streaming révélé à un rythme régulier, qui rattrape son retard en cas de rafale.

WebReact NativeNombres et texte

Essayer

Préparation de l’exemple…

JavaScript est désactivé. Le code ci-dessous est l’exemple complet.

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;
}

Usage minimal

Answer.jsx

<MotionStream text={answerSoFar} initial />

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

Ce qu’il gère pour vous

Les rafales deviennent lisibles : le texte apparaît à speed caractères par seconde au lieu d’arriver par blocs.
En cas de retard accumulé, le rythme s’accélère pour tout afficher en environ catchUp millisecondes.
Les emojis, les drapeaux et les signes combinants ne sont jamais coupés, et un emoji reçu à moitié attend la suite.
Une réponse réécrite repart du début commun au lieu de tout recommencer.
Les caractères révélés vont directement dans la page ; React ne se rend que quelques fois par seconde.

À utiliser pour

La réponse d’un assistant dans un chat.
Un log de build ou de déploiement.
Des sous-titres en direct.

Props

Prop	Type	Défaut	Description
`text`	`string`	`—`obligatoire	Le texte reçu jusqu’ici. Un texte qui s’allonge est révélé à un rythme régulier ; une réécriture repart du début commun.
`speed`	`number`	`90`	Rythme de base de la révélation, en caractères par seconde.
`catchUp`	`number`	`900`	Un retard accumulé est révélé en environ autant de millisecondes, en accélérant.
`initial`	`boolean`	`false`	Révéler aussi le texte présent au montage (sinon il s’affiche aussitôt).
`effect`	`'fade' \| 'none'`	`'fade'`	`fade` fait apparaître les nouveaux caractères en fondu ; `none` les affiche directement.
`children`	`(visible: string) => ReactNode`		Une fonction qui reçoit le texte rythmé, par exemple pour rendre du Markdown.
`as`	`element`	`'span'`	L’élément à rendre.
`onMotionComplete`	`(text) => void`		S’exécute chaque fois que la révélation rattrape `text`.

Les autres props vont à l’élément rendu : className, style et les gestionnaires d’événements fonctionnent comme d’habitude.

Web et React Native

Sur le web, les nouveaux caractères apparaissent en fondu (effect="fade") puis sont intégrés dans du texte ordinaire et sélectionnable. Un enfant fonction reçoit la chaîne rythmée pour du Markdown, au plus une image sur deux. Dans un onglet masqué, tout s’affiche d’un coup.

Sur React Native, le texte est un vrai Text et apparaît sans fondu.

Utilisé dans ces exemples

Réponse de chatDes suggestions qui se replient, une réponse qui arrive à un rythme régulier et une ligne d’état qui change.MotionStreamMotionListMotionSwapMotionHeight