چرخ عدد
number-wheelانیمیشنحلقهی عمودی اعداد فارسی که تا مقدار هدف میچرخه و ستارهاش پر میشه.
۲٬۰۰۰
۲٬۱۰۰
۲٬۲۰۰
۲٬۳۰۰
۲٬۴۰۰
۲٬۵۰۰
۲٬۶۰۰
۲٬۷۰۰
۲٬۸۰۰
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add number-wheelنصب دستی
محتوای تب «کد» را در
components/animations/number-wheel.tsxبگذارید. کلیدفریم را هم بهglobals.cssاضافه کنید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { NumberWheel } from "@/components/animations/number-wheel"23<NumberWheel value={2400} step={100} />پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| value | number | - | مقدار نهایی. |
| step | number | 100 | گام بین ردیفها. |
| sideItemsCount | number | 2 | ردیفهای بالا و پایین هایلایت. |
| duration / delay | number | 1800 / 200 | میلیثانیه. |
| withStar | boolean | true | ستارهی پرشونده و جرقه در پایان. |