نشانگر سفارشی

cursor-followانیمیشن

نشانگر و برچسبی که داخل یک ناحیه جای نشانگر سیستم را می‌گیرن، مناسب پیش‌نمایش محصول.

ماوس را روی این ناحیه بیاورید

نصب

  1. با CLI

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

    $ npx vibefarsi add cursor-follow
  2. نصب دستی

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

پراپ‌ها

پراپنوعپیش‌فرضتوضیح
labelReactNode-متن یا عنصر کنار نشانگر.
labelOffset{ x; y }{ x: 18, y: 14 }جابه‌جایی برچسب از نوک نشانگر.

نکته‌ها

  • روی لمس و اشاره‌گر درشت خاموش می‌مونه؛ فقط با ماوس ظاهر میشه.