حلقهی متن
text-loopانیمیشنمتن روی مسیر SVG (موج، قوس، دایره، …) میچرخه؛ نوار رنگی مسیر را نشان میده و با هاور متوقف میشه.
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add text-loopنصب دستی
محتوای تب «کد» را در
components/animations/text-loop.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { TextLoop } from "@/components/animations/text-loop"23<TextLoop text="وایبفارسی" shape="wave" ribbon />پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| text / separator | string | "وایبفارسی" / "·" | متن و جداکنندهی تکرار. |
| shape | "wave" | "line" | "arch" | "circle" | "infinity" | "wave" | شکل مسیر. یا path سفارشی. |
| speed | number | 90 | پیکسل بر ثانیه روی مسیر. |
| ribbon / ribbonWidth | boolean / number | true / 64 | نوار stroke-brand پشت متن. |
| fontSize | number | 36 | اندازهی فونت در واحد viewBox؛ کمی تنظیم میشه تا تکرارها دقیقاً مسیر را پر کنن. |
| pauseOnHover | boolean | true | با هاور متوقف میشه. |