React · React Native · 16 கம்போனென்ட்கள்

கடினமான ஊடாடல்கள், முடிக்கப்பட்டவை.

Animated Chorus என்பது கையால் சரியாக அமைக்கக் கடினமான ஊடாடல்களுக்கான மோஷன் கம்போனென்ட்களின் தொகுப்பு: உருளும் எண்கள், ஸ்ட்ரீம் செய்யப்படும் உரை, அளவு மாறும் மாற்றீடுகள், sheet-கள், pager-கள், ஸ்வைப் செயல்கள், மாறியதை மட்டும் அனிமேட் செய்யும் பட்டியல்கள். ஒரே tag-உம் உங்கள் தரவும். Provider இல்லை, அமைப்பு இல்லை.

தொடங்குங்கள் கம்போனென்ட்களைப் பாருங்கள்

நிறுவுதல்

npm install @kkwaenggwari/animated-chorus

இந்த build-இல் அளக்கப்பட்டது

Chrome, 2026-09-28. ஒவ்வொரு நிபந்தனையும் மாதிரியும் செயல்திறன் வழிகாட்டியில் உள்ளன. இது எப்படி அளக்கப்பட்டது

28.0KB16 export-களுக்கும் KB gzip
முழு வலை நுழைவு, minify செய்யப்பட்டது. React மட்டுமே peer.
0அனிமேட் ஆகும்போது JS frame callback-கள்
ஒரு எண், ஒரு உயரம், ஒரு சிறப்பம்சம் சேர்ந்து மாறுகின்றன: 12 அனிமேஷன்களையும் உலாவி இயக்குகிறது.
1மதிப்பு மாற்றத்துக்கு ஒரு React commit
MotionNumber மதிப்பு மாறும்போது ரெண்டர் ஆகிறது, உருளும்போது ஒருபோதும் இல்லை.
11ஸ்ட்ரீம் செய்யப்பட்ட 3000 எழுத்துகளுக்கு React commit-கள்
MotionStream எழுத்துகளை நேரடியாகச் சேர்த்து, வினாடிக்குச் சில முறை React-க்குள் இணைக்கிறது.

01மிக எளிது

ஒரே tag-உம் உங்கள் தரவும்

ஒவ்வொரு கம்போனென்டும் தனியாக இயங்குகிறது: Provider, wrapper கம்போனென்ட், அமைப்பு அழைப்பு இல்லை. தொகுப்புகள் items, renderItem-ஐ எடுக்கின்றன; உங்கள் லேஅவுட், உரை, style-கள் உங்களுடையவையாகவே இருக்கின்றன.

ஒரு கம்போனென்டை import செய்து மதிப்பைக் கொடுங்கள். அதுவே முழு ஒருங்கிணைப்பு.
பட்டியல்கள், தாவல்கள், pager-கள் உங்கள் அரேயைப் படிக்கின்றன; key இயல்பாக 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 ரெண்டரும் செலவாவதில்லை.

12 அனிமேஷன்கள் சேர்ந்து இயங்கும்போது 0 JS frame callback-கள்.
மதிப்பு மாற்றத்துக்கு ஒரு React commit, ஃப்ரேமுக்கு ஒன்று அல்ல.
ஸ்ட்ரீம் செய்யப்பட்ட உரை: 3000 எழுத்துகளுக்கு 11 React commit-கள். கீழே உள்ள எடுத்துக்காட்டு தன் ரெண்டர்களைத் தானே எண்ணுகிறது.

எடுத்துக்காட்டு தயாராகிறது…

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மிக நிலையானது

எதையும் இடைமறியுங்கள். அது ஒருபோதும் தாவாது.

ஒவ்வொரு புதிய மதிப்பும் திரையில் தெரிவதிலிருந்து தொடங்குகிறது, spring-கள் தங்கள் வேகத்தை வைத்திருக்கின்றன; அதனால் வேகமான கிளிக்குகள், தரவு வெடிப்புகள், திசை மாற்றங்கள் வேண்டுமென்றே செய்தவை போலத் தெரிகின்றன. மோஷன் முடியும்போது எதுவும் இயங்கிக்கொண்டிருப்பதில்லை.

எண்கள் ஒருபோதும் பிளவுபடுவதில்லை: மீதமுள்ள இலக்கங்கள் உருளும்போதே நகர்கின்றன.
5 ms இடைவெளியில் 200 புதிய மதிப்புகள்: பிறகு மீதமுள்ள அனிமேஷன்கள் 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 கம்போனென்ட்கள், அவை செய்யும் பணியின்படி தொகுக்கப்பட்டவை

எண்களும் உரையும், அளவு மாறும் உள்ளடக்கம், தேர்வு, பட்டியல்கள், சைகைகள், overlay-கள், முன்னேற்றம். ஒவ்வொன்றுக்கும் பக்கத்தில் props கொண்ட நேரடிப் பணிமேசை உண்டு.

எல்லாக் கம்போனென்ட்களும்

ஒன்றாகச் சேர்த்து

பல கம்போனென்ட்களை இணைக்கும் முழுமையான திரைகள், ஒவ்வொன்றின் அமைப்புகளும் எடுத்துக்காட்டுக்கு வெளியே.

எல்லா எடுத்துக்காட்டுகளும்

வலையிலும் React Native-இலும் அதே import

Metro நேட்டிவ் செயலாக்கத்தையும் வலை bundler-கள் 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, spring-கள் பகுப்பாய்வு முறையில் மாதிரியெடுக்கப்படுகின்றன	நேட்டிவ் driver உடன் `Animated`
அகலமும் உயரமும்	Web Animations API	JS driver உடன் `Animated`, ஏனெனில் இது லேஅவுட்
ஸ்ட்ரீம் செய்யப்படும் உரை	எழுத்துகள் சேர்க்கப்பட்டு மங்கித் தோன்றுகின்றன; வினாடிக்குச் சில React ரெண்டர்கள்	உண்மையான `Text`, மங்கல் இல்லாமல் வெளிப்படுகிறது
Sheet-களும் zoom-உம்	மேல் அடுக்கில் நேட்டிவ் `dialog`	ஒளிபுகும் `Modal`; பின் பொத்தான் அதை மூடுகிறது

இரண்டு நிமிடங்களில் தொடங்குங்கள்

நிறுவுங்கள், ஒரு கம்போனென்டை import செய்யுங்கள், மதிப்பைக் கொடுங்கள்.

npm install @kkwaenggwari/animated-chorus

கடினமான ஊடாடல்கள், முடிக்கப்பட்டவை.

இந்த build-இல் அளக்கப்பட்டது

ஒரே tag-உம் உங்கள் தரவும்

உலாவி இயக்குகிறது. React அசையாமல் இருக்கிறது.

எதையும் இடைமறியுங்கள். அது ஒருபோதும் தாவாது.

16 கம்போனென்ட்கள், அவை செய்யும் பணியின்படி தொகுக்கப்பட்டவை

எண்களும் உரையும்

உள்ளடக்கமும் அளவும்

தேர்வும் பக்கமாற்றமும்

பட்டியல்கள்

சைகைகள்

Overlay-கள்

முன்னேற்றம்

ஒன்றாகச் சேர்த்து

வலையிலும் React Native-இலும் அதே import

இரண்டு நிமிடங்களில் தொடங்குங்கள்

தேடு