MotionStream

Gestreamde tekst die in een gelijkmatig tempo wordt onthuld en stoten bijbeent.

WebReact NativeGetallen en tekst

Probeer het

Voorbeeld voorbereiden…

JavaScript staat uit. De code hieronder is het volledige voorbeeld.

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

Kortste gebruik

Answer.jsx

<MotionStream text={answerSoFar} initial />

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

Wat het voor je regelt

Stoten worden leesbaar: tekst wordt onthuld met speed tekens per seconde in plaats van in brokken.
Een achterstand versnelt de onthulling zodat die binnen ongeveer catchUp milliseconden zichtbaar is.
Emoji, vlaggen en combinerende tekens worden nooit gesplitst, en een half ontvangen emoji wacht op de rest.
Een herschreven antwoord gaat verder vanaf het gedeelde begin in plaats van opnieuw te beginnen.
Onthulde tekens gaan direct naar de pagina; React rendert maar een paar keer per seconde.

Gebruik het voor

Het antwoord van een assistent in een chat.
Een build- of deploylog.
Live ondertitels.

Props

Prop	Type	Standaard	Beschrijving
`text`	`string`	`—`verplicht	De tekst tot nu toe. Groeiende tekst wordt gelijkmatig onthuld; een herschrijving gaat verder vanaf het gedeelde begin.
`speed`	`number`	`90`	Basistempo van onthullen in tekens per seconde.
`catchUp`	`number`	`900`	Een achterstand wordt binnen ongeveer zoveel milliseconden onthuld door te versnellen.
`initial`	`boolean`	`false`	Onthul ook de tekst die bij de mount al aanwezig is (anders verschijnt die direct).
`effect`	`'fade' \| 'none'`	`'fade'`	`fade` laat nieuwe tekens infaden; `none` toont ze direct.
`children`	`(visible: string) => ReactNode`		Een functie die de getimede tekst krijgt, bijvoorbeeld om Markdown te renderen.
`as`	`element`	`'span'`	Het element dat wordt gerenderd.
`onMotionComplete`	`(text) => void`		Draait elke keer dat de onthulling `text` heeft bijgebeend.

Andere props gaan naar het gerenderde element, dus className, style en event handlers werken zoals gewoonlijk.

Web en React Native

Op het web faden nieuwe tekens in (effect="fade") en worden ze samengevoegd tot gewone, selecteerbare tekst. Een functie als kind krijgt de getimede string voor Markdown, hooguit om het andere frame. In een verborgen tabblad wordt alles in één keer getoond.

In React Native is de tekst een echte Text en verschijnt hij zonder fade.

Gebruikt in deze voorbeelden

ChatantwoordSuggesties die inklappen, een antwoord dat in een gelijkmatig tempo streamt en een statusregel die wisselt.MotionStreamMotionListMotionSwapMotionHeight