MotionNumber · MotionText

ऐसी संख्या जिसके अंक पहियों की तरह घूमते हैं, आने या जाने वाले अंकों सहित।

वेबReact Nativeसंख्याएँ और टेक्स्ट

आज़माएँ

उदाहरण तैयार हो रहा है…

JavaScript बंद है। नीचे का कोड पूरा उदाहरण है।

App.jsx

import { useState } from 'react';
import { MotionNumber, MotionText, motionTokens } from '@kkwaenggwari/animated-chorus';
import './styles.css';

const formats = {
  plain: {},
  currency: { intl: true, locale: 'en-US', format: { style: 'currency', currency: 'USD' } },
  // Basis points: every preset and every ±1 step shows a different percentage.
  percent: { format: (value) => `${(value / 100).toFixed(2)}%` },
};

const presets = [9, 10, 999, 1000, 12480, 98765];

export default function App({
  mode = 'roll',
  direction = 'auto',
  format = 'currency',
  stagger = 40,
  spring = 'default',
}) {
  const [value, setValue] = useState(1000);
  const [trend, setTrend] = useState('Ready');

  const change = (next) => {
    setTrend(next > value ? 'Rising' : next < value ? 'Falling' : 'Same value');
    setValue(next);
  };

  return (
    <div className="lab">
      <MotionNumber
        className="value"
        value={value}
        mode={mode}
        direction={direction}
        stagger={stagger}
        transition={motionTokens.spring[spring]}
        {...formats[format]}
      />
      <MotionText className="trend">{trend}</MotionText>
      <div className="presets">
        {presets.map((preset) => (
          <button key={preset} onClick={() => change(preset)}>
            {preset}
          </button>
        ))}
      </div>
      <div className="steps">
        <button onClick={() => change(value - 1)}>−1</button>
        <button onClick={() => change(value + 1)}>+1</button>
        <button onClick={() => change(value * 10)}>×10</button>
        <button onClick={() => change(Math.round(value / 10))}>÷10</button>
      </div>
    </div>
  );
}

styles.css

.lab {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 32px 20px 28px;
}

.value {
  font:
    800 clamp(44px, 11vw, 80px)/1.05 system-ui,
    sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: #0e2e24;
}

.trend {
  padding: 4px 12px;
  border-radius: 999px;
  background: #eaf6f0;
  color: #176b52;
  font-weight: 650;
  font-size: 14px;
}

.presets,
.steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.presets button,
.steps button {
  min-width: 56px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #fff;
  font:
    600 15px system-ui,
    sans-serif;
  font-variant-numeric: tabular-nums;
  color: #0e2e24;
  cursor: pointer;
}

.steps button {
  background: #f4faf7;
}

.presets button:hover,
.steps button:hover {
  border-color: #176b52;
}

सबसे छोटा इस्तेमाल

Total.jsx

<MotionNumber value={count} />
<MotionNumber value={total} mode="roll" intl locale="en-US"
  format={{ style: 'currency', currency: 'USD' }} />
<MotionText>{status}</MotionText>

यह आपके लिए क्या संभालता है

हासिल: 999 → 1,000 हर बदले अंक को एक ही दिशा में घुमाता है, ओडोमीटर की तरह।
आने या जाने वाले अंक उछलने के बजाय अपने कॉलम में घूमकर आते या जाते हैं।
विभाजक, चिह्न और मुद्रा चिह्न अपने अंक के साथ उभरते और फीके होते हैं।
बाक़ी अंक घूमते हुए अपनी नई जगह पर खिसकते हैं, इसलिए संख्या कभी नहीं टूटती।
गति के बीच नया मान ठीक वहीं से आगे बढ़ता है जो स्क्रीन पर है।
फ़ॉर्मेटिंग के लिए Intl कभी ज़रूरी नहीं: टेक्स्ट या format फ़ंक्शन दें, या intl से चुनें।

इसके लिए इस्तेमाल करें

आइटम जुड़ने पर बदलता कार्ट का कुल।
लाइव काउंटर या स्कोर।
हर कुछ सेकंड में ताज़ा होने वाला डैशबोर्ड आँकड़ा।

Props

`MotionNumber`

Prop	टाइप	डिफ़ॉल्ट	विवरण
`value`	`number \| bigint \| string`	`—`अनिवार्य	संख्या, या कॉल करने वाले द्वारा फ़ॉर्मेट किया संख्यात्मक टेक्स्ट।
`mode`	`'replace' \| 'roll'`	`'replace'`	`replace` हर बदले अंक को एक क़दम हिलाता है; `roll` बीच के अंकों से गुज़रता है।
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	`auto` आकार के बदलाव का पालन करता है ताकि हासिल एक दिशा में घूमें; `digit` हर अंक की अलग तुलना करता है।
`stagger`	`number`	`45`	बदले अंकों के बीच मिलीसेकंड, इकाई से बाहर की ओर। पूरी लहर सीमित है।
`format`	`(value) => string \| Intl.NumberFormatOptions`		दिखाने का टेक्स्ट लौटाने वाला फ़ंक्शन, या `Intl.NumberFormat` विकल्प (`intl` के साथ)।
`intl`	`boolean`	`false`	बिल्ट-इन `Intl.NumberFormat` इस्तेमाल करें। डिफ़ॉल्ट रूप से बंद, ताकि किसी रनटाइम को `Intl` न चाहिए।
`locale`	`string \| string[]`		`intl` के लिए लोकेल।
`prefix`	`string`		संख्या से पहले का टेक्स्ट।
`suffix`	`string`		संख्या के बाद का टेक्स्ट।
`transition`	`Transition`	`spring`	timing वक्र `{ duration, easing }` या स्प्रिंग `{ tempo: 'spring', spring }`। रुकने पर स्प्रिंग अपनी गति बनाए रखते हैं।
`onMotionComplete`	`(value) => void`		अंक ठहरने पर मान के साथ चलता है।

`MotionText`

Prop	टाइप	डिफ़ॉल्ट	विवरण
`children`	`ReactNode`		दिखाने का टेक्स्ट।
`as`	`element`	`'span'`	रेंडर होने वाला एलिमेंट।
`transition`	`Transition`	`spring`	timing वक्र `{ duration, easing }` या स्प्रिंग `{ tempo: 'spring', spring }`। रुकने पर स्प्रिंग अपनी गति बनाए रखते हैं।
`onMotionComplete`	`(text) => void`		गति ठहरने पर चलता है।

बाक़ी props रेंडर होने वाले एलिमेंट को जाते हैं, इसलिए className, style और इवेंट हैंडलर सामान्य रूप से काम करते हैं।

वेब और React Native

वेब पर हर अंक Web Animations API से चलने वाला अक्षरों का छोटा ढेर है, और टेक्स्ट चुना जा सकता है। MotionText कोई भी टेक्स्ट एनिमेट करता है: संख्यात्मक टेक्स्ट अंक-दर-अंक घूमता है, बाक़ी टेक्स्ट स्वैप होता है।

React Native में संख्या लेआउट, चयन और सुलभता के लिए असली Text रहती है, लपेटने और numberOfLines सहित; अक्षर नेटिव driver पर चलते हैं।