React · React Native · 16 komponen

Interaksi sulit, sudah jadi.

Animated Chorus adalah kumpulan komponen gerak untuk interaksi yang sulit dibuat benar secara manual: angka yang bergulir, teks yang mengalir, pertukaran yang mengubah ukuran, sheet, pager, aksi geser, dan daftar yang hanya menganimasikan yang berubah. Satu tag dan data Anda. Tanpa provider, tanpa penyiapan.

Mulai Telusuri komponen

Instal

npm install @kkwaenggwari/animated-chorus

Diukur pada build ini

Chrome, 2026-09-28. Semua kondisi dan sampel ada di panduan performa. Cara mengukurnya

28.0KBKB gzip untuk semua 16 ekspor
Seluruh entri web, diminifikasi. React satu-satunya peer.
0Callback frame JS saat beranimasi
Sebuah angka, tinggi, dan sorotan berubah bersamaan: browser memutar semua 12 animasi.
1Commit React per perubahan nilai
MotionNumber dirender saat nilainya berubah, tidak pernah saat bergulir.
11Commit React untuk 3000 karakter yang mengalir
MotionStream menambahkan karakter secara langsung dan memasukkannya ke React beberapa kali per detik.

01Paling mudah

Satu tag dan data Anda

Setiap komponen bekerja sendiri: tanpa provider, komponen pembungkus, atau panggilan penyiapan. Koleksi menerima items dan renderItem, dan tata letak, teks, serta gaya Anda tetap milik Anda.

Impor satu komponen dan berikan nilai. Itu seluruh integrasinya.
Daftar, tab, dan pager membaca array Anda; key bawaannya item.id.
Teks tetap teks sungguhan: bisa membungkus baris, mengikuti ukuran font, dan bisa dipilih.

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

Enam komponen langsung, dan satu baris kode di balik masing-masing.

Menyiapkan contoh…

JavaScript nonaktif. Kode di bawah adalah contoh lengkapnya.

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

02Paling cepat

Browser yang memutar. React tetap diam.

Di web tidak ada pustaka animasi yang perlu dimuat: komponen menyerahkan geraknya ke Web Animations API, jadi angka yang bergulir atau panel yang berubah ukuran tidak memakan JavaScript per frame maupun render React saat bergerak.

0 callback frame JS saat 12 animasi berjalan bersamaan.
Satu commit React per perubahan nilai, bukan satu per frame.
Teks mengalir: 11 commit React untuk 3000 karakter. Contoh di bawah menghitung render-nya sendiri.

Menyiapkan contoh…

JavaScript nonaktif. Kode di bawah adalah contoh lengkapnya.

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

03Paling stabil

Interupsi apa saja. Tak pernah melompat.

Setiap nilai baru dimulai dari yang ada di layar dan pegas mempertahankan kecepatannya, sehingga klik cepat, lonjakan data, dan pembalikan arah tampak disengaja. Saat gerak selesai, tidak ada yang tersisa berjalan.

Angka tak pernah terpecah: digit yang tersisa bergeser sambil bergulir.
200 nilai baru berjarak 5 ms: setelahnya tersisa 0 animasi dan teks akhir yang tepat.
Aman di React StrictMode. Di aplikasi React Native yang berjalan di latar belakang, gerak langsung ke keadaan akhirnya.

Menyiapkan contoh…

JavaScript nonaktif. Kode di bawah adalah contoh lengkapnya.

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 komponen, dikelompokkan menurut tugasnya

Angka dan teks, konten yang berubah ukuran, pilihan, daftar, gestur, overlay, dan progres. Masing-masing punya meja kerja langsung dengan props di sampingnya.

Semua komponen

Dirangkai bersama

Layar lengkap yang menggabungkan beberapa komponen, masing-masing dengan pengaturan di luar contoh.

Semua contoh

Impor yang sama di web dan React Native

Metro memilih implementasi native dan bundler web memilih yang DOM. Setiap platform memutar gerak dengan cara terbaiknya.

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

Bagian	Web	React Native
Transform dan opasitas	Web Animations API, pegas disampel secara analitis	`Animated` dengan driver native
Lebar dan tinggi	Web Animations API	`Animated` dengan driver JS, karena ini tata letak
Teks mengalir	Karakter ditambahkan dan muncul perlahan; beberapa render React per detik	`Text` sungguhan, tampil tanpa efek pudar
Sheet dan zoom	`dialog` native di top layer	`Modal` transparan; tombol kembali menutupnya

Mulai dalam dua menit

Instal, impor satu komponen, berikan nilai.

npm install @kkwaenggwari/animated-chorus

Interaksi sulit, sudah jadi.

Diukur pada build ini

Satu tag dan data Anda

Browser yang memutar. React tetap diam.

Interupsi apa saja. Tak pernah melompat.

16 komponen, dikelompokkan menurut tugasnya

Angka dan teks

Konten dan ukuran

Pilihan dan halaman

Daftar

Gestur

Overlay

Progres

Dirangkai bersama

Impor yang sama di web dan React Native

Mulai dalam dua menit

Cari