React · React Native · 16 komponent

Zahtevne interakcije, dokončane.

Animated Chorus je nabor komponent gibanja za interakcije, ki jih je ročno težko narediti prav: vrteča se števila, pretočno besedilo, zamenjave, ki spremenijo velikost, sheeti, listanje strani, dejanja s potegom in seznami, ki animirajo le spremenjeno. Ena oznaka in vaši podatki. Brez providerja, brez nastavitve.

Začnite Prebrskajte komponente

Namestitev

npm install @kkwaenggwari/animated-chorus

Izmerjeno na tej izdaji

Chrome, 2026-09-28. Vsi pogoji in vzorci so v vodniku o zmogljivosti. Kako je bilo izmerjeno

28.0KBKB gzip za vseh 16 izvozov
Celotna spletna vstopna točka, pomanjšana. React je edina peer odvisnost.
0Callbacki sličic JS med animiranjem
Število, višina in poudarek se spreminjajo skupaj: brskalnik predvaja vseh 12 animacij.
1Commit Reacta na spremembo vrednosti
MotionNumber se upodobi, ko se vrednost spremeni, nikoli med vrtenjem.
11Commiti Reacta za 3000 pretočnih znakov
MotionStream znake dodaja neposredno in jih nekajkrat na sekundo vključi v React.

01Najpreprostejše

Ena oznaka in vaši podatki

Vsaka komponenta deluje sama: brez providerja, ovijajoče komponente ali klica za nastavitev. Zbirke sprejmejo items in renderItem, vaša postavitev, besedilo in slogi pa ostanejo vaši.

Uvozite eno komponento in podajte vrednost. To je vsa integracija.
Seznami, zavihki in listanje strani berejo vaše polje; ključi so privzeto item.id.
Besedilo ostane pravo besedilo: prelamlja se, se prilagaja pisavi in ga je mogoče 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 komponent v živo in ena vrstica kode za vsako.

Pripravljanje primera …

JavaScript je izklopljen. Koda spodaj je celoten primer.

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

02Najhitrejše

Predvaja brskalnik. React miruje.

Na spletu ni treba naložiti nobene knjižnice za animacije: komponente gibanje predajo Web Animations API, zato vrteče se število ali panel, ki spreminja velikost, med gibanjem ne stane nič JavaScripta na sličico in nobenega upodabljanja Reacta.

0 callbackov sličic JS, medtem ko teče 12 animacij hkrati.
En commit Reacta na spremembo vrednosti, ne eden na sličico.
Pretočno besedilo: 11 commitov Reacta za 3000 znakov. Primer spodaj šteje lastne upodobitve.

Pripravljanje primera …

JavaScript je izklopljen. Koda spodaj je celoten primer.

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

03Najstabilnejše

Prekinite kar koli. Nikoli ne skoči.

Vsaka nova vrednost se začne od tistega, kar je na zaslonu, vzmeti pa ohranijo hitrost, zato so hitri kliki, izbruhi podatkov in obrati videti namerni. Ko se gibanje konča, nič ne teče naprej.

Števila se nikoli ne razcepijo: preostala mesta drsijo, medtem ko se vrtijo.
200 novih vrednosti v razmiku 5 ms: nato ostane 0 animacij in natančno končno besedilo.
Varno v React StrictMode. V aplikaciji React Native v ozadju se gibanje umiri v končno stanje.

Pripravljanje primera …

JavaScript je izklopljen. Koda spodaj je celoten primer.

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 komponent, razvrščenih po nalogi, ki jo opravljajo

Števila in besedilo, vsebina, ki spreminja velikost, izbira, seznami, geste, prekrivni elementi in napredek. Vsaka ima delovno mizo v živo s props ob strani.

Vse komponente

Sestavljeno

Celotni zasloni, ki združujejo več komponent, vsak z nastavitvami zunaj primera.

Vsi primeri

Isti uvoz na spletu in v React Nativu

Metro izbere domorodno izvedbo, spletni bundlerji pa izvedbo DOM. Vsaka platforma predvaja gibanje tako, kot ga predvaja najbolje.

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	Splet	React Native
Transformacije in prosojnost	Web Animations API, vzmeti, vzorčene analitično	`Animated` z domorodnim driverjem
Širina in višina	Web Animations API	`Animated` z driverjem JS, ker gre za postavitev
Pretočno besedilo	Znaki se dodajajo in postopno prikažejo; nekaj upodobitev Reacta na sekundo	Pravi `Text`, prikazan brez postopnega prikaza
Sheeti in povečava	Domoroden `dialog` v zgornji plasti	Prozoren `Modal`; zapre ga gumb za nazaj

Začnite v dveh minutah

Namestite, uvozite eno komponento, podajte vrednost.

npm install @kkwaenggwari/animated-chorus

Zahtevne interakcije, dokončane.

Izmerjeno na tej izdaji

Ena oznaka in vaši podatki

Predvaja brskalnik. React miruje.

Prekinite kar koli. Nikoli ne skoči.

16 komponent, razvrščenih po nalogi, ki jo opravljajo

Števila in besedilo

Vsebina in velikost

Izbira in listanje

Seznami

Geste

Prekrivni elementi

Napredek

Sestavljeno

Isti uvoz na spletu in v React Nativu

Začnite v dveh minutah

Iskanje