React · React Native · 컴포넌트 16개

어려운 인터랙션, 이미 끝내 두었습니다.

Animated Chorus는 손으로 제대로 만들기 어려운 인터랙션을 위한 모션 컴포넌트입니다. 굴러가는 숫자, 일정한 속도의 스트리밍 글, 크기가 따라가는 내용 교체, 시트, 페이저, 스와이프 동작, 바뀐 항목만 움직이는 목록까지. 태그 하나와 내 데이터면 됩니다. Provider도 설정도 없습니다.

시작하기 컴포넌트 보기

설치

npm install @kkwaenggwari/animated-chorus

이번 빌드에서 측정한 값

Chrome, 2026-09-28. 모든 조건과 표본은 성능 가이드에 있습니다. 측정 방법 보기

28.0KBKB gzip · 16개 내보내기 전체
웹 진입점 전체를 압축한 크기입니다. 피어 의존성은 React뿐입니다.
0애니메이션 중 JS 프레임 콜백
숫자·높이·하이라이트가 함께 바뀌는 동안 12개 애니메이션을 모두 브라우저가 재생합니다.
1값이 바뀔 때마다 React 커밋
MotionNumber는 값이 바뀔 때 렌더하고, 굴러가는 동안에는 렌더하지 않습니다.
113000자 스트리밍 동안 React 커밋
MotionStream은 글자를 직접 붙이고 1초에 몇 번만 React에 반영합니다.

01가장 편함

태그 하나와 내 데이터

모든 컴포넌트는 혼자서 동작합니다. Provider, 감싸는 컴포넌트, 설정 호출이 없습니다. 목록형 컴포넌트는 items와 renderItem을 받고, 레이아웃·글자·스타일은 그대로 내 것입니다.

컴포넌트 하나를 가져와 값을 넘기면 연동이 끝납니다.
목록·탭·페이저는 내 배열을 읽고, 키는 기본으로 item.id를 씁니다.
글자는 진짜 글자로 남습니다. 줄바꿈되고, 글꼴 확대를 따르고, 선택할 수 있습니다.

```
<MotionNumber value={total} />;
```

<MotionSwap value={status}>{label}</MotionSwap>;

<MotionHeight open={open}>{details}</MotionHeight>;

<MotionHighlight items={tabs} value={tab} onValueChange={setTab} />;

<MotionList items={tasks} renderItem={(task) => task.title} />;

```
<ProgressRing value={progress} />;
```

실제로 움직이는 컴포넌트 6개와, 각각을 만드는 코드 한 줄.

예제를 준비하는 중…

JavaScript가 꺼져 있습니다. 아래 코드가 예제 전체입니다.

App.jsx

import { useState } from 'react';
import {
  MotionHighlight,
  MotionNumber,
  MotionSwap,
  motionTokens,
} from '@kkwaenggwari/animated-chorus';
import './styles.css';

const plans = [
  { id: 'starter', label: 'Starter', price: 0, points: ['1 project', 'Community support'] },
  {
    id: 'team',
    label: 'Team',
    price: 24,
    points: ['10 projects', 'Shared workspaces', 'Priority support'],
  },
  {
    id: 'scale',
    label: 'Scale',
    price: 196,
    points: ['Unlimited projects', 'Single sign-on', 'Audit log', 'Dedicated support'],
  },
];

export default function App({ hover = true, effect = 'up', spring = 'default' }) {
  const [plan, setPlan] = useState('team');
  const current = plans.find((item) => item.id === plan);
  // "default" is not a preset: undefined keeps the component's own motion.
  const transition = motionTokens.spring[spring];

  return (
    <div className="card">
      <MotionHighlight
        items={plans}
        value={plan}
        onValueChange={setPlan}
        hover={hover}
        transition={transition}
        className="tabs"
        itemClassName="tab"
        highlightClassName="tab-highlight"
        renderItem={(item, { selected }) => (
          <span className={selected ? 'tab-label on' : 'tab-label'}>{item.label}</span>
        )}
      />
      <p className="price">
        <MotionNumber value={current.price} prefix="$" transition={transition} />
        <span className="per">per month</span>
      </p>
      <MotionSwap as="div" inline={false} value={plan} effect={effect} transition={transition}>
        <ul className="points">
          {current.points.map((point) => (
            <li key={point}>{point}</li>
          ))}
        </ul>
      </MotionSwap>
    </div>
  );
}

styles.css

.card {
  display: grid;
  gap: 18px;
  max-width: 420px;
  margin: 24px auto;
  padding: 22px;
  border: 1px solid #cfe8dc;
  border-radius: 18px;
  background: #fff;
}

.tabs {
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: #eaf6f0;
}

.tab {
  flex: 1;
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: none;
  font:
    650 15px system-ui,
    sans-serif;
  color: #0e2e24;
  cursor: pointer;
}

.tab-highlight {
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px #cfe8dc;
}

.tab-label {
  color: #5b616b;
  transition: color 0.2s;
}

.tab-label.on {
  color: #176b52;
}

.price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font:
    800 44px/1 system-ui,
    sans-serif;
  font-variant-numeric: tabular-nums;
  color: #0e2e24;
}

.price .per {
  font-size: 15px;
  font-weight: 500;
  color: #5b616b;
}

