متن خمیده
curved-loopانیمیشنمارکی روی یک قوس که میتونید با کشیدن بکشیدش؛ جهت بعد از رها کردن از سرعت دست میآد.
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add curved-loopنصب دستی
محتوای تب «کد» را در
components/animations/curved-loop.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { CurvedLoop } from "@/components/animations/curved-loop"23<CurvedLoop text="وایبفارسی · راستچین · فارسی" curveAmount={120} />پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| text | string | - | متن مارکی. فاصلهی انتهایی خودکار اضافه میشه. |
| speed | number | 1.2 | پیکسل در هر فریم (روی ۶۰ فریم؛ با زمان مقیاس میشه تا روی هر نمایشگری یکسان باشه). |
| curveAmount | number | 80 | عمق قوس درجه دو؛ منفی یعنی قوس رو به بالا. |
| fontSize | number | 72 | اندازهی فونت در واحد viewBox (عرض ۱۴۴۰). |
| direction | "left" | "right" | "left" | جهت پیشفرض حرکت. |
| interactive | boolean | true | اجازهی کشیدن با اشارهگر. |