هاور آواتارها
avatar-hoverانیمیشنآواتاری که روش میرید بالا میپره و همسایههاش با شدت کمتر دنبالش میآن؛ موقع رفتن همه با یک فنر برمیگردن و اسم بالای آواتار فعال شناور میشه.
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add avatar-hoverنصب دستی
محتوای تب «کد» را در
components/animations/avatar-hover.tsxبگذارید. پیشنیاز: avatar.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { AvatarHover } from "@/components/animations/avatar-hover"23<AvatarHover people={[{ name: "سارا", src: "/avatars/sara.jpg" }, { name: "علی" }]} />پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| people | { name; src? }[] | - | افراد به ترتیب نمایش. |
| lift | number | 8 | پیکسل بالا رفتن آواتار فعال. |
| falloff | number | 0.45 | هر همسایه چه کسری از قبلی بالا بره. |
| size | "sm" | "md" | "lg" | "md" | اندازهی آواتار. |