MotionStream

Gestreamter Text, gleichmäßig eingeblendet, der bei Schüben aufholt.

WebReact NativeZahlen und Text

Ausprobieren

Beispiel wird vorbereitet…

JavaScript ist aus. Der Code unten ist das vollständige Beispiel.

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

Kürzeste Nutzung

Answer.jsx

<MotionStream text={answerSoFar} initial />

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

Was sie dir abnimmt

Aus Schüben wird Lesen: Text erscheint mit speed Zeichen pro Sekunde statt in Brocken.
Ein Rückstau beschleunigt das Einblenden, sodass er in etwa catchUp Millisekunden angezeigt ist.
Emojis, Flaggen und kombinierende Zeichen werden nie getrennt, und ein halb empfangenes Emoji wartet auf den Rest.
Eine umgeschriebene Antwort setzt am gemeinsamen Anfang an, statt neu zu beginnen.
Eingeblendete Zeichen landen direkt auf der Seite; React rendert nur ein paar Mal pro Sekunde.

Gut für

Die Antwort eines Assistenten in einem Chat.
Ein Build- oder Deploy-Log.
Live-Untertitel.

props

Prop	Typ	Standard	Beschreibung
`text`	`string`	`—`erforderlich	Der bisherige Text. Wachsender Text wird gleichmäßig eingeblendet; eine Umschreibung setzt am gemeinsamen Anfang an.
`speed`	`number`	`90`	Grundtempo des Einblendens in Zeichen pro Sekunde.
`catchUp`	`number`	`900`	Ein Rückstau wird durch Beschleunigen in etwa so vielen Millisekunden eingeblendet.
`initial`	`boolean`	`false`	Auch den beim Mount vorhandenen Text einblenden (sonst erscheint er sofort).
`effect`	`'fade' \| 'none'`	`'fade'`	`fade` blendet neue Zeichen ein; `none` zeigt sie direkt.
`children`	`(visible: string) => ReactNode`		Eine Funktion, die den getakteten Text erhält, etwa um Markdown zu rendern.
`as`	`element`	`'span'`	Das zu rendernde Element.
`onMotionComplete`	`(text) => void`		Läuft, sobald das Einblenden `text` eingeholt hat.

Weitere props gehen an das gerenderte Element, also funktionieren className, style und Event-Handler wie gewohnt.

Web und React Native

Im Web blenden neue Zeichen ein (effect="fade") und werden zu normalem, markierbarem Text zusammengeführt. Ein Funktions-Kind erhält den getakteten String für Markdown, höchstens jeden zweiten Frame. In einem ausgeblendeten Tab wird alles sofort angezeigt.

Unter React Native ist der Text ein echtes Text und erscheint ohne Einblendung.

Verwendet in diesen Beispielen

Chat-AntwortVorschläge, die sich einklappen, eine Antwort, die gleichmäßig hereinströmt, und eine Statuszeile, die wechselt.MotionStreamMotionListMotionSwapMotionHeight