React · React Native · 16 componenti

Interazioni difficili, già pronte.

Animated Chorus è un insieme di componenti di movimento per le interazioni difficili da fare bene a mano: numeri che scorrono, testo in streaming, scambi che si ridimensionano, sheet, pager, azioni con lo swipe e liste che animano solo ciò che è cambiato. Un tag e i tuoi dati. Niente provider, niente configurazione.

Inizia Sfoglia i componenti

Installa

npm install @kkwaenggwari/animated-chorus

Misurato su questa build

Chrome, 2026-09-28. Tutte le condizioni e i campioni sono nella guida alle prestazioni. Come è stato misurato

28.0KBKB gzip per tutti i 16 export
L’intera entry web, minificata. React è l’unica peer dependency.
0Callback di frame JS durante l’animazione
Un numero, un’altezza e un’evidenziazione che cambiano insieme: il browser riproduce tutte le 12 animazioni.
1Commit di React per ogni cambio di valore
MotionNumber si renderizza quando il valore cambia, mai mentre scorre.
11Commit di React per 3000 caratteri in streaming
MotionStream aggiunge i caratteri direttamente e li integra in React poche volte al secondo.

01Il più semplice

Un tag e i tuoi dati

Ogni componente funziona da solo: nessun provider, componente wrapper o chiamata di configurazione. Le collezioni prendono items e renderItem, e layout, testi e stili restano tuoi.

Importa un componente e passagli un valore. Questa è tutta l’integrazione.
Liste, tab e pager leggono il tuo array; le key sono item.id di default.
Il testo resta testo vero: va a capo, si adatta al font e si può selezionare.

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

Sei componenti dal vivo, e la riga di codice dietro ciascuno.

Preparazione dell’esempio…

JavaScript è disattivato. Il codice qui sotto è l’esempio completo.

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

02Il più veloce

Lo riproduce il browser. React resta fermo.

Sul web non c’è nessuna libreria di animazione da caricare: i componenti affidano il movimento alla Web Animations API, quindi un numero che scorre o un pannello che si ridimensiona non costano JavaScript per frame né render di React mentre si muovono.

0 callback di frame JS mentre 12 animazioni girano insieme.
Un commit di React per ogni cambio di valore, non uno per frame.
Testo in streaming: 11 commit di React per 3000 caratteri. L’esempio qui sotto conta i propri render.

Preparazione dell’esempio…

JavaScript è disattivato. Il codice qui sotto è l’esempio completo.

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

03Il più stabile

Interrompi qualsiasi cosa. Non salta mai.

Ogni nuovo valore parte da ciò che è sullo schermo e le molle conservano la velocità, così clic rapidi, raffiche di dati e inversioni sembrano intenzionali. Quando il movimento finisce, non resta nulla in esecuzione.

I numeri non si spezzano mai: le cifre rimanenti scivolano mentre scorrono.
200 nuovi valori a 5 ms di distanza: 0 animazioni rimaste dopo, e il testo finale esatto.
Sicuro con React StrictMode. In un’app React Native in background, il movimento si porta al suo stato finale.

Preparazione dell’esempio…

JavaScript è disattivato. Il codice qui sotto è l’esempio completo.

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 componenti, raggruppati per il lavoro che fanno

Numeri e testo, contenuti che cambiano dimensione, selezione, liste, gesti, overlay e avanzamento. Ognuno ha un banco di prova dal vivo con le sue props a lato.

Tutti i componenti

Messi insieme

Schermate complete che combinano più componenti, ognuna con le impostazioni fuori dall’esempio.

Tutti gli esempi

Lo stesso import sul web e su React Native

Metro sceglie l’implementazione nativa e i bundler web quella DOM. Ogni piattaforma riproduce il movimento nel modo che le riesce meglio.

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

Parte	Web	React Native
Transform e opacity	Web Animations API, molle campionate in modo analitico	`Animated` con il driver nativo
Larghezza e altezza	Web Animations API	`Animated` con il driver JS, perché è layout
Testo in streaming	Caratteri aggiunti che compaiono in dissolvenza; pochi render di React al secondo	Un vero `Text`, rivelato senza dissolvenza
Sheet e zoom	Un `dialog` nativo nel top layer	Un `Modal` trasparente; il tasto Indietro lo chiude

Inizia in due minuti

Installa, importa un componente, passagli un valore.

npm install @kkwaenggwari/animated-chorus

Interazioni difficili, già pronte.

Misurato su questa build

Un tag e i tuoi dati

Lo riproduce il browser. React resta fermo.

Interrompi qualsiasi cosa. Non salta mai.

16 componenti, raggruppati per il lavoro che fanno

Numeri e testo

Contenuto e dimensione

Selezione e pagine

Liste

Gesti

Overlay

Avanzamento

Messi insieme

Lo stesso import sul web e su React Native

Inizia in due minuti

Cerca