React · React Native · 16 components

Δύσκολες αλληλεπιδράσεις, έτοιμες.

Το Animated Chorus είναι ένα σύνολο από components κίνησης για αλληλεπιδράσεις που είναι δύσκολο να γίνουν σωστά με το χέρι: αριθμοί που κυλούν, κείμενο σε ροή, εναλλαγές που αλλάζουν μέγεθος, sheets, pagers, ενέργειες σάρωσης και λίστες που κινούν μόνο ό,τι άλλαξε. Μία ετικέτα και τα δεδομένα σας. Χωρίς provider, χωρίς ρύθμιση.

Ξεκινήστε Περιηγηθείτε στα components

Εγκατάσταση

npm install @kkwaenggwari/animated-chorus

Μετρημένο σε αυτή την έκδοση

Chrome, 2026-09-28. Όλες οι συνθήκες και τα δείγματα βρίσκονται στον οδηγό απόδοσης. Πώς μετρήθηκε

28.0KBKB gzip για όλα τα 16 exports
Ολόκληρο το σημείο εισόδου web, συμπιεσμένο. Το React είναι το μόνο peer.
0Callbacks καρέ JS κατά την κίνηση
Ένας αριθμός, ένα ύψος και μια επισήμανση αλλάζουν μαζί: το πρόγραμμα περιήγησης παίζει και τις 12 κινήσεις.
1React commit ανά αλλαγή τιμής
Το MotionNumber αποδίδεται όταν αλλάζει η τιμή, ποτέ ενώ κυλά.
11React commits για 3000 χαρακτήρες σε ροή
Το MotionStream προσθέτει χαρακτήρες απευθείας και τους ενσωματώνει στο React λίγες φορές το δευτερόλεπτο.

01Το πιο εύκολο

Μία ετικέτα και τα δεδομένα σας

Κάθε component λειτουργεί μόνο του: χωρίς provider, component περιτύλιξης ή κλήση ρύθμισης. Οι συλλογές δέχονται items και renderItem, και η διάταξη, το κείμενο και τα στυλ σας μένουν δικά σας.

Εισαγάγετε ένα component και δώστε μια τιμή. Αυτή είναι όλη η ενσωμάτωση.
Οι λίστες, οι καρτέλες και οι pagers διαβάζουν τον πίνακά σας· τα keys είναι από προεπιλογή item.id.
Το κείμενο μένει πραγματικό κείμενο: αναδιπλώνεται, κλιμακώνεται με τη γραμματοσειρά και μπορεί να επιλεγεί.

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

Έξι ζωντανά components και η μία γραμμή κώδικα πίσω από το καθένα.

Προετοιμασία παραδείγματος…

Η JavaScript είναι απενεργοποιημένη. Ο κώδικας παρακάτω είναι το πλήρες παράδειγμα.

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

02Το πιο γρήγορο

Το πρόγραμμα περιήγησης παίζει. Το React μένει ακίνητο.

Στο web δεν χρειάζεται να φορτωθεί βιβλιοθήκη κίνησης: τα components παραδίδουν την κίνησή τους στο Web Animations API, οπότε ένας αριθμός που κυλά ή ένα πάνελ που αλλάζει μέγεθος δεν κοστίζει JavaScript ανά καρέ ούτε απόδοση React όσο κινείται.

0 callbacks καρέ JS ενώ τρέχουν μαζί 12 κινήσεις.
Ένα React commit ανά αλλαγή τιμής, όχι ένα ανά καρέ.
Κείμενο σε ροή: 11 React commits για 3000 χαρακτήρες. Το παράδειγμα παρακάτω μετρά τις δικές του αποδόσεις.

Προετοιμασία παραδείγματος…

Η JavaScript είναι απενεργοποιημένη. Ο κώδικας παρακάτω είναι το πλήρες παράδειγμα.

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

03Το πιο σταθερό

Διακόψτε οτιδήποτε. Δεν πηδά ποτέ.

Κάθε νέα τιμή ξεκινά από ό,τι φαίνεται στην οθόνη και τα ελατήρια κρατούν την ταχύτητά τους, οπότε τα γρήγορα κλικ, οι ριπές δεδομένων και οι αναστροφές φαίνονται σκόπιμα. Όταν τελειώνει η κίνηση, τίποτα δεν μένει να τρέχει.

Οι αριθμοί δεν διασπώνται ποτέ: τα υπόλοιπα ψηφία γλιστρούν ενώ κυλούν.
200 νέες τιμές με απόσταση 5 ms: μετά απομένουν 0 κινήσεις και το ακριβές τελικό κείμενο.
Ασφαλές στο React StrictMode. Σε εφαρμογή React Native στο παρασκήνιο, η κίνηση πηγαίνει στην τελική της κατάσταση.

Προετοιμασία παραδείγματος…

Η JavaScript είναι απενεργοποιημένη. Ο κώδικας παρακάτω είναι το πλήρες παράδειγμα.

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 components, ομαδοποιημένα ανά δουλειά

Αριθμοί και κείμενο, περιεχόμενο που αλλάζει μέγεθος, επιλογή, λίστες, χειρονομίες, επικαλύψεις και πρόοδος. Το καθένα έχει ζωντανό πάγκο εργασίας με τα props του στο πλάι.

Όλα τα components

Μαζί

Πλήρεις οθόνες που συνδυάζουν πολλά components, το καθένα με τις ρυθμίσεις του έξω από το παράδειγμα.

Όλα τα παραδείγματα

Το ίδιο import σε web και React Native

Το Metro επιλέγει την native υλοποίηση και οι bundlers του web την υλοποίηση DOM. Κάθε πλατφόρμα παίζει την κίνηση με τον τρόπο που ξέρει καλύτερα.

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

Μέρος	Web	React Native
Μετασχηματισμοί και αδιαφάνεια	Web Animations API, ελατήρια με αναλυτική δειγματοληψία	`Animated` με τον native driver
Πλάτος και ύψος	Web Animations API	`Animated` με τον JS driver, επειδή είναι διάταξη
Κείμενο σε ροή	Χαρακτήρες που προστίθενται και εμφανίζονται σταδιακά· λίγες αποδόσεις React το δευτερόλεπτο	Πραγματικό `Text`, χωρίς σβήσιμο
Sheets και ζουμ	Ένα native `dialog` στο ανώτατο επίπεδο	Ένα διαφανές `Modal`· το κουμπί επιστροφής το κλείνει

Ξεκινήστε σε δύο λεπτά

Εγκαταστήστε, εισαγάγετε ένα component, δώστε μια τιμή.

npm install @kkwaenggwari/animated-chorus

Δύσκολες αλληλεπιδράσεις, έτοιμες.

Μετρημένο σε αυτή την έκδοση

Μία ετικέτα και τα δεδομένα σας

Το πρόγραμμα περιήγησης παίζει. Το React μένει ακίνητο.

Διακόψτε οτιδήποτε. Δεν πηδά ποτέ.

16 components, ομαδοποιημένα ανά δουλειά

Αριθμοί και κείμενο

Περιεχόμενο και μέγεθος

Επιλογή και σελιδοποίηση

Λίστες

Χειρονομίες

Επικαλύψεις

Πρόοδος

Μαζί

Το ίδιο import σε web και React Native

Ξεκινήστε σε δύο λεπτά

Αναζήτηση