MotionStream

Srautinis tekstas, rodomas pastoviu tempu, kuris pasiveja pliūpsnius.

ŽiniatinklisReact NativeSkaičiai ir tekstas

Išbandykite

Ruošiamas pavyzdys…

JavaScript išjungtas. Žemiau esantis kodas yra visas pavyzdys.

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

Trumpiausias naudojimas

Answer.jsx

<MotionStream text={answerSoFar} initial />

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

Ką jis sutvarko už jus

Pliūpsniai virsta skaitymu: tekstas rodomas speed simbolių per sekundę greičiu, o ne gabalais.
Atsilikimas pagreitina rodymą, kad tekstas pasirodytų maždaug per catchUp milisekundžių.
Jaustukai, vėliavos ir jungiamieji ženklai niekada neskaidomi, o pusiau gautas jaustukas laukia likusios dalies.
Perrašytas atsakymas tęsiasi nuo bendros pradžios, užuot pradėjęs iš naujo.
Parodyti simboliai keliauja tiesiai į puslapį; React perpiešia tik kelis kartus per sekundę.

Naudokite jį

Asistento atsakymas pokalbyje.
Kūrimo ar diegimo žurnalas.
Gyvi subtitrai.

Props

Prop	Tipas	Numatytoji	Aprašymas
`text`	`string`	`—`privaloma	Iki šiol gautas tekstas. Augantis tekstas rodomas pastoviu tempu; perrašymas tęsiasi nuo bendros pradžios.
`speed`	`number`	`90`	Bazinis rodymo greitis simboliais per sekundę.
`catchUp`	`number`	`900`	Atsilikimas parodomas pagreitinant maždaug per tiek milisekundžių.
`initial`	`boolean`	`false`	Palaipsniui rodyti ir prijungimo metu esantį tekstą (kitaip jis parodomas iškart).
`effect`	`'fade' \| 'none'`	`'fade'`	`fade` palaipsniui išryškina naujus simbolius; `none` juos parodo iškart.
`children`	`(visible: string) => ReactNode`		Funkcija, gaunanti tempu išdėliotą tekstą, pavyzdžiui, Markdown atvaizdavimui.
`as`	`element`	`'span'`	Atvaizduojamas elementas.
`onMotionComplete`	`(text) => void`		Vykdomas kaskart, kai rodymas pasiveja `text`.

Kiti props perduodami atvaizduojamam elementui, todėl className, style ir įvykių apdorojimo funkcijos veikia kaip įprastai.

Žiniatinklis ir React Native

Žiniatinklyje nauji simboliai palaipsniui išryškėja (effect="fade") ir įtraukiami į paprastą, pažymimą tekstą. Funkcija vaikas gauna tempu išdėliotą eilutę Markdown, ne dažniau nei kas antrą kadrą. Paslėptame skirtuke viskas parodoma iškart.

React Native tekstas yra tikras Text ir pasirodo be išryškinimo.

Naudojama šiuose pavyzdžiuose

Pokalbio atsakymasSusilankstantys pasiūlymai, pastoviu tempu srautu ateinantis atsakymas ir besikeičianti būsenos eilutė.MotionStreamMotionListMotionSwapMotionHeight