React · React Native · 16 component

Tương tác khó, đã hoàn thiện.

Animated Chorus là bộ component chuyển động cho những tương tác khó làm đúng bằng tay: số cuộn, văn bản truyền dần, hoán đổi có đổi kích thước, sheet, pager, thao tác vuốt và danh sách chỉ tạo hoạt ảnh cho phần thay đổi. Một thẻ và dữ liệu của bạn. Không provider, không thiết lập.

Bắt đầu Duyệt component

Cài đặt

npm install @kkwaenggwari/animated-chorus

Đo trên bản build này

Chrome, 2026-09-28. Mọi điều kiện và mẫu đo có trong hướng dẫn hiệu năng. Cách đo

28.0KBKB gzip cho cả 16 export
Toàn bộ điểm vào web, đã thu gọn. React là peer duy nhất.
0Callback khung hình JS khi đang hoạt ảnh
Một con số, một chiều cao và một điểm nhấn thay đổi cùng lúc: trình duyệt phát cả 12 hoạt ảnh.
1Commit React cho mỗi lần đổi giá trị
MotionNumber render khi giá trị thay đổi, không bao giờ trong lúc cuộn.
11Commit React cho 3000 ký tự truyền dần
MotionStream nối thẳng ký tự và gộp vào React vài lần mỗi giây.

01Dễ nhất

Một thẻ và dữ liệu của bạn

Mỗi component tự hoạt động: không provider, component bọc hay lời gọi thiết lập. Các bộ sưu tập nhận items và renderItem, còn bố cục, văn bản và kiểu dáng vẫn là của bạn.

Import một component và truyền giá trị. Toàn bộ việc tích hợp chỉ có vậy.
Danh sách, tab và pager đọc mảng của bạn; key mặc định là item.id.
Văn bản vẫn là văn bản thật: xuống dòng, co giãn theo phông chữ và chọn được.

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

Sáu component trực tiếp, và một dòng mã đằng sau mỗi cái.

Đang chuẩn bị ví dụ…

JavaScript đang tắt. Đoạn mã bên dưới là ví dụ đầy đủ.

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

02Nhanh nhất

Trình duyệt phát. React đứng yên.

Trên web không cần tải thư viện hoạt ảnh nào: component giao chuyển động cho Web Animations API, nên một con số đang cuộn hay một bảng đang đổi kích thước không tốn JavaScript mỗi khung hình và không render React khi chuyển động.

0 callback khung hình JS khi 12 hoạt ảnh chạy cùng lúc.
Một commit React cho mỗi lần đổi giá trị, không phải mỗi khung hình.
Văn bản truyền dần: 11 commit React cho 3000 ký tự. Ví dụ bên dưới tự đếm số lần render của nó.

Đang chuẩn bị ví dụ…

JavaScript đang tắt. Đoạn mã bên dưới là ví dụ đầy đủ.

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Ổn định nhất

Ngắt bất cứ thứ gì. Không bao giờ nhảy.

Mỗi giá trị mới bắt đầu từ những gì đang trên màn hình và lò xo giữ nguyên tốc độ, nên những cú nhấp nhanh, dữ liệu dồn dập hay đổi chiều đều trông có chủ đích. Khi chuyển động kết thúc, không còn gì chạy.

Con số không bao giờ bị tách rời: các chữ số còn lại trượt trong lúc cuộn.
200 giá trị mới cách nhau 5 ms: sau đó còn 0 hoạt ảnh và văn bản cuối chính xác.
An toàn với React StrictMode. Trong ứng dụng React Native chạy nền, chuyển động về thẳng trạng thái cuối.

Đang chuẩn bị ví dụ…

JavaScript đang tắt. Đoạn mã bên dưới là ví dụ đầy đủ.

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 component, nhóm theo việc chúng làm

Số và văn bản, nội dung đổi kích thước, lựa chọn, danh sách, cử chỉ, lớp phủ và tiến độ. Mỗi cái có một bàn làm việc trực tiếp với props bên cạnh.

Tất cả component

Kết hợp lại

Màn hình hoàn chỉnh kết hợp nhiều component, mỗi cái có cài đặt nằm ngoài ví dụ.

Tất cả ví dụ

Cùng một import trên web và React Native

Metro chọn bản hiện thực native, còn bundler web chọn bản DOM. Mỗi nền tảng phát chuyển động theo cách tốt nhất của mình.

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

Phần	Web	React Native
Transform và độ mờ	Web Animations API, lò xo được lấy mẫu giải tích	`Animated` với native driver
Chiều rộng và chiều cao	Web Animations API	`Animated` với JS driver, vì đây là bố cục
Văn bản truyền dần	Ký tự được nối và hiện dần; vài lần render React mỗi giây	`Text` thật, hiện ra không có hiệu ứng mờ
Sheet và thu phóng	`dialog` native ở top layer	`Modal` trong suốt; nút quay lại sẽ đóng nó

Bắt đầu trong hai phút

Cài đặt, import một component, truyền giá trị.

npm install @kkwaenggwari/animated-chorus

Tương tác khó, đã hoàn thiện.

Đo trên bản build này

Một thẻ và dữ liệu của bạn

Trình duyệt phát. React đứng yên.

Ngắt bất cứ thứ gì. Không bao giờ nhảy.

16 component, nhóm theo việc chúng làm

Số và văn bản

Nội dung và kích thước

Lựa chọn và phân trang

Danh sách

Cử chỉ

Lớp phủ

Tiến độ

Kết hợp lại

Cùng một import trên web và React Native

Bắt đầu trong hai phút

Tìm kiếm