نوار متحرک
marqueeانیمیشننوار متحرک با حرکت پیوسته از چپ به راست، در جهت طبیعی فارسی.
راستچینتقویم شمسیارقام فارسیتومانIRANSansVazirmatnMCPTailwind
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add marqueeنصب دستی
محتوای تب «کد» را در
components/animations/marquee.tsxبگذارید. کلیدفریم را هم بهglobals.cssاضافه کنید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { Marquee } from "@/components/animations/marquee"23<Marquee duration={20}>4 {tags.map((t) => <Badge key={t}>{t}</Badge>)}5</Marquee>پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| duration | number | 30 | ثانیه برای یک دور. |
| gap | string | "1rem" | فاصلهی آیتمها. |