React · React Native · 16 komponentų

Sudėtingos sąveikos, užbaigtos.

Animated Chorus yra judesio komponentų rinkinys sąveikoms, kurias sunku teisingai padaryti rankomis: besisukantys skaičiai, srautinis tekstas, dydį keičiantys pakeitimai, sheet, puslapiuotuvai, braukimo veiksmai ir sąrašai, kurie animuoja tik tai, kas pasikeitė. Viena žymė ir jūsų duomenys. Jokio provider, jokio nustatymo.

Pradėkite Naršyti komponentus

Diegimas

npm install @kkwaenggwari/animated-chorus

Išmatuota šiame leidime

Chrome, 2026-09-28. Visos sąlygos ir pavyzdžiai yra našumo vadove. Kaip buvo matuota

28.0KBKB gzip visiems 16 eksportų
Visas žiniatinklio įėjimo taškas, sumažintas. React yra vienintelis peer.
0JS kadrų callback animuojant
Skaičius, aukštis ir paryškinimas keičiasi kartu: naršyklė groja visas 12 animacijas.
1React commit per reikšmės pakeitimą
MotionNumber perpiešiamas, kai pasikeičia reikšmė, niekada sukantis.
11React commit 3000 srautiniams simboliams
MotionStream prideda simbolius tiesiogiai ir kelis kartus per sekundę įtraukia juos į React.

01Paprasčiausia

Viena žymė ir jūsų duomenys

Kiekvienas komponentas veikia savarankiškai: jokio provider, apgaubiančio komponento ar nustatymo kvietimo. Kolekcijos priima items ir renderItem, o jūsų išdėstymas, tekstas ir stiliai lieka jūsų.

Importuokite vieną komponentą ir perduokite reikšmę. Tai visa integracija.
Sąrašai, skirtukai ir puslapiuotuvai skaito jūsų masyvą; key pagal numatymą yra item.id.
Tekstas lieka tikru tekstu: jis kelia eilutes, keičia dydį pagal šriftą ir gali būti pažymėtas.

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

Šeši gyvi komponentai ir po kiekvienu esanti viena kodo eilutė.

Ruošiamas pavyzdys…

JavaScript išjungtas. Žemiau esantis kodas yra visas pavyzdys.

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

02Greičiausia

Groja naršyklė. React lieka ramus.

Žiniatinklyje nereikia įkelti animacijos bibliotekos: komponentai perduoda savo judesį Web Animations API, todėl besisukantis skaičius ar dydį keičiantis skydelis judėdamas nekainuoja JavaScript per kadrą ir jokio React perpiešimo.

0 JS kadrų callback, kol kartu veikia 12 animacijos.
Vienas React commit per reikšmės pakeitimą, o ne per kadrą.
Srautinis tekstas: 11 React commit 3000 simboliams. Žemiau esantis pavyzdys skaičiuoja savo perpiešimus.

Ruošiamas pavyzdys…

JavaScript išjungtas. Žemiau esantis kodas yra visas pavyzdys.

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

03Stabiliausia

Pertraukite bet ką. Niekada nešokinėja.

Kiekviena nauja reikšmė prasideda nuo to, kas yra ekrane, o spyruoklės išlaiko greitį, todėl greiti paspaudimai, duomenų pliūpsniai ir apsisukimai atrodo tyčiniai. Kai judesys baigiasi, niekas nelieka veikti.

Skaičiai niekada nesuskyla: likę skaitmenys slenka sukdamiesi.
200 naujos reikšmės kas 5 ms: po to lieka 0 animacijų ir tikslus galutinis tekstas.
Saugu su React StrictMode. Fone veikiančioje React Native programoje judesys nusistovi galutinėje būsenoje.

Ruošiamas pavyzdys…

JavaScript išjungtas. Žemiau esantis kodas yra visas pavyzdys.

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 komponentai, sugrupuoti pagal atliekamą darbą

Skaičiai ir tekstas, dydį keičiantis turinys, pasirinkimas, sąrašai, gestai, perdangos ir eiga. Kiekvienas turi gyvą darbo stalą su props šone.

Visi komponentai

Sujungta

Išbaigti ekranai, jungiantys kelis komponentus, kiekvienas su nustatymais už pavyzdžio ribų.

Visi pavyzdžiai

Tas pats importas žiniatinklyje ir React Native

Metro pasirenka vietinį įgyvendinimą, o žiniatinklio bundler – DOM. Kiekviena platforma groja judesį taip, kaip jai geriausiai sekasi.

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

Dalis	Žiniatinklis	React Native
Transformacijos ir neskaidrumas	Web Animations API, spyruoklės imamos analitiškai	`Animated` su vietiniu driver
Plotis ir aukštis	Web Animations API	`Animated` su JS driver, nes tai išdėstymas
Srautinis tekstas	Simboliai pridedami ir palaipsniui išryškinami; keli React perpiešimai per sekundę	Tikras `Text`, rodomas be išryškinimo
Sheet ir mastelis	Vietinis `dialog` viršutiniame sluoksnyje	Permatomas `Modal`; jį uždaro mygtukas atgal

Pradėkite per dvi minutes

Įdiekite, importuokite vieną komponentą, perduokite reikšmę.

npm install @kkwaenggwari/animated-chorus

Sudėtingos sąveikos, užbaigtos.

Išmatuota šiame leidime

Viena žymė ir jūsų duomenys

Groja naršyklė. React lieka ramus.

Pertraukite bet ką. Niekada nešokinėja.

16 komponentai, sugrupuoti pagal atliekamą darbą

Skaičiai ir tekstas

Turinys ir dydis

Pasirinkimas ir puslapiavimas

Sąrašai

Gestai

Perdangos

Eiga

Sujungta

Tas pats importas žiniatinklyje ir React Native

Pradėkite per dvi minutes

Paieška