React · React Native · 16 רכיבים

אינטראקציות קשות, מוכנות.

Animated Chorus הוא אוסף רכיבי תנועה לאינטראקציות שקשה לעשות נכון ביד: מספרים מתגלגלים, טקסט בזרימה, החלפות שמשנות גודל, גיליונות, מחליפי עמודים, פעולות החלקה ורשימות שמנפישות רק את מה שהשתנה. תגית אחת והנתונים שלכם. בלי provider, בלי הגדרות.

מתחילים לעיון ברכיבים

התקנה

npm install @kkwaenggwari/animated-chorus

נמדד על הבנייה הזו

Chrome, 2026-09-28. כל התנאים והדגימות נמצאים במדריך הביצועים. איך נמדד

28.0KBKB gzip לכל 16 ה־exports
כל נקודת הכניסה לאינטרנט, מוקטנת. React היא תלות ה־peer היחידה.
0callbacks של פריים ב־JS בזמן אנימציה
מספר, גובה והדגשה משתנים יחד: הדפדפן מנגן את כל 12 האנימציות.
1commit של React לכל שינוי ערך
MotionNumber מתרנדר כשהערך משתנה, אף פעם לא בזמן שהוא מתגלגל.
11commits של React ל־3000 תווים בזרימה
MotionStream מוסיף תווים ישירות ומכניס אותם ל־React כמה פעמים בשנייה.

01הכי פשוט

תגית אחת והנתונים שלכם

כל רכיב עובד לבד: בלי provider, רכיב עוטף או קריאת הגדרה. אוספים מקבלים items ו־renderItem, והפריסה, הטקסטים והסגנונות נשארים שלכם.

ייבאו רכיב אחד והעבירו ערך. זו כל האינטגרציה.
רשימות, לשוניות ומחליפי עמודים קוראים את המערך שלכם; המפתחות הם 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} />;
```

שישה רכיבים חיים, ושורת הקוד האחת שמאחורי כל אחד.

מכין את הדוגמה…

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 Animations API, כך שמספר מתגלגל או לוח שמשנה גודל לא עולים JavaScript לפריים ולא רינדור React בזמן התנועה.

0 callbacks של פריים ב־JS בזמן ש־12 אנימציות רצות יחד.
commit אחד של React לכל שינוי ערך, לא אחד לכל פריים.
טקסט בזרימה: 11 commits של React ל־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 רכיבים, מקובצים לפי התפקיד שלהם

מספרים וטקסט, תוכן שמשנה גודל, בחירה, רשימות, מחוות, שכבות־על והתקדמות. לכל אחד יש שולחן עבודה חי עם ה־props שלו בצד.

כל הרכיבים

ביחד

מסכים שלמים שמשלבים כמה רכיבים, כל אחד עם ההגדרות שלו מחוץ לדוגמה.

כל הדוגמאות

אותו ייבוא באינטרנט וב־React Native

Metro בוחר את המימוש הנייטיב ו־bundlers של אינטרנט בוחרים את מימוש ה־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} />
    </>
  );
}

חלק	אינטרנט	React Native
Transform ו־opacity	Web Animations API, קפיצים שנדגמים אנליטית	`Animated` עם ה־driver הנייטיב
רוחב וגובה	Web Animations API	`Animated` עם ה־driver של JS, כי זו פריסה
טקסט בזרימה	תווים שנוספים ומופיעים בהדרגה; כמה רינדורים של React בשנייה	`Text` אמיתי, נחשף בלי דעיכה
גיליונות וזום	`dialog` נייטיב בשכבה העליונה	`Modal` שקוף; כפתור החזרה סוגר אותו

מתחילים בשתי דקות

מתקינים, מייבאים רכיב אחד, מעבירים ערך.

npm install @kkwaenggwari/animated-chorus

אינטראקציות קשות, מוכנות.

נמדד על הבנייה הזו

תגית אחת והנתונים שלכם

הדפדפן מנגן. React נשאר במקום.

הפריעו לכל דבר. שום דבר לא קופץ.

16 רכיבים, מקובצים לפי התפקיד שלהם

מספרים וטקסט

תוכן וגודל

בחירה ודפדוף

רשימות

מחוות

שכבות־על

התקדמות

ביחד

אותו ייבוא באינטרנט וב־React Native

מתחילים בשתי דקות

חיפוש