React · React Native · 16 komponenti

Teške interakcije, gotove.

Animated Chorus skup je komponenti pokreta za interakcije koje je teško ručno napraviti kako treba: brojevi koji se vrte, tekst koji pristiže u streamu, zamjene koje mijenjaju veličinu, sheetovi, pageri, radnje povlačenjem i popisi koji animiraju samo ono što se promijenilo. Jedna oznaka i vaši podaci. Bez providera, bez postavljanja.

Započnite Pregledajte komponente

Instalacija

npm install @kkwaenggwari/animated-chorus

Izmjereno na ovoj izgradnji

Chrome, 2026-09-28. Svi uvjeti i uzorci nalaze se u vodiču o performansama. Kako je izmjereno

28.0KBKB gzip za svih 16 exporta
Cijela ulazna točka za web, minificirana. React je jedina peer ovisnost.
0JS callbackovi kadrova tijekom animacije
Broj, visina i isticanje mijenjaju se zajedno: preglednik reproducira svih 12 animacija.
1Reactov commit po promjeni vrijednosti
MotionNumber se renderira kad se vrijednost promijeni, nikad dok se vrti.
11Reactovi commitovi za 3000 znakova iz streama
MotionStream izravno dodaje znakove i u React ih predaje samo nekoliko puta u sekundi.

01Najjednostavnije

Jedna oznaka i vaši podaci

Svaka komponenta radi samostalno: bez providera, omotačke komponente ili poziva za postavljanje. Kolekcije primaju items i renderItem, a vaš raspored, tekstovi i stilovi ostaju vaši.

Uvezite jednu komponentu i predajte vrijednost. To je cijela integracija.
Popisi, kartice i pageri čitaju vaš niz; ključevi su prema zadanom item.id.
Tekst ostaje pravi tekst: prelama se, skalira s fontom i može se označiti.

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

Šest komponenti uživo i jedan redak koda iza svake.

Priprema primjera…

JavaScript je isključen. Kod ispod je cijeli primjer.

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

02Najbrže

Reproducira preglednik. React miruje.

Na webu nema biblioteke animacija za učitavanje: komponente predaju pokret Web Animations API-ju, pa broj koji se vrti ili ploča koja mijenja veličinu ne koštaju ni JavaScript po kadru ni Reactovo renderiranje dok se kreću.

0 JS callbackova kadrova dok 12 animacija radi zajedno.
Jedan Reactov commit po promjeni vrijednosti, ne jedan po kadru.
Tekst iz streama: 11 Reactovih commitova za 3000 znakova. Primjer ispod broji vlastita renderiranja.

Priprema primjera…

JavaScript je isključen. Kod ispod je cijeli primjer.

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

03Najstabilnije

Prekinite bilo što. Ništa ne skače.

Svaka nova vrijednost počinje od onoga što je na zaslonu, a opruge zadržavaju brzinu, pa brzi klikovi, naleti podataka i okretanja izgledaju namjerno. Kad pokret završi, ništa ne ostaje pokrenuto.

Brojevi se nikad ne raspadaju: preostala mjesta klize dok se vrte.
200 novih vrijednosti u razmaku od 5 ms: nakon toga ostaje 0 animacija i točan završni tekst.
Sigurno u React StrictModeu. U React Native aplikaciji u pozadini pokret prelazi u završno stanje.

Priprema primjera…

JavaScript je isključen. Kod ispod je cijeli primjer.

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 komponenti grupiranih prema zadatku

Brojevi i tekst, sadržaj promjenjive veličine, odabir, popisi, geste, slojevi i napredak. Svaka ima radni stol uživo s props sa strane.

Sve komponente

Zajedno

Cjeloviti zasloni koji kombiniraju više komponenti, svaki s postavkama izvan primjera.

Svi primjeri

Isti import na webu i u React Nativeu

Metro bira nativnu implementaciju, a web bundleri onu za DOM. Svaka platforma reproducira pokret onako kako najbolje zna.

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

Dio	Web	React Native
Transformacije i opacity	Web Animations API, opruge uzorkovane analitički	`Animated` s nativnim driverom
Širina i visina	Web Animations API	`Animated` s JS driverom jer je riječ o rasporedu
Tekst iz streama	Znakovi se dodaju i postupno pojavljuju; nekoliko Reactovih renderiranja u sekundi	Pravi `Text`, otkriven bez prelijevanja
Sheetovi i zumiranje	Nativni `dialog` u gornjem sloju	Prozirni `Modal`; zatvara ga gumb za natrag

Započnite za dvije minute

Instalirajte, uvezite jednu komponentu, predajte vrijednost.

npm install @kkwaenggwari/animated-chorus

Teške interakcije, gotove.

Izmjereno na ovoj izgradnji

Jedna oznaka i vaši podaci

Reproducira preglednik. React miruje.

Prekinite bilo što. Ništa ne skače.

16 komponenti grupiranih prema zadatku

Brojevi i tekst

Sadržaj i veličina

Odabir i stranice

Popisi

Geste

Slojevi

Napredak

Zajedno

Isti import na webu i u React Nativeu

Započnite za dvije minute

Pretraži