MotionStream

Patlamalara yetişen, sabit bir hızla gösterilen akan metin.

WebReact NativeSayılar ve metin

Deneyin

Örnek hazırlanıyor…

JavaScript kapalı. Aşağıdaki kod örneğin tamamıdır.

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

En kısa kullanım

Answer.jsx

<MotionStream text={answerSoFar} initial />

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

Sizin yerinize hallettikleri

Patlamalar okunabilir hâle gelir: metin parçalar hâlinde değil, saniyede speed karakterle gösterilir.
Birikme, gösterimi hızlandırır; böylece yaklaşık catchUp milisaniye içinde gösterilir.
Emojiler, bayraklar ve birleşik işaretler asla bölünmez; yarısı alınmış bir emoji kalanını bekler.
Yeniden yazılan bir yanıt baştan başlamak yerine ortak başlangıçtan devam eder.
Gösterilen karakterler doğrudan sayfaya gider; React saniyede yalnızca birkaç kez render eder.

Şunlar için kullanın

Sohbette bir asistanın yanıtı.
Bir derleme ya da dağıtım günlüğü.
Canlı altyazılar.

Props

Prop	Tip	Varsayılan	Açıklama
`text`	`string`	`—`zorunlu	Şimdiye kadarki metin. Büyüyen metin sabit hızla gösterilir; yeniden yazım ortak başlangıçtan devam eder.
`speed`	`number`	`90`	Saniyedeki karakter cinsinden temel gösterim hızı.
`catchUp`	`number`	`900`	Birikme, hızlanarak yaklaşık bu kadar milisaniyede gösterilir.
`initial`	`boolean`	`false`	Bağlanırken var olan metni de kademeli göster (aksi hâlde hemen görünür).
`effect`	`'fade' \| 'none'`	`'fade'`	`fade` yeni karakterleri belirterek getirir; `none` doğrudan gösterir.
`children`	`(visible: string) => ReactNode`		Hızı ayarlanmış metni alan bir fonksiyon; örneğin Markdown render etmek için.
`as`	`element`	`'span'`	Render edilecek öğe.
`onMotionComplete`	`(text) => void`		Gösterim `text`'e her yetiştiğinde çalışır.

Diğer props render edilen öğeye gider; böylece className, style ve olay işleyiciler her zamanki gibi çalışır.

Web ve React Native

Web'de yeni karakterler belirerek gelir (effect="fade") ve sade, seçilebilir metne katılır. Fonksiyon olan bir çocuk, Markdown için hızı ayarlanmış dizeyi en fazla iki karede bir alır. Gizli bir sekmede her şey bir anda görünür.

React Native'de metin gerçek bir Text'tir ve solma olmadan belirir.

Bu örneklerde kullanıldı

Sohbet yanıtıKatlanan öneriler, sabit hızla akan bir yanıt ve değişen bir durum satırı.MotionStreamMotionListMotionSwapMotionHeight