React · React Native · 16 composants

Les interactions difficiles, déjà terminées.

Animated Chorus est un ensemble de composants d’animation pour les interactions difficiles à réussir à la main : chiffres qui défilent, texte en streaming, changements qui redimensionnent, panneaux, pagineurs, actions au balayage et listes qui n’animent que ce qui a changé. Une balise et vos données. Ni provider ni configuration.

Bien démarrer Parcourir les composants

Installer

npm install @kkwaenggwari/animated-chorus

Mesuré sur ce build

Chrome, 2026-09-28. Toutes les conditions et tous les échantillons figurent dans le guide de performance. Méthode de mesure

28.0KBKB gzip pour les 16 exports
Tout le point d’entrée web, minifié. React est la seule dépendance peer.
0Callbacks d’image JS pendant l’animation
Un nombre, une hauteur et un surlignage qui changent ensemble : le navigateur joue les 12 animations.
1Commit React par changement de valeur
MotionNumber se rend quand la valeur change, jamais pendant qu’elle défile.
11Commits React pour 3000 caractères en streaming
MotionStream ajoute les caractères directement et ne les intègre à React que quelques fois par seconde.

01Le plus simple

Une balise et vos données

Chaque composant fonctionne seul : ni provider, ni composant englobant, ni appel de configuration. Les collections prennent items et renderItem, et votre mise en page, votre texte et vos styles restent les vôtres.

Importez un composant et passez une valeur. C’est toute l’intégration.
Les listes, onglets et pagineurs lisent votre tableau ; les keys valent item.id par défaut.
Le texte reste du vrai texte : il passe à la ligne, suit la taille de police et se sélectionne.

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

Six composants en direct, et la ligne de code derrière chacun.

Préparation de l’exemple…

JavaScript est désactivé. Le code ci-dessous est l’exemple complet.

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

02Le plus rapide

Le navigateur le joue. React ne bouge pas.

Sur le web, aucune bibliothèque d’animation à charger : les composants confient leur mouvement à la Web Animations API, si bien qu’un chiffre qui défile ou un panneau qui change de taille ne coûte ni JavaScript à chaque image ni rendu React pendant qu’il bouge.

0 callbacks d’image JS pendant que 12 animations tournent ensemble.
Un commit React par changement de valeur, pas un par image.
Texte en streaming : 11 commits React pour 3000 caractères. L’exemple ci-dessous compte ses propres rendus.

Préparation de l’exemple…

JavaScript est désactivé. Le code ci-dessous est l’exemple complet.

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

03Le plus stable

Interrompez n’importe quoi. Rien ne saute.

Chaque nouvelle valeur part de ce qui est à l’écran et les ressorts gardent leur vitesse : clics rapides, rafales de données et retours en arrière paraissent voulus. Quand le mouvement se termine, plus rien ne tourne.

Les nombres ne se coupent jamais : les chiffres restants glissent pendant qu’ils défilent.
200 nouvelles valeurs à 5 ms d’intervalle : 0 animations restantes ensuite, et le texte final exact.
Sûr sous React StrictMode. Dans une application React Native en arrière-plan, le mouvement se pose sur son état final.

Préparation de l’exemple…

JavaScript est désactivé. Le code ci-dessous est l’exemple complet.

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 composants, regroupés par rôle

Nombres et texte, contenu qui change de taille, sélection, listes, gestes, superpositions et progression. Chacun dispose d’un banc d’essai en direct avec ses props à côté.

Tous les composants

Assemblés

Des écrans complets qui combinent plusieurs composants, chacun avec ses réglages en dehors de l’exemple.

Tous les exemples

Le même import sur le web et React Native

Metro choisit l’implémentation native et les bundlers web l’implémentation DOM. Chaque plateforme joue le mouvement de la façon qui lui convient le mieux.

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

Partie	Web	React Native
Transforms et opacité	Web Animations API, ressorts échantillonnés analytiquement	`Animated` avec le driver natif
Largeur et hauteur	Web Animations API	`Animated` avec le driver JS, car c’est de la mise en page
Texte en streaming	Caractères ajoutés avec un fondu ; quelques rendus React par seconde	Un vrai `Text`, affiché sans fondu
Panneaux et zoom	Un `dialog` natif dans la couche supérieure	Un `Modal` transparent ; le bouton retour le ferme

Démarrer en deux minutes

Installez, importez un composant, passez une valeur.

npm install @kkwaenggwari/animated-chorus

Les interactions difficiles, déjà terminées.

Mesuré sur ce build

Une balise et vos données

Le navigateur le joue. React ne bouge pas.

Interrompez n’importe quoi. Rien ne saute.

16 composants, regroupés par rôle

Nombres et texte

Contenu et taille

Sélection et pagination

Listes

Gestes

Superpositions

Progression

Assemblés

Le même import sur le web et React Native

Démarrer en deux minutes

Rechercher