.points {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.points li {
  padding: 12px 14px;
  border-radius: 12px;
  background: #f4faf7;
  color: #16181d;
}

02가장 빠름

재생은 브라우저가, React는 가만히

웹에서는 애니메이션 라이브러리를 싣지 않습니다. 컴포넌트가 모션을 Web Animations API에 넘기므로, 숫자가 구르거나 패널 크기가 바뀌는 동안 프레임마다 JavaScript를 돌리지 않고 React도 렌더하지 않습니다.

애니메이션 12개가 함께 도는 동안 JS 프레임 콜백 0회.
React 커밋은 프레임마다가 아니라 값이 바뀔 때 한 번.
스트리밍 글 3000자에 React 커밋 11회. 아래 예제가 자신의 렌더 횟수를 직접 셉니다.

예제를 준비하는 중…

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

03가장 안정적

언제 끊어도 튀지 않습니다

새 값은 항상 화면에 보이는 모습에서 출발하고, 스프링은 속도를 이어받습니다. 연타, 몰려오는 데이터, 방향 전환도 의도한 움직임처럼 보입니다. 움직임이 끝나면 남아 도는 것이 없습니다.

숫자가 갈라지지 않습니다. 남는 자리는 구르면서 제자리로 미끄러집니다.
5ms 간격으로 새 값 200개를 넣은 뒤 남은 애니메이션 0개, 최종 글자는 정확히 일치.
React StrictMode에서도 안전합니다. 백그라운드로 간 React Native 앱에서는 모션이 끝 상태로 정리됩니다.

예제를 준비하는 중…

JavaScript가 꺼져 있습니다. 아래 코드가 예제 전체입니다.

App.jsx

import { useEffect, useState } from 'react';
import { MotionNumber, motionTokens } from '@kkwaenggwari/animated-chorus';
import './styles.css';

const burst = [12, 37, 85, 140, 9, 260, 48, 530, 21, 1100, 75, 2300];

export default function App({ mode = 'roll', direction = 'auto', spring = 'default' }) {
  const [value, setValue] = useState(1280);
  const [changes, setChanges] = useState(0);
  const [bursting, setBursting] = useState(false);

  const change = (next) => {
    setValue(next);
    setChanges((count) => count + 1);
  };

  // Twelve rising values, 90 ms apart, like a live counter: each arrives mid-motion.
  useEffect(() => {
    if (!bursting) return;
    let step = 0;
    const timer = setInterval(() => {
      const delta = burst[step];
      setValue((current) => Math.max(0, current + delta));
      setChanges((count) => count + 1);
      step += 1;
      if (step === burst.length) {
        clearInterval(timer);
        setBursting(false);
      }
    }, 90);
    return () => clearInterval(timer);
  }, [bursting]);

  return (
    <div className="counter">
      <MotionNumber
        className="value"
        value={value}
        intl
        locale="en-US"
        mode={mode}
        direction={direction}
        transition={motionTokens.spring[spring]}
      />
      <p className="changes">{changes} changes, no jumps</p>
      <div className="buttons">
        <button onClick={() => change(Math.max(0, value - 100))}>−100</button>
        <button onClick={() => change(value + 1)}>+1</button>
        <button onClick={() => change(value + 250)}>+250</button>
        <button onClick={() => change(value * 10)}>×10</button>
        <button onClick={() => change(Math.round(value / 10))}>÷10</button>
        <button className="burst" onClick={() => setBursting(true)} disabled={bursting}>
          Burst ×12
        </button>
      </div>
    </div>
  );
}

styles.css

.counter {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 36px 20px 28px;
}

.value {
  font:
    800 clamp(48px, 12vw, 88px)/1.05 system-ui,
    sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: #0e2e24;
}

.changes {
  margin: 0;
  color: #5b616b;
  font-size: 14px;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.buttons button {
  min-width: 64px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #fff;
  font:
    650 15px system-ui,
    sans-serif;
  color: #0e2e24;
  cursor: pointer;
}

.buttons button:hover {
  border-color: #176b52;
}

.buttons .burst {
  border-color: #176b52;
  background: #176b52;
  color: #fff;
}

.buttons .burst:disabled {
  opacity: 0.5;
}

하는 일로 묶은 컴포넌트 16개

숫자와 글, 크기가 바뀌는 내용, 선택, 목록, 제스처, 겹침 화면, 진행. 모두 옆에 props를 조절하는 실행 작업대가 있습니다.

모든 컴포넌트

함께 쓰면

여러 컴포넌트를 조합한 완성 화면입니다. 설정은 모두 예제 바깥에 있습니다.

모든 예제

웹과 React Native, 같은 import

Metro는 네이티브 구현을, 웹 번들러는 DOM 구현을 고릅니다. 각 플랫폼은 가장 잘하는 방식으로 모션을 재생합니다.

App.jsx

// Web and React Native: the same import.
import { MotionNumber, MotionList } from '@kkwaenggwari/animated-chorus';

export function Score({ points, players }) {
  return (
    <>
      <MotionNumber value={points} />
      <MotionList items={players} renderItem={(player) => player.name} />
    </>
  );
}

부분	웹	React Native
이동·크기 변형과 투명도	Web Animations API, 스프링은 해석적으로 샘플링	네이티브 드라이버를 쓰는 `Animated`
너비와 높이	Web Animations API	레이아웃이므로 JS 드라이버를 쓰는 `Animated`
스트리밍 글	글자를 붙이며 페이드인, React 렌더는 1초에 몇 번	진짜 `Text`, 페이드 없이 공개
시트와 확대	최상위 레이어의 네이티브 `dialog`	투명한 `Modal`, 뒤로 가기 버튼으로 닫힘

2분이면 시작합니다

설치하고, 컴포넌트 하나를 가져와, 값을 넘기세요.

npm install @kkwaenggwari/animated-chorus

어려운 인터랙션, 이미 끝내 두었습니다.

이번 빌드에서 측정한 값

태그 하나와 내 데이터

재생은 브라우저가, React는 가만히

언제 끊어도 튀지 않습니다

하는 일로 묶은 컴포넌트 16개

숫자와 글

내용과 크기

선택과 넘기기

목록

제스처

겹침 화면

진행

함께 쓰면

웹과 React Native, 같은 import

2분이면 시작합니다

검색