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는 1초에 몇 번만 렌더합니다.

이럴 때 쓰세요

채팅 도우미의 답변.
빌드나 배포 로그.
실시간 자막.

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