MotionStream

Strømmet tekst som vises i jevnt tempo og tar igjen støt.

WebReact NativeTall og tekst

Prøv det

Forbereder eksempelet …

JavaScript er slått av. Koden nedenfor er hele eksempelet.

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

Korteste bruk

Answer.jsx

<MotionStream text={answerSoFar} initial />

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

Dette tar den seg av

Støt blir lesbare: teksten vises med speed tegn i sekundet i stedet for i klumper.
Et etterslep øker tempoet slik at det vises innen omtrent catchUp millisekunder.
Emoji, flagg og kombinerende tegn deles aldri, og en halvt mottatt emoji venter på resten.
Et omskrevet svar fortsetter fra den felles begynnelsen i stedet for å starte på nytt.
Viste tegn går rett til siden; React renderer bare noen få ganger i sekundet.

Bruk den til

Svaret fra en assistent i en chat.
En bygge- eller utrullingslogg.
Live-teksting.

Props

Prop	Type	Standard	Beskrivelse
`text`	`string`	`—`påkrevd	Teksten så langt. Voksende tekst vises i jevnt tempo; en omskriving fortsetter fra den felles begynnelsen.
`speed`	`number`	`90`	Grunntempo for visning i tegn per sekund.
`catchUp`	`number`	`900`	Et etterslep vises innen omtrent så mange millisekunder ved å øke tempoet.
`initial`	`boolean`	`false`	Vis også teksten som finnes ved mount (ellers vises den med en gang).
`effect`	`'fade' \| 'none'`	`'fade'`	`fade` toner nye tegn inn; `none` viser dem direkte.
`children`	`(visible: string) => ReactNode`		En funksjon som får den taktede teksten, for eksempel for å rendere Markdown.
`as`	`element`	`'span'`	Elementet som renderes.
`onMotionComplete`	`(text) => void`		Kjører hver gang visningen har tatt igjen `text`.

Andre props går til det renderte elementet, så className, style og hendelseshåndterere fungerer som vanlig.

Web og React Native

På nettet tones nye tegn inn (effect="fade") og føres inn i vanlig tekst som kan merkes. Et funksjonsbarn får den taktede strengen for Markdown, høyst annethvert bilde. I en skjult fane vises alt med en gang.

I React Native er teksten en ekte Text og vises uten toning.

Brukt i disse eksemplene

ChattesvarForslag som lukkes, et svar som strømmer i jevnt tempo, og en statuslinje som byttes.MotionStreamMotionListMotionSwapMotionHeight