MotionStream

Strömmad text som visas i jämn takt och hinner ikapp skurar.

WebbReact NativeSiffror och text

Prova

Förbereder exemplet…

JavaScript är avstängt. Koden nedan är hela exemplet.

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

Kortaste användning

Answer.jsx

<MotionStream text={answerSoFar} initial />

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

Det här sköter den åt dig

Skurar blir läsbara: texten visas med speed tecken per sekund i stället för i klumpar.
En eftersläpning snabbar upp visningen så att den syns inom ungefär catchUp millisekunder.
Emoji, flaggor och kombinerande tecken delas aldrig, och en halvt mottagen emoji väntar på resten.
Ett omskrivet svar fortsätter från den gemensamma början i stället för att börja om.
Visade tecken går direkt till sidan; React renderar bara några gånger per sekund.

Använd den för

En assistents svar i en chatt.
En bygg- eller driftsättningslogg.
Livetextning.

Props

Prop	Typ	Standard	Beskrivning
`text`	`string`	`—`krävs	Texten hittills. Växande text visas i jämn takt; en omskrivning fortsätter från den gemensamma början.
`speed`	`number`	`90`	Grundtakt för visning i tecken per sekund.
`catchUp`	`number`	`900`	En eftersläpning visas inom ungefär så här många millisekunder genom att takten ökar.
`initial`	`boolean`	`false`	Visa även texten som finns vid mount (annars syns den direkt).
`effect`	`'fade' \| 'none'`	`'fade'`	`fade` tonar in nya tecken; `none` visar dem direkt.
`children`	`(visible: string) => ReactNode`		En funktion som får den taktade texten, till exempel för att rendera Markdown.
`as`	`element`	`'span'`	Elementet som renderas.
`onMotionComplete`	`(text) => void`		Körs varje gång visningen har hunnit ikapp `text`.

Andra props går till det renderade elementet, så className, style och händelsehanterare fungerar som vanligt.

Webb och React Native

På webben tonas nya tecken in (effect="fade") och förs in i vanlig, markerbar text. Ett funktionsbarn får den taktade strängen för Markdown, högst varannan bildruta. I en dold flik visas allt på en gång.

I React Native är texten en riktig Text och visas utan toning.

Används i de här exemplen

ChattsvarFörslag som fälls ihop, ett svar som strömmar i jämn takt och en statusrad som byts.MotionStreamMotionListMotionSwapMotionHeight