چرخ عدد

number-wheelانیمیشن

حلقه‌ی عمودی اعداد فارسی که تا مقدار هدف می‌چرخه و ستاره‌اش پر میشه.

نصب

  1. با CLI

    اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگی‌هاش را می‌نویسه.

    $ npx vibefarsi add number-wheel
  2. نصب دستی

    محتوای تب «کد» را در 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} />

پراپ‌ها

پراپنوعپیش‌فرضتوضیح
valuenumber-مقدار نهایی.
stepnumber100گام بین ردیف‌ها.
sideItemsCountnumber2ردیف‌های بالا و پایین هایلایت.
duration / delaynumber1800 / 200میلی‌ثانیه.
withStarbooleantrueستاره‌ی پرشونده و جرقه در پایان.