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 מרנדר רק כמה פעמים בשנייה.

מתאים ל־

תשובה של עוזר בצ׳אט.
לוג של build או deploy.
כתוביות חיות.

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