אנימציותProחדש
מעגלים במסלול
אייקונים מסתובבים סביב מרכז במסלול אחד או יותר. נוח לאזור אינטגרציות.
התאמה
color
accentColor
highlightColor
pathColor
מבוסס על Orbiting Circles (MIT רישיון) · תנאי שימוש
מאפיינים
12 מאפיינים| מאפיין | סוג | ברירת מחדל | תיאור |
|---|---|---|---|
| children | ReactNode | — | אייקונים או תגים שנעים במסלול. |
| radius | number | 160 | רדיוס המסלול בפיקסלים. |
| duration | number | 20 | שניות לסיבוב מלא. |
| speed | number | 1 | מכפיל מהירות. 2 זה פי שניים מהר יותר. |
| iconSize | number | 30 | גודל פריט במסלול בפיקסלים. |
| reverse | boolean | false | לסובב נגד כיוון השעון. |
| path | boolean | true | להציג את קו המסלול. |
| color | string | "#ffffff" | הצבע הראשי. הילדים קוראים אותו דרך var(--orbit-c1). |
| accentColor | string | "#525252" | הצבע השני. הילדים קוראים אותו דרך var(--orbit-c2). |
| highlightColor | string | "#e5e5e5" | צבע הדגשה בהיר. הילדים קוראים אותו דרך var(--orbit-c3). |
| pathColor | string | "rgba(255, 255, 255, 0.1)" | צבע קו המסלול. |
| className | string | — | מחלקות לכל פריט במסלול. |
תלויות
2 חבילות נדרשות
npm install clsx tailwind-merge