React · React Native · 16 komponenttia

Vaikeat vuorovaikutukset, valmiina.

Animated Chorus on joukko liikekomponentteja vuorovaikutuksiin, jotka on vaikea saada oikein käsin: pyörivät numerot, virtaava teksti, kokoa muuttavat vaihdot, sheetit, sivuttajat, pyyhkäisytoiminnot ja listat, jotka animoivat vain muuttuneen. Yksi tagi ja datasi. Ei provideria, ei alustusta.

Aloita Selaa komponentteja

Asennus

npm install @kkwaenggwari/animated-chorus

Mitattu tällä julkaisulla

Chrome, 2026-09-28. Kaikki olosuhteet ja näytteet ovat suorituskykyoppaassa. Miten mitattiin

28.0KBKB gzip kaikille 16 exportille
Koko webin aloituspiste pienennettynä. React on ainoa peer.
0JS-ruutucallbackit animoinnin aikana
Luku, korkeus ja korostus muuttuvat yhdessä: selain toistaa kaikki 12 animaatiota.
1React-commit arvon muutosta kohden
MotionNumber renderöityy, kun arvo muuttuu, ei koskaan pyöriessään.
11React-commitit 3000 virtaavalle merkille
MotionStream lisää merkit suoraan ja yhdistää ne Reactiin muutaman kerran sekunnissa.

01Helpoin

Yksi tagi ja datasi

Jokainen komponentti toimii itsenäisesti: ei provideria, käärekomponenttia eikä alustuskutsua. Kokoelmat ottavat items- ja renderItem-arvot, ja asettelu, teksti ja tyylit pysyvät sinun.

Importtaa yksi komponentti ja anna arvo. Siinä koko integraatio.
Listat, välilehdet ja sivuttajat lukevat taulukkosi; keyn oletus on item.id.
Teksti pysyy oikeana tekstinä: se rivittyy, skaalautuu fontin mukana ja on valittavissa.

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

Kuusi live-komponenttia ja kunkin takana oleva yksi koodirivi.

Valmistellaan esimerkkiä…

JavaScript on pois päältä. Alla oleva koodi on koko esimerkki.

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

02Nopein

Selain toistaa. React pysyy paikallaan.

Webissä ei ladata animaatiokirjastoa: komponentit antavat liikkeensä Web Animations API:lle, joten pyörivä numero tai kokoaan muuttava paneeli ei maksa liikkuessaan JavaScriptiä ruutua kohden eikä React-renderöintiä.

0 JS-ruutucallbackia, kun 12 animaatiota on käynnissä yhtä aikaa.
Yksi React-commit arvon muutosta kohden, ei ruutua kohden.
Virtaava teksti: 11 React-commitia 3000 merkille. Alla oleva esimerkki laskee omat renderöintinsä.

Valmistellaan esimerkkiä…

JavaScript on pois päältä. Alla oleva koodi on koko esimerkki.

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

03Vakain

Keskeytä mitä tahansa. Se ei koskaan hyppää.

Jokainen uusi arvo alkaa siitä, mitä näytöllä on, ja jouset säilyttävät nopeutensa, joten nopeat napsautukset, datapurskeet ja suunnanmuutokset näyttävät tarkoituksellisilta. Kun liike päättyy, mitään ei jää käyntiin.

Luvut eivät koskaan hajoa: jäljelle jäävät numeropaikat liukuvat pyöriessään.
200 uutta arvoa 5 ms:n välein: jäljelle jää 0 animaatiota ja tarkka lopputeksti.
Turvallinen React StrictModessa. Taustalla olevassa React Native -sovelluksessa liike asettuu lopputilaansa.

Valmistellaan esimerkkiä…

JavaScript on pois päältä. Alla oleva koodi on koko esimerkki.

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 komponenttia tehtävän mukaan ryhmiteltyinä

Numerot ja teksti, kokoa muuttava sisältö, valinta, listat, eleet, peitot ja edistyminen. Jokaisella on live-työpöytä, jonka sivussa ovat props-arvot.

Kaikki komponentit

Yhdessä

Kokonaisia näkymiä, joissa yhdistyy useita komponentteja, ja kunkin asetukset ovat esimerkin ulkopuolella.

Kaikki esimerkit

Sama import webissä ja React Nativessa

Metro valitsee natiivitoteutuksen ja webin bundlerit DOM-toteutuksen. Kukin alusta toistaa liikkeen parhaalla tavallaan.

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

Osa	Web	React Native
Muunnokset ja peittävyys	Web Animations API, jouset analyyttisesti näytteistettyinä	`Animated` natiivilla driverilla
Leveys ja korkeus	Web Animations API	`Animated` JS-driverilla, koska kyse on asettelusta
Virtaava teksti	Merkit lisätään ja häivytetään esiin; muutama React-renderöinti sekunnissa	Oikea `Text`, näytetään ilman häivytystä
Sheetit ja zoomaus	Natiivi `dialog` ylimmällä tasolla	Läpinäkyvä `Modal`; takaisin-painike sulkee sen

Aloita kahdessa minuutissa

Asenna, importtaa yksi komponentti, anna arvo.

npm install @kkwaenggwari/animated-chorus

Vaikeat vuorovaikutukset, valmiina.

Mitattu tällä julkaisulla

Yksi tagi ja datasi

Selain toistaa. React pysyy paikallaan.

Keskeytä mitä tahansa. Se ei koskaan hyppää.

16 komponenttia tehtävän mukaan ryhmiteltyinä

Numerot ja teksti

Sisältö ja koko

Valinta ja sivutus

Listat

Eleet

Peitot

Edistyminen

Yhdessä

Sama import webissä ja React Nativessa

Aloita kahdessa minuutissa

Haku