MotionStream

Text în flux afișat într-un ritm constant, care recuperează rafalele.

WebReact NativeNumere și text

Încercați

Se pregătește exemplul…

JavaScript este dezactivat. Codul de mai jos este exemplul complet.

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

Cea mai scurtă utilizare

Answer.jsx

<MotionStream text={answerSoFar} initial />

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

Ce rezolvă în locul dumneavoastră

Rafalele devin lectură: textul apare cu speed caractere pe secundă, nu în bucăți.
O restanță accelerează afișarea, ca să apară în circa catchUp milisecunde.
Emoji-urile, steagurile și semnele combinate nu se despart niciodată, iar un emoji primit pe jumătate așteaptă restul.
Un răspuns rescris continuă de la începutul comun, în loc s-o ia de la capăt.
Caracterele afișate merg direct în pagină; React randează doar de câteva ori pe secundă.

Folosiți-o pentru

Răspunsul unui asistent într-un chat.
Un jurnal de build sau de deploy.
Subtitrări live.

Props

Prop	Tip	Implicit	Descriere
`text`	`string`	`—`obligatoriu	Textul de până acum. Textul care crește apare într-un ritm constant; o rescriere continuă de la începutul comun.
`speed`	`number`	`90`	Rata de bază a afișării, în caractere pe secundă.
`catchUp`	`number`	`900`	O restanță este afișată prin accelerare în circa atâtea milisecunde.
`initial`	`boolean`	`false`	Afișează treptat și textul prezent la montare (altfel apare imediat).
`effect`	`'fade' \| 'none'`	`'fade'`	`fade` face caracterele noi să apară treptat; `none` le arată direct.
`children`	`(visible: string) => ReactNode`		O funcție care primește textul dozat, de exemplu pentru a randa Markdown.
`as`	`element`	`'span'`	Elementul de randat.
`onMotionComplete`	`(text) => void`		Rulează de fiecare dată când afișarea ajunge din urmă `text`.

Celelalte props merg la elementul randat, așa că className, style și handlerele de evenimente funcționează ca de obicei.

Web și React Native

Pe web, caracterele noi apar treptat (effect="fade") și sunt integrate în text simplu, selectabil. Un copil-funcție primește șirul dozat pentru Markdown, cel mult la fiecare al doilea cadru. Într-o filă ascunsă totul apare deodată.

În React Native textul este un Text real și apare fără estompare.

Folosită în aceste exemple

Răspuns în chatSugestii care se pliază, un răspuns transmis într-un ritm constant și o linie de status care se schimbă.MotionStreamMotionListMotionSwapMotionHeight