MotionStream

نص متدفق يُكشف بإيقاع ثابت يلحق بالدفعات.

الويبReact Nativeالأرقام والنصوص

جرّبه

جارٍ تجهيز المثال…

JavaScript معطّل. الشيفرة أدناه هي المثال الكامل.

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

أقصر استخدام

Answer.jsx

<MotionStream text={answerSoFar} initial />

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

ما يتولّاه عنك

تتحوّل الدفعات إلى قراءة: يُكشف النص بسرعة speed حرفًا في الثانية بدل كتل.
النص المتراكم يسرّع الكشف ليظهر خلال نحو catchUp مللي ثانية.
لا تُقسم الرموز التعبيرية والأعلام وعلامات التركيب أبدًا، والرمز التعبيري المستلَم نصفه ينتظر الباقي.
الإجابة المعاد كتابتها تكمل من البداية المشتركة بدل أن تبدأ من جديد.
تذهب الأحرف المكشوفة مباشرة إلى الصفحة؛ ولا يعرض React إلا بضع مرات في الثانية.

استخدمه لـ

إجابة مساعد في محادثة.
سجل بناء أو نشر.
ترجمة مباشرة.

Props

Prop	النوع	الافتراضي	الوصف
`text`	`string`	`—`إلزامي	النص حتى الآن. يُكشف النص المتنامي بإيقاع ثابت؛ وإعادة الكتابة تكمل من البداية المشتركة.
`speed`	`number`	`90`	معدّل الكشف الأساسي بالأحرف في الثانية.
`catchUp`	`number`	`900`	يُكشف النص المتراكم خلال نحو هذا العدد من المللي ثواني بالتسريع.
`initial`	`boolean`	`false`	اكشف أيضًا النص الموجود عند التركيب (وإلا يظهر دفعة واحدة).
`effect`	`'fade' \| 'none'`	`'fade'`	يُظهر `fade` الأحرف الجديدة بالتدريج؛ ويعرضها `none` مباشرة.
`children`	`(visible: string) => ReactNode`		دالة تتلقى النص بالإيقاع المضبوط، مثلًا لعرض Markdown.
`as`	`element`	`'span'`	العنصر المراد عرضه.
`onMotionComplete`	`(text) => void`		يعمل كلما لحق الكشف بـ `text`.

تذهب props الأخرى إلى العنصر المعروض، فتعمل className وstyle ومعالجات الأحداث كالمعتاد.

الويب وReact Native

على الويب تظهر الأحرف الجديدة بالتدريج (effect="fade") وتُدمج في نص عادي قابل للتحديد. والابن الذي هو دالة يتلقى النص بالإيقاع المضبوط لعرض Markdown، مرة كل إطارين على الأكثر. وفي علامة تبويب مخفية يظهر كل شيء دفعة واحدة.

في React Native النص Text حقيقي ويظهر من دون تلاشٍ.

مستخدم في هذه الأمثلة

إجابة المحادثةاقتراحات تنطوي، وإجابة تتدفق بإيقاع ثابت، وسطر حالة يتبدّل.MotionStreamMotionListMotionSwapMotionHeight