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-এ চলে।