React · React Native · 16 bileşen

Zor etkileşimler, hazır.

Animated Chorus, elle doğru yapması zor etkileşimler için bir hareket bileşenleri setidir: dönen sayılar, akan metin, boyut değiştiren geçişler, sheet'ler, sayfa çeviriciler, kaydırma eylemleri ve yalnızca değişeni canlandıran listeler. Tek etiket ve verileriniz. Provider yok, kurulum yok.

Başlayın Bileşenlere göz atın

Kurulum

npm install @kkwaenggwari/animated-chorus

Bu sürümde ölçüldü

Chrome, 2026-09-28. Tüm koşullar ve örnekler performans kılavuzunda. Nasıl ölçüldü

28.0KB16 export'un tamamı için KB gzip
Web giriş noktasının tamamı, küçültülmüş. Tek peer React.
0Animasyon sırasında JS kare callback'leri
Bir sayı, bir yükseklik ve bir vurgu birlikte değişir: tarayıcı 12 animasyonun hepsini oynatır.
1Değer değişikliği başına React commit'i
MotionNumber değer değiştiğinde render edilir, dönerken asla.
11Akan 3000 karakter için React commit'leri
MotionStream karakterleri doğrudan ekler ve saniyede birkaç kez React'e katar.

01En kolay

Tek etiket ve verileriniz

Her bileşen kendi başına çalışır: provider, sarmalayıcı bileşen ya da kurulum çağrısı yok. Koleksiyonlar items ve renderItem alır; düzeniniz, metniniz ve stilleriniz size ait kalır.

Tek bir bileşen import edin ve bir değer verin. Tüm entegrasyon bu kadar.
Listeler, sekmeler ve sayfa çeviriciler dizinizi okur; key varsayılan olarak item.id'dir.
Metin gerçek metin olarak kalır: satır kaydırır, yazı tipiyle ölçeklenir ve seçilebilir.

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

Altı canlı bileşen ve her birinin arkasındaki tek satır kod.

Örnek hazırlanıyor…

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

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

02En hızlı

Tarayıcı oynatır. React kıpırdamaz.

Web'de yüklenecek bir animasyon kütüphanesi yok: bileşenler hareketlerini Web Animations API'ye devreder; dönen bir sayı ya da boyutu değişen bir panel hareket ederken kare başına JavaScript ve React render'ı harcamaz.

12 animasyon birlikte çalışırken 0 JS kare callback'i.
Değer değişikliği başına bir React commit'i, kare başına değil.
Akan metin: 3000 karakter için 11 React commit'i. Aşağıdaki örnek kendi render'larını sayar.

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

03En kararlı

Her şeyi kesin. Asla sıçramaz.

Her yeni değer ekranda olandan başlar ve yaylar hızlarını korur; hızlı tıklamalar, veri patlamaları ve yön değişiklikleri kasıtlı görünür. Hareket bitince hiçbir şey çalışır hâlde kalmaz.

Sayılar asla bölünmez: kalan basamaklar dönerken kayar.
5 ms arayla 200 yeni değer: ardından 0 animasyon kalır ve son metin tam doğrudur.
React StrictMode altında güvenli. Arka plandaki bir React Native uygulamasında hareket bitiş durumuna yerleşir.

Örnek hazırlanıyor…

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

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

Yaptıkları işe göre gruplanmış 16 bileşen

Sayılar ve metin, boyutu değişen içerik, seçim, listeler, hareketler, katmanlar ve ilerleme. Her birinin yanında props'uyla canlı bir çalışma tezgâhı var.

Tüm bileşenler

Bir araya getirildi

Birkaç bileşeni birleştiren eksiksiz ekranlar; her birinin ayarları örneğin dışında.

Tüm örnekler

Web'de ve React Native'de aynı import

Metro native uygulamayı, web paketleyicileri ise DOM olanı seçer. Her platform hareketi en iyi oynattığı şekilde oynatır.

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

Kısım	Web	React Native
Transform'lar ve opaklık	Web Animations API, yaylar analitik örneklenir	Native driver ile `Animated`
Genişlik ve yükseklik	Web Animations API	JS driver ile `Animated`, çünkü bu bir düzen
Akan metin	Karakterler eklenir ve belirir; saniyede birkaç React render'ı	Gerçek bir `Text`, solma olmadan gösterilir
Sheet'ler ve yakınlaştırma	Üst katmanda native bir `dialog`	Şeffaf bir `Modal`; geri düğmesi onu kapatır

İki dakikada başlayın

Kurun, tek bileşen import edin, bir değer verin.

npm install @kkwaenggwari/animated-chorus

Zor etkileşimler, hazır.

Bu sürümde ölçüldü

Tek etiket ve verileriniz

Tarayıcı oynatır. React kıpırdamaz.

Her şeyi kesin. Asla sıçramaz.

Yaptıkları işe göre gruplanmış 16 bileşen

Sayılar ve metin

İçerik ve boyut

Seçim ve sayfalama

Listeler

Hareketler

Katmanlar

İlerleme

Bir araya getirildi

Web'de ve React Native'de aynı import

İki dakikada başlayın

Ara