معرفی شعاعی
radial-introانیمیشنآواتارهایی که از مرکز باز میشن، روی مدار مینشینن و بعد با حفظ راستایستایی میچرخن.
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add radial-introنصب دستی
محتوای تب «کد» را در
components/animations/radial-intro.tsxبگذارید. کلیدفریم را هم بهglobals.cssاضافه کنید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { RadialIntro } from "@/components/animations/radial-intro"23<RadialIntro items={[{ id: "1", name: "سارا", src: "/avatars/sara.jpg" }, { id: "2", name: "علی", src: "/avatars/ali.jpg" }, { id: "3", name: "مینا", src: "/avatars/mina.jpg" }, { id: "4", name: "رضا", src: "/avatars/reza.jpg" }, { id: "5", name: "نگار", src: "/avatars/negar.jpg" }]} />پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| items | { id; name; src }[] | - | آواتارها به ترتیب مدار. |
| stageSize / imageSize | number | 280 / 52 | قطر صحنه و آواتار. |
| duration | number | 28 | ثانیه برای یک دور کامل. |