אנימציותחדש
ריחוף
מנדנד בעדינות כל בלוק בשלושה ממדים, כאילו הוא תלוי באוויר. מחייה עטיפות, כרטיסים ואייקונים.
התאמה
color
accentColor
highlightColor
מבוסס על Float (MIT רישיון) · תנאי שימוש
עוד ב-Pro
לכל הרכיביםמאפיינים
9 מאפיינים| מאפיין | סוג | ברירת מחדל | תיאור |
|---|---|---|---|
| children | ReactNode | — | מה שמרחף. |
| speed | number | 0.5 | מהירות הנדנוד. |
| amplitude | [number, number, number] | "[10, 30, 30]" | טווח התנועה בצירים X, Y ו-Z, בפיקסלים. |
| rotationRange | [number, number, number] | "[15, 15, 7.5]" | טווח ההטיה בצירים X, Y ו-Z, במעלות. |
| timeOffset | number | 0 | הסטת פאזה. ערכים שונים מונעים מכמה בלוקים לזוז יחד. |
| color | string | "#ffffff" | הצבע הראשי. הילדים קוראים אותו דרך var(--float-c1). |
| accentColor | string | "#a3a3a3" | הצבע השני. הילדים קוראים אותו דרך var(--float-c2). |
| highlightColor | string | "#e5e5e5" | צבע הדגשה בהיר. הילדים קוראים אותו דרך var(--float-c3). |
| className | string | — | מחלקות נוספות. |
תלויות
3 חבילות נדרשות
npm install motion clsx tailwind-merge