React · React Native · 16 componente

Interacțiuni grele, rezolvate.

Animated Chorus este un set de componente de mișcare pentru interacțiunile greu de făcut corect de mână: numere care se rotesc, text transmis în flux, schimbări care se redimensionează, sheet-uri, pagere, acțiuni prin glisare și liste care animă doar ce s-a schimbat. Un tag și datele dumneavoastră. Fără provider, fără configurare.

Începeți Răsfoiți componentele

Instalare

npm install @kkwaenggwari/animated-chorus

Măsurat pe această versiune

Chrome, 2026-09-28. Toate condițiile și eșantioanele sunt în ghidul de performanță. Cum s-a măsurat

28.0KBKB gzip pentru toate cele 16 exporturi
Întregul punct de intrare web, minimizat. React este singurul peer.
0Callback-uri de cadru JS în timpul animației
Un număr, o înălțime și un evidențiator se schimbă împreună: browserul redă toate cele 12 animații.
1Commit React per schimbare de valoare
MotionNumber se randează când se schimbă valoarea, niciodată cât se rotește.
11Commit-uri React pentru 3000 caractere transmise în flux
MotionStream adaugă caracterele direct și le integrează în React de câteva ori pe secundă.

01Cel mai simplu

Un tag și datele dumneavoastră

Fiecare componentă funcționează singură: fără provider, componentă de înveliș sau apel de configurare. Colecțiile primesc items și renderItem, iar layoutul, textul și stilurile rămân ale dumneavoastră.

Importați o componentă și transmiteți o valoare. Asta e toată integrarea.
Listele, filele și pagerele vă citesc tabloul; key-urile sunt implicit item.id.
Textul rămâne text real: se încadrează pe rânduri, se scalează cu fontul și poate fi selectat.

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

Șase componente live și linia de cod din spatele fiecăreia.

Se pregătește exemplul…

JavaScript este dezactivat. Codul de mai jos este exemplul 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;
}

02Cel mai rapid

Browserul redă. React stă pe loc.

Pe web nu trebuie încărcată nicio bibliotecă de animație: componentele își predau mișcarea către Web Animations API, așa că un număr care se rotește sau un panou care se redimensionează nu costă JavaScript per cadru și nici randare React cât se mișcă.

0 callback-uri de cadru JS cât rulează împreună 12 animații.
Un commit React per schimbare de valoare, nu unul per cadru.
Text în flux: 11 commit-uri React pentru 3000 caractere. Exemplul de mai jos își numără propriile randări.

Se pregătește exemplul…

JavaScript este dezactivat. Codul de mai jos este exemplul 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;
}

03Cel mai stabil

Întrerupeți orice. Nu sare niciodată.

Fiecare valoare nouă pornește de la ce e pe ecran, iar arcurile își păstrează viteza, așa că clicurile rapide, rafalele de date și inversările par intenționate. Când mișcarea se încheie, nu mai rulează nimic.

Numerele nu se despart niciodată: cifrele rămase alunecă în timp ce se rotesc.
200 valori noi la 5 ms una de alta: după aceea rămân 0 animații, iar textul final este exact.
Sigur sub React StrictMode. Într-o aplicație React Native în fundal, mișcarea se așază la starea finală.

Se pregătește exemplul…

JavaScript este dezactivat. Codul de mai jos este exemplul 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 componente, grupate după treaba pe care o fac

Numere și text, conținut care își schimbă mărimea, selecție, liste, gesturi, suprapuneri și progres. Fiecare are un banc de lucru live cu props alături.

Toate componentele

Puse laolaltă

Ecrane complete care combină mai multe componente, fiecare cu setările în afara exemplului.

Toate exemplele

Același import pe web și în React Native

Metro alege implementarea nativă, iar bundlerele web pe cea DOM. Fiecare platformă redă mișcarea în felul care îi reușește cel mai bine.

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ări și opacitate	Web Animations API, arcuri eșantionate analitic	`Animated` cu driverul nativ
Lățime și înălțime	Web Animations API	`Animated` cu driverul JS, pentru că e layout
Text în flux	Caractere adăugate și apărute treptat; câteva randări React pe secundă	Un `Text` real, afișat fără estompare
Sheet-uri și zoom	Un `dialog` nativ în stratul superior	Un `Modal` transparent; butonul înapoi îl închide

Începeți în două minute

Instalați, importați o componentă, transmiteți o valoare.

npm install @kkwaenggwari/animated-chorus

Interacțiuni grele, rezolvate.

Măsurat pe această versiune

Un tag și datele dumneavoastră

Browserul redă. React stă pe loc.

Întrerupeți orice. Nu sare niciodată.

16 componente, grupate după treaba pe care o fac

Numere și text

Conținut și mărime

Selecție și paginare

Liste

Gesturi

Suprapuneri

Progres

Puse laolaltă

Același import pe web și în React Native

Începeți în două minute

Căutare