MotionStream

Tasaisella tahdilla näytettävä virtaava teksti, joka saa purskeet kiinni.

WebReact NativeNumerot ja teksti

Kokeile

Valmistellaan esimerkkiä…

JavaScript on pois päältä. Alla oleva koodi on koko esimerkki.

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

Lyhin käyttö

Answer.jsx

<MotionStream text={answerSoFar} initial />

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

Mitä se hoitaa puolestasi

Purskeista tulee luettavaa: teksti näytetään speed merkin sekuntivauhdilla palasten sijaan.
Jäljessä oleminen nopeuttaa näyttämistä, jotta teksti näkyy noin catchUp millisekunnissa.
Emojit, liput ja yhdistävät merkit eivät koskaan hajoa, ja puoliksi saapunut emoji odottaa loppuosaa.
Uudelleen kirjoitettu vastaus jatkaa yhteisestä alusta sen sijaan, että aloittaisi alusta.
Näytetyt merkit menevät suoraan sivulle; React renderöi vain muutaman kerran sekunnissa.

Käytä sitä

Avustajan vastaus keskustelussa.
Koonti- tai julkaisuloki.
Live-tekstitykset.

Props

Prop	Tyyppi	Oletus	Kuvaus
`text`	`string`	`—`pakollinen	Teksti tähän mennessä. Kasvava teksti näytetään tasaisella tahdilla; uudelleenkirjoitus jatkaa yhteisestä alusta.
`speed`	`number`	`90`	Perusnäyttönopeus merkkeinä sekunnissa.
`catchUp`	`number`	`900`	Jäljessä oleva osa näytetään nopeuttamalla noin näin monessa millisekunnissa.
`initial`	`boolean`	`false`	Näytä asteittain myös kiinnityshetkellä olemassa oleva teksti (muuten se näkyy heti).
`effect`	`'fade' \| 'none'`	`'fade'`	`fade` häivyttää uudet merkit esiin; `none` näyttää ne suoraan.
`children`	`(visible: string) => ReactNode`		Funktio, joka saa tahdistetun tekstin, esimerkiksi Markdownin renderöimiseen.
`as`	`element`	`'span'`	Renderöitävä elementti.
`onMotionComplete`	`(text) => void`		Suoritetaan aina, kun näyttäminen saavuttaa `text`-arvon.

Muut props-arvot menevät renderöidylle elementille, joten className, style ja tapahtumankäsittelijät toimivat tavalliseen tapaan.

Web ja React Native

Webissä uudet merkit häivytetään esiin (effect="fade") ja yhdistetään tavalliseksi, valittavaksi tekstiksi. Funktiolapsi saa tahdistetun merkkijonon Markdownia varten enintään joka toisessa ruudussa. Piilotetulla välilehdellä kaikki näytetään kerralla.

React Nativessa teksti on oikea Text ja ilmestyy ilman häivytystä.

Käytetty näissä esimerkeissä

KeskusteluvastausEhdotukset, jotka taittuvat pois, tasaisella tahdilla virtaava vastaus ja vaihtuva tilarivi.MotionStreamMotionListMotionSwapMotionHeight