React · React Native · 16 komponenter

Vanskelige interaksjoner, ferdige.

Animated Chorus er et sett bevegelseskomponenter for interaksjonene som er vanskelige å få riktig for hånd: rullende tall, strømmet tekst, bytter som endrer størrelse, sheets, pagere, sveipehandlinger og lister som bare animerer det som endret seg. Én tagg og dataene dine. Ingen provider, ikke noe oppsett.

Kom i gang Bla gjennom komponenter

Installer

npm install @kkwaenggwari/animated-chorus

Målt på dette bygget

Chrome, 2026-09-28. Alle betingelser og målinger står i ytelsesguiden. Slik ble det målt

28.0KBKB gzip for alle 16 eksporter
Hele inngangspunktet for web, minifisert. React er den eneste peer-en.
0JS-bilde-callbacks under animasjon
Et tall, en høyde og en markering endres sammen: nettleseren spiller av alle 12 animasjonene.
1React-commit per verdiendring
MotionNumber renderes når verdien endres, aldri mens den ruller.
11React-commits for 3000 strømmede tegn
MotionStream legger til tegn direkte og fører dem inn i React noen få ganger i sekundet.

01Enklest

Én tagg og dataene dine

Hver komponent fungerer på egen hånd: ingen provider, omslagskomponent eller oppsettkall. Samlinger tar items og renderItem, og layouten, tekstene og stilene dine forblir dine.

Importer én komponent og send en verdi. Det er hele integrasjonen.
Lister, faner og pagere leser arrayen din; nøkler er som standard item.id.
Tekst forblir ekte tekst: den brytes, skaleres med skrifttypen og kan merkes.

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

Seks live-komponenter, og den ene kodelinjen bak hver.

Forbereder eksempelet …

JavaScript er slått av. Koden nedenfor er hele eksempelet.

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

02Raskest

Nettleseren spiller av. React står stille.

På nettet finnes det ikke noe animasjonsbibliotek å laste inn: komponentene gir bevegelsen videre til Web Animations API, så et rullende tall eller et panel som endrer størrelse, koster ingen JavaScript per bilde og ingen React-rendering mens det beveger seg.

0 JS-bilde-callbacks mens 12 animasjoner kjører sammen.
Én React-commit per verdiendring, ikke én per bilde.
Strømmet tekst: 11 React-commits for 3000 tegn. Eksempelet nedenfor teller sine egne renderinger.

Forbereder eksempelet …

JavaScript er slått av. Koden nedenfor er hele eksempelet.

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

03Mest stabil

Avbryt hva som helst. Ingenting hopper.

Hver ny verdi starter fra det som er på skjermen, og fjærer beholder hastigheten, så raske klikk, datastøt og vendinger ser tilsiktet ut. Når bevegelsen slutter, kjører ingenting videre.

Tall deler seg aldri: gjenværende plasser glir mens de ruller.
200 nye verdier med 5 ms mellomrom: 0 animasjoner igjen etterpå og nøyaktig slutttekst.
Trygg under React StrictMode. I en React Native-app i bakgrunnen lander bevegelsen i sluttilstanden.

Forbereder eksempelet …

JavaScript er slått av. Koden nedenfor er hele eksempelet.

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 komponenter, gruppert etter oppgave

Tall og tekst, innhold som endrer størrelse, utvalg, lister, bevegelser, overlegg og fremdrift. Hver har en live arbeidsbenk med props ved siden av.

Alle komponenter

Satt sammen

Komplette skjermer som kombinerer flere komponenter, hver med innstillingene utenfor eksempelet.

Alle eksempler

Samme import på nettet og i React Native

Metro velger native-implementasjonen, og nettbundlere velger DOM-versjonen. Hver plattform spiller av bevegelse slik den gjør det best.

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

Del	Web	React Native
Transforms og opacity	Web Animations API, fjærer samplet analytisk	`Animated` med native driver
Bredde og høyde	Web Animations API	`Animated` med JS-driver, fordi det er layout
Strømmet tekst	Tegn som legges til og tones inn; noen få React-renderinger i sekundet	En ekte `Text`, vist uten toning
Sheets og zoom	En native `dialog` i det øverste laget	En gjennomsiktig `Modal`; tilbakeknappen lukker den

Kom i gang på to minutter

Installer, importer én komponent, send en verdi.

npm install @kkwaenggwari/animated-chorus

Vanskelige interaksjoner, ferdige.

Målt på dette bygget

Én tagg og dataene dine

Nettleseren spiller av. React står stille.

Avbryt hva som helst. Ingenting hopper.

16 komponenter, gruppert etter oppgave

Tall og tekst

Innhold og størrelse

Utvalg og sider

Lister

Bevegelser

Overlegg

Fremdrift

Satt sammen

Samme import på nettet og i React Native

Kom i gang på to minutter

Søk