React · React Native · 16 مكوّنًا

التفاعلات الصعبة، جاهزة.

Animated Chorus مجموعة مكوّنات حركة للتفاعلات التي يصعب إتقانها يدويًا: أرقام تتدحرج، ونص متدفق، وتبديلات يتغيّر معها الحجم، ولوحات منبثقة، ومقلّبات صفحات، وإجراءات بالسحب، وقوائم لا تحرّك إلا ما تغيّر. وسم واحد وبياناتك. لا provider ولا إعداد.

ابدأ تصفّح المكوّنات

التثبيت

npm install @kkwaenggwari/animated-chorus

مقيس على هذا البناء

Chrome، 2026-09-28. كل الشروط والعيّنات في دليل الأداء. كيف قيس

28.0KBKB gzip لكل التصديرات الستة عشر
نقطة دخول الويب كاملة، مصغّرة. React هي التبعية النظيرة الوحيدة.
0استدعاءات إطارات JS أثناء الحركة
رقم وارتفاع وتمييز تتغيّر معًا: يشغّل المتصفح الحركات الـ 12 كلها.
1اعتماد React لكل تغيير في القيمة
يُعاد عرض MotionNumber حين تتغيّر القيمة، لا أثناء تدحرجها أبدًا.
11اعتمادات 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 استدعاء إطارات JS بينما تعمل 12 حركات معًا.
اعتماد React واحد لكل تغيير في القيمة، لا لكل إطار.
النص المتدفق: 11 اعتمادات 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 التنفيذ الأصلي، وتختار حزّامات الويب تنفيذ 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` مع المشغّل الأصلي
العرض والارتفاع	Web Animations API	`Animated` مع مشغّل JS، لأنه تخطيط
النص المتدفق	أحرف تُضاف وتظهر بالتدريج؛ بضع عمليات عرض React في الثانية	`Text` حقيقي، يظهر من دون تلاشٍ
اللوحات والتكبير	`dialog` أصلي في الطبقة العليا	`Modal` شفاف؛ يغلقه زر الرجوع

ابدأ في دقيقتين

ثبّت، واستورد مكوّنًا، ومرّر قيمة.

npm install @kkwaenggwari/animated-chorus

التفاعلات الصعبة، جاهزة.

مقيس على هذا البناء

وسم واحد وبياناتك

يشغّله المتصفح. ويبقى React ساكنًا.

قاطع أي شيء. لا شيء يقفز.

16 مكوّنًا، مجمّعة حسب المهمة

الأرقام والنصوص

المحتوى والحجم

الاختيار والصفحات

القوائم

الإيماءات

الطبقات العلوية

التقدّم

مجتمعة

الاستيراد نفسه على الويب وفي React Native

ابدأ في دقيقتين

بحث