نوار متحرک

marqueeانیمیشن

نوار متحرک با حرکت پیوسته از چپ به راست، در جهت طبیعی فارسی.

نصب

  1. با CLI

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

    $ npx vibefarsi add marquee
  2. نصب دستی

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

پراپ‌ها

پراپنوعپیش‌فرضتوضیح
durationnumber30ثانیه برای یک دور.
gapstring"1rem"فاصله‌ی آیتم‌ها.