React · React Native · 16 Komponenten

Schwierige Interaktionen, fertig gebaut.

Animated Chorus ist eine Sammlung von Animationskomponenten für Interaktionen, die von Hand schwer gut hinzubekommen sind: rollende Zahlen, gestreamter Text, Wechsel mit Größenanpassung, Sheets, Pager, Wisch-Aktionen und Listen, die nur das Geänderte animieren. Ein Tag und deine Daten. Kein Provider, kein Setup.

Loslegen Komponenten ansehen

Installieren

npm install @kkwaenggwari/animated-chorus

Gemessen an diesem Build

Chrome, 2026-09-28. Alle Bedingungen und Messungen stehen im Performance-Guide. So wurde gemessen

28.0KBKB gzip für alle 16 Exporte
Der gesamte Web-Einstiegspunkt, minifiziert. React ist die einzige Peer-Abhängigkeit.
0JS-Frame-Callbacks während der Animation
Eine Zahl, eine Höhe und eine Hervorhebung ändern sich gleichzeitig: Der Browser spielt alle 12 Animationen ab.
1React-Commit pro Wertänderung
MotionNumber rendert, wenn sich der Wert ändert, nie während es rollt.
11React-Commits für 3000 gestreamte Zeichen
MotionStream hängt Zeichen direkt an und überführt sie nur ein paar Mal pro Sekunde in React.

01Am einfachsten

Ein Tag und deine Daten

Jede Komponente funktioniert allein: kein Provider, keine Wrapper-Komponente, kein Setup-Aufruf. Sammlungen nehmen items und renderItem, und dein Layout, dein Text und deine Styles bleiben deine.

Eine Komponente importieren und einen Wert übergeben. Das ist die ganze Integration.
Listen, Tabs und Pager lesen dein Array; Keys sind standardmäßig item.id.
Text bleibt echter Text: Er bricht um, skaliert mit der Schrift und lässt sich markieren.

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

Sechs Live-Komponenten und die eine Codezeile hinter jeder.

Beispiel wird vorbereitet…

JavaScript ist aus. Der Code unten ist das vollständige Beispiel.

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

02Am schnellsten

Der Browser spielt ab. React bleibt still.

Im Web muss keine Animationsbibliothek geladen werden: Die Komponenten übergeben ihre Bewegung an die Web Animations API, sodass eine rollende Zahl oder ein Panel, das seine Größe ändert, während der Bewegung kein JavaScript pro Frame und keinen React-Render kostet.

0 JS-Frame-Callbacks, während 12 Animationen gleichzeitig laufen.
Ein React-Commit pro Wertänderung, nicht einer pro Frame.
Gestreamter Text: 11 React-Commits für 3000 Zeichen. Das Beispiel unten zählt seine eigenen Renders.

Beispiel wird vorbereitet…

JavaScript ist aus. Der Code unten ist das vollständige Beispiel.

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

03Am stabilsten

Unterbrich alles. Nichts springt.

Jeder neue Wert startet bei dem, was auf dem Bildschirm ist, und Federn behalten ihr Tempo – schnelle Klicks, Datenschübe und Richtungswechsel wirken gewollt. Wenn die Bewegung endet, läuft nichts mehr weiter.

Zahlen brechen nie auseinander: Verbleibende Stellen gleiten, während sie rollen.
200 neue Werte im Abstand von 5 ms: danach 0 verbleibende Animationen und der exakte Endtext.
Sicher unter React StrictMode. In einer React-Native-App im Hintergrund kommt die Bewegung in ihrem Endzustand zur Ruhe.

Beispiel wird vorbereitet…

JavaScript ist aus. Der Code unten ist das vollständige Beispiel.

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 Komponenten, nach Aufgabe gruppiert

Zahlen und Text, Inhalt mit wechselnder Größe, Auswahl, Listen, Gesten, Overlays und Fortschritt. Jede hat eine Live-Werkbank mit ihren props daneben.

Alle Komponenten

Zusammengesetzt

Komplette Bildschirme aus mehreren Komponenten, jeweils mit den Einstellungen außerhalb des Beispiels.

Alle Beispiele

Derselbe Import im Web und unter React Native

Metro wählt die native Implementierung, Web-Bundler die DOM-Implementierung. Jede Plattform spielt Bewegung so ab, wie sie es am besten kann.

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

Bereich	Web	React Native
Transforms und Deckkraft	Web Animations API, Federn analytisch abgetastet	`Animated` mit dem nativen Treiber
Breite und Höhe	Web Animations API	`Animated` mit dem JS-Treiber, weil es Layout ist
Gestreamter Text	Zeichen angehängt und eingeblendet; ein paar React-Renders pro Sekunde	Ein echtes `Text`, ohne Einblendung angezeigt
Sheets und Zoom	Ein natives `dialog` im Top Layer	Ein transparentes `Modal`; die Zurück-Taste schließt es

In zwei Minuten loslegen

Installieren, eine Komponente importieren, einen Wert übergeben.

npm install @kkwaenggwari/animated-chorus

Schwierige Interaktionen, fertig gebaut.

Gemessen an diesem Build

Ein Tag und deine Daten

Der Browser spielt ab. React bleibt still.

Unterbrich alles. Nichts springt.

16 Komponenten, nach Aufgabe gruppiert

Zahlen und Text

Inhalt und Größe

Auswahl und Blättern

Listen

Gesten

Overlays

Fortschritt

Zusammengesetzt

Derselbe Import im Web und unter React Native

In zwei Minuten loslegen

Suchen