MotionStream

Teks mengalir yang ditampilkan dengan tempo stabil dan menyusul saat ada lonjakan.

WebReact NativeAngka dan teks

Coba

Menyiapkan contoh…

JavaScript nonaktif. Kode di bawah adalah contoh lengkapnya.

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

Penggunaan terpendek

Answer.jsx

<MotionStream text={answerSoFar} initial />

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

Yang ditanganinya untuk Anda

Lonjakan menjadi bacaan: teks ditampilkan speed karakter per detik, bukan per potongan.
Tumpukan antrean mempercepat tampilan agar terlihat dalam sekitar catchUp milidetik.
Emoji, bendera, dan tanda gabung tidak pernah terpecah, dan emoji yang baru diterima separuh menunggu sisanya.
Jawaban yang ditulis ulang melanjutkan dari awal yang sama, bukan mulai dari nol.
Karakter yang ditampilkan langsung masuk ke halaman; React hanya merender beberapa kali per detik.

Gunakan untuk

Jawaban asisten dalam obrolan.
Log build atau deploy.
Teks terjemahan langsung.

Props

Prop	Tipe	Bawaan	Deskripsi
`text`	`string`	`—`wajib	Teks sejauh ini. Teks yang bertambah ditampilkan dengan tempo stabil; teks yang ditulis ulang melanjutkan dari awal yang sama.
`speed`	`number`	`90`	Laju tampilan dasar dalam karakter per detik.
`catchUp`	`number`	`900`	Tumpukan antrean ditampilkan dalam sekitar sekian milidetik dengan mempercepat.
`initial`	`boolean`	`false`	Tampilkan perlahan juga teks yang ada saat mount (jika tidak, langsung tampil).
`effect`	`'fade' \| 'none'`	`'fade'`	`fade` memunculkan karakter baru perlahan; `none` menampilkannya langsung.
`children`	`(visible: string) => ReactNode`		Fungsi yang menerima teks bertempo, misalnya untuk merender Markdown.
`as`	`element`	`'span'`	Elemen yang dirender.
`onMotionComplete`	`(text) => void`		Berjalan setiap kali tampilan menyusul `text`.

Semua props lain diteruskan ke elemen yang dirender, jadi className, style, dan event handler bekerja seperti biasa.

Web dan React Native

Di web, karakter baru muncul perlahan (effect="fade") dan dilebur ke teks biasa yang bisa dipilih. Child berupa fungsi menerima string bertempo untuk Markdown, paling sering setiap dua frame. Di tab tersembunyi semuanya tampil sekaligus.

Di React Native, teksnya adalah Text sungguhan dan muncul tanpa efek pudar.

Dipakai di contoh-contoh ini

Jawaban obrolanSaran yang terlipat, jawaban yang mengalir dengan tempo stabil, dan baris status yang bertukar.MotionStreamMotionListMotionSwapMotionHeight