MotionStream

Văn bản truyền dần hiện ra với nhịp đều, đuổi kịp khi dữ liệu dồn tới.

WebReact NativeSố và văn bản

Thử ngay

Đang chuẩn bị ví dụ…

JavaScript đang tắt. Đoạn mã bên dưới là ví dụ đầy đủ.

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

Cách dùng ngắn nhất

Answer.jsx

<MotionStream text={answerSoFar} initial />

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

Những gì nó xử lý giúp bạn

Dữ liệu dồn dập trở nên dễ đọc: văn bản hiện ra với tốc độ speed ký tự mỗi giây thay vì từng cục.
Phần tồn đọng làm tăng tốc hiển thị để nó hiện ra trong khoảng catchUp mili giây.
Emoji, cờ và dấu kết hợp không bao giờ bị tách, và emoji mới nhận được một nửa sẽ chờ phần còn lại.
Câu trả lời được viết lại tiếp tục từ phần đầu chung thay vì bắt đầu lại.
Ký tự đã hiện đi thẳng vào trang; React chỉ render vài lần mỗi giây.

Dùng cho

Câu trả lời của trợ lý trong cuộc trò chuyện.
Nhật ký build hoặc triển khai.
Phụ đề trực tiếp.

Props

Prop	Kiểu	Mặc định	Mô tả
`text`	`string`	`—`bắt buộc	Văn bản đến hiện tại. Văn bản dài thêm được hiện ra với nhịp đều; bản viết lại tiếp tục từ phần đầu chung.
`speed`	`number`	`90`	Tốc độ hiển thị cơ bản tính bằng ký tự mỗi giây.
`catchUp`	`number`	`900`	Phần tồn đọng được tăng tốc để hiện ra trong khoảng chừng ấy mili giây.
`initial`	`boolean`	`false`	Hiển thị dần cả văn bản có sẵn khi mount (nếu không, nó hiện ngay).
`effect`	`'fade' \| 'none'`	`'fade'`	`fade` làm ký tự mới hiện dần; `none` hiện chúng ngay.
`children`	`(visible: string) => ReactNode`		Hàm nhận văn bản đã điều nhịp, ví dụ để render Markdown.
`as`	`element`	`'span'`	Phần tử được render.
`onMotionComplete`	`(text) => void`		Chạy mỗi khi phần hiển thị đuổi kịp `text`.

Các props khác được chuyển tới phần tử được render, nên className, style và trình xử lý sự kiện hoạt động như bình thường.

Web và React Native

Trên web, ký tự mới hiện dần (effect="fade") và được gộp vào văn bản thường, chọn được. Child dạng hàm nhận chuỗi đã điều nhịp để dùng cho Markdown, tối đa mỗi hai khung hình một lần. Trong tab bị ẩn, mọi thứ hiện ra ngay.

Trên React Native, văn bản là Text thật và hiện ra không có hiệu ứng mờ.

Được dùng trong các ví dụ này

Câu trả lời trong trò chuyệnGợi ý thu gọn lại, câu trả lời truyền dần với nhịp đều và dòng trạng thái hoán đổi.MotionStreamMotionListMotionSwapMotionHeight