טקסטProחדש
אותיות קובייה
במעבר עכבר כל אות מסתובבת כמו פאה של קובייה וחושפת את העותק שלה. מתאים לכותרות ולקישורי תפריט.
התאמה
gradientFrom
gradientTo
swapColor
מבוסס על Letter 3D Swap (MIT רישיון) · תנאי שימוש
מאפיינים
12 מאפיינים| מאפיין | סוג | ברירת מחדל | תיאור |
|---|---|---|---|
| children | ReactNode | — | הטקסט שיונפש. |
| rotateDirection | 'top' | 'right' | 'bottom' | 'left' | "right" | לאיזה כיוון האותיות מסתובבות. |
| staggerDuration | number | 0.05 | השהיה בין אותיות, בשניות. |
| staggerFrom | 'first' | 'last' | 'center' | 'random' | number | "first" | מאיזו אות הגל מתחיל. |
| transition | ValueAnimationTransition | AnimationOptions | "{ type: 'spring', damping: 30, stiffness: 300 }" | הגדרות קפיץ או תזמון. |
| as | ElementType | "p" | תגית ה-HTML של האלמנט החיצוני. |
| mainClassName | string | — | מחלקות לאלמנט החיצוני. |
| frontFaceClassName | string | — | מחלקות לפאה הקדמית. תנו לה את רקע הדף. |
| secondFaceClassName | string | — | מחלקות לפאה השנייה שמופיעה בסיבוב. |
| gradientFrom | string | "#ffffff" | צבע האות הראשונה. הטקסט עובר בהדרגה לצבע סוף המעבר. |
| gradientTo | string | "#d4d4d8" | צבע האות האחרונה, סוף המעבר. |
| swapColor | string | "rgba(255,255,255,0.6)" | צבע הפאה שמסתובבת אליך במעבר העכבר. |
תלויות
3 חבילות נדרשות
npm install motion clsx tailwind-merge