React · React Native · 16 komponens

Nehéz interakciók, készen.

Az Animated Chorus mozgáskomponensek gyűjteménye olyan interakciókhoz, amelyeket kézzel nehéz jól megcsinálni: pörgő számok, folyamatosan érkező szöveg, átméreteződő cserék, sheetek, lapozók, csúsztatásos műveletek és csak a változást animáló listák. Egy címke és az Ön adatai. Nincs provider, nincs beállítás.

Kezdje el Komponensek böngészése

Telepítés

npm install @kkwaenggwari/animated-chorus

Erre a kiadásra mérve

Chrome, 2026-09-28. Minden feltétel és minta a teljesítmény-útmutatóban található. Hogyan mértük

28.0KBKB gzip mind a 16 exportra
A teljes webes belépési pont, minifikálva. A React az egyetlen peer.
0JS-képkocka-callbackek animáció közben
Egy szám, egy magasság és egy kiemelés együtt változik: a böngésző mind a(z) 12 animációt lejátssza.
1React-commit értékváltozásonként
A MotionNumber akkor renderel, amikor az érték változik, pörgés közben soha.
11React-commitok 3000 folyamatosan érkező karakterre
A MotionStream közvetlenül hozzáfűzi a karaktereket, és másodpercenként néhányszor beolvasztja őket a Reactbe.

01A legegyszerűbb

Egy címke és az Ön adatai

Minden komponens önállóan működik: nincs provider, burkoló komponens vagy beállító hívás. A gyűjtemények items és renderItem értéket fogadnak, az elrendezés, a szöveg és a stílusok pedig az Önéi maradnak.

Importáljon egy komponenst, és adjon át egy értéket. Ez a teljes integráció.
A listák, fülek és lapozók az Ön tömbjét olvassák; a key alapértelmezése item.id.
A szöveg valódi szöveg marad: tördelődik, a betűmérettel skálázódik, és kijelölhető.

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

Hat élő komponens, és mindegyik mögött egyetlen sor kód.

A példa előkészítése…

A JavaScript ki van kapcsolva. Az alábbi kód a teljes példa.

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

02A leggyorsabb

A böngésző játssza le. A React nyugton marad.

Weben nincs betöltendő animációs könyvtár: a komponensek a mozgást a Web Animations API-nak adják át, így egy pörgő szám vagy átméreteződő panel mozgás közben nem kerül képkockánkénti JavaScriptbe és React-renderelésbe.

0 JS-képkocka-callback, miközben 12 animáció fut együtt.
Értékváltozásonként egy React-commit, nem képkockánként.
Folyamatos szöveg: 11 React-commit 3000 karakterre. Az alábbi példa a saját rendereléseit számolja.

A példa előkészítése…

A JavaScript ki van kapcsolva. Az alábbi kód a teljes példa.

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

03A legstabilabb

Szakítson meg bármit. Soha nem ugrik.

Minden új érték onnan indul, ami a képernyőn van, a rugók pedig megtartják a sebességüket, így a gyors kattintások, adatlöketek és irányváltások szándékosnak hatnak. Amikor a mozgás véget ér, semmi sem fut tovább.

A számok soha nem esnek szét: a maradó helyiértékek pörgés közben csúsznak.
200 új érték 5 ms-onként: utána 0 animáció marad, és a végső szöveg pontos.
Biztonságos React StrictMode alatt. Háttérben futó React Native alkalmazásban a mozgás a végállapotba kerül.

A példa előkészítése…

A JavaScript ki van kapcsolva. Az alábbi kód a teljes példa.

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 komponens, feladatuk szerint csoportosítva

Számok és szöveg, méretét változtató tartalom, kiválasztás, listák, gesztusok, rétegek és haladás. Mindegyiknek van élő munkapadja, oldalt a props-okkal.

Összes komponens

Összerakva

Több komponenst kombináló teljes képernyők, mindegyik beállításai a példán kívül.

Összes példa

Ugyanaz az import weben és React Native alatt

A Metro a natív, a webes csomagolók a DOM-implementációt választják. Minden platform úgy játssza le a mozgást, ahogy a legjobban tudja.

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

Rész	Web	React Native
Transzformációk és átlátszatlanság	Web Animations API, analitikusan mintavételezett rugók	`Animated` natív driverrel
Szélesség és magasság	Web Animations API	`Animated` JS-driverrel, mert ez elrendezés
Folyamatos szöveg	Hozzáfűzött és beúszó karakterek; másodpercenként néhány React-renderelés	Valódi `Text`, áttűnés nélkül megjelenítve
Sheetek és nagyítás	Natív `dialog` a legfelső rétegben	Átlátszó `Modal`; a vissza gomb bezárja

Kezdés két perc alatt

Telepítse, importáljon egy komponenst, adjon át egy értéket.

npm install @kkwaenggwari/animated-chorus

Nehéz interakciók, készen.

Erre a kiadásra mérve

Egy címke és az Ön adatai

A böngésző játssza le. A React nyugton marad.

Szakítson meg bármit. Soha nem ugrik.

16 komponens, feladatuk szerint csoportosítva

Számok és szöveg

Tartalom és méret

Kiválasztás és lapozás

Listák

Gesztusok

Rétegek

Haladás

Összerakva

Ugyanaz az import weben és React Native alatt

Kezdés két perc alatt

Keresés