אנימציותחדש
אלמנטים במעגל
פריטים מסודרים במעגל ומסתובבים סביב המרכז בלי להתהפך. מתאים ללוגואים, אווטארים ואייקונים.
התאמה
color
accentColor
highlightColor
מבוסס על Circling Elements (MIT רישיון) · תנאי שימוש
עוד ב-Pro
לכל הרכיביםמאפיינים
10 מאפיינים| מאפיין | סוג | ברירת מחדל | תיאור |
|---|---|---|---|
| children | ReactNode | — | הפריטים שמסתובבים. |
| radius | number | 100 | רדיוס המעגל, בפיקסלים. |
| duration | number | 10 | זמן לסיבוב מלא, בשניות. |
| easing | string | "linear" | פונקציית ה-easing של הסיבוב ב-CSS. |
| direction | 'normal' | 'reverse' | "normal" | כיוון הסיבוב. |
| pauseOnHover | boolean | false | לעצור את הסיבוב במעבר עכבר. |
| color | string | "#ffffff" | הצבע הראשי. הילדים קוראים אותו דרך var(--circling-c1). |
| accentColor | string | "#525252" | הצבע השני. הילדים קוראים אותו דרך var(--circling-c2). |
| highlightColor | string | "#e5e5e5" | צבע הדגשה בהיר. הילדים קוראים אותו דרך var(--circling-c3). |
| className | string | — | מחלקות נוספות. |
תלויות
3 חבילות נדרשות
npm install motion clsx tailwind-merge