MotionStream

Streamet tekst, der vises i et jævnt tempo og indhenter stød.

WebReact NativeTal og tekst

Prøv det

Forbereder eksemplet…

JavaScript er slået fra. Koden nedenfor er hele eksemplet.

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 brug

Answer.jsx

<MotionStream text={answerSoFar} initial />

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

Det klarer den for dig

Stød bliver til læsning: teksten vises med speed tegn i sekundet i stedet for i klumper.
Et efterslæb får visningen til at gå hurtigere, så det vises inden for cirka catchUp millisekunder.
Emoji, flag og kombinerende tegn deles aldrig, og en halvt modtaget emoji venter på resten.
Et omskrevet svar fortsætter fra den fælles begyndelse i stedet for at starte forfra.
Viste tegn går direkte til siden; React renderer kun nogle få gange i sekundet.

Brug den til

En assistents svar i en chat.
En build- eller deploy-log.
Live-undertekster.

Props

Prop	Type	Standard	Beskrivelse
`text`	`string`	`—`påkrævet	Teksten indtil nu. Voksende tekst vises i et jævnt tempo; en omskrivning fortsætter fra den fælles begyndelse.
`speed`	`number`	`90`	Grundtempo for visning i tegn pr. sekund.
`catchUp`	`number`	`900`	Et efterslæb vises inden for cirka så mange millisekunder ved at sætte tempoet op.
`initial`	`boolean`	`false`	Vis også teksten, der findes ved mount (ellers vises den med det samme).
`effect`	`'fade' \| 'none'`	`'fade'`	`fade` toner nye tegn ind; `none` viser dem direkte.
`children`	`(visible: string) => ReactNode`		En funktion, der får den taktede tekst, for eksempel til at rendere Markdown.
`as`	`element`	`'span'`	Elementet, der renderes.
`onMotionComplete`	`(text) => void`		Kører, hver gang visningen har indhentet `text`.

Andre props går til det renderede element, så className, style og event handlers virker som normalt.

Web og React Native

På nettet toner nye tegn ind (effect="fade") og samles til almindelig tekst, der kan markeres. Et funktionsbarn får den taktede streng til Markdown, højst hver anden frame. I en skjult fane vises alt med det samme.

I React Native er teksten en rigtig Text og vises uden toning.

Brugt i disse eksempler

ChatsvarForslag, der foldes sammen, et svar, der streamer i et jævnt tempo, og en statuslinje, der skifter.MotionStreamMotionListMotionSwapMotionHeight