نشانگر سفارشی
cursor-followانیمیشننشانگر و برچسبی که داخل یک ناحیه جای نشانگر سیستم را میگیرن، مناسب پیشنمایش محصول.
ماوس را روی این ناحیه بیاورید
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add cursor-followنصب دستی
محتوای تب «کد» را در
components/animations/cursor-follow.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { CursorFollow } from "@/components/animations/cursor-follow"23<CursorFollow label="مشاهده" className="h-48">4 <div className="flex h-full items-center justify-center">ماوس را اینجا بیاورید</div>5</CursorFollow>پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| label | ReactNode | - | متن یا عنصر کنار نشانگر. |
| labelOffset | { x; y } | { x: 18, y: 14 } | جابهجایی برچسب از نوک نشانگر. |
نکتهها
- روی لمس و اشارهگر درشت خاموش میمونه؛ فقط با ماوس ظاهر میشه.