ظهور رقمها
number-popانیمیشنهر بار عدد عوض میشه، رقمهاش یکییکی از سمت یکان با کمی تاری بالا میآن.
تومان
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add number-popنصب دستی
محتوای تب «کد» را در
components/animations/number-pop.tsxبگذارید. کلیدفریم را هم بهglobals.cssاضافه کنید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { NumberPop } from "@/components/animations/number-pop"23<NumberPop value={price} unit="تومان" className="text-3xl font-bold" />پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| value | number | - | عدد فعلی. با هر تغییر، رقمها دوباره ظاهر میشن. |
| format | (n) => string | faNumber | قالب خودِ عدد؛ پیشفرض اعداد فارسی با جداکنندهی هزارگان. |
| stagger | number | 30 | فاصلهی زمانی بین رقمهای همسایه به میلیثانیه. |
| from | "bottom" | "top" | "bottom" | رقمها از پایین بیان یا از بالا. |
| unit | ReactNode | - | واحد، بیرون از جعبهی عدد تا با تغییر تعداد رقمها جابهجا نشه. |
نکتهها
- برخلاف شمارنده و شمارهانداز که مقدار را میشمرن، اینجا فقط ظاهر شدن عدد جدید انیمیت میشه، پس برای قیمت و موجودی که ناگهانی عوض میشن مناسبتره.