لودر ماتریسی
matrix-loaderانیمیشنلودر ریز ۴×۴ که به جای چرخیدن، آروم میتپه؛ پنج الگو دارد و scan مثل خواندن از راست به چپ میره.
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add matrix-loaderنصب دستی
محتوای تب «کد» را در
components/animations/matrix-loader.tsxبگذارید. کلیدفریم را هم بهglobals.cssاضافه کنید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { MatrixLoader } from "@/components/animations/matrix-loader"23<MatrixLoader variant="scan" />4<MatrixLoader variant="orbit" rounded dot={4} />پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| variant | "scan" | "twinkle" | "orbit" | "pulse" | "wave" | "scan" | الگوی حرکت؛ فقط جدول تأخیرها فرق میکنه. |
| rounded | boolean | false | چهار گوشه حذف بشن. |
| dot | number | 3 | اندازهی نقطه و فاصله به پیکسل. |
| cycle | number | 1200 | میلیثانیهی یک دور کامل. |