טקסטחדש
מילים מתחלפות
מילה בכותרת מתחלפת באחרות באנימציית קפיץ אות אחר אות. מתאים למסך הפתיחה.
התאמה
gradientFrom
gradientTo
backgroundColor
מבוסס על Text Rotate (MIT רישיון) · תנאי שימוש
עוד ב-Pro
לכל הרכיביםמאפיינים
17 מאפיינים| מאפיין | סוג | ברירת מחדל | תיאור |
|---|---|---|---|
| texts | string[] | — | רשימת מילים או ביטויים שמתחלפים. |
| rotationInterval | number | 2000 | כמה זמן כל מילה נשארת, במילישניות. |
| staggerDuration | number | 0 | השהיה בין אותיות, בשניות. |
| staggerFrom | 'first' | 'last' | 'center' | 'random' | number | "first" | מאיזו אות הגל מתחיל. |
| splitBy | 'characters' | 'words' | 'lines' | string | "characters" | איך לפצל את הטקסט: לפי אותיות, מילים או שורות. |
| loop | boolean | true | להתחיל מחדש אחרי המילה האחרונה. |
| auto | boolean | true | להחליף מילים אוטומטית. |
| animatePresenceMode | 'wait' | 'popLayout' | 'sync' | "wait" | האם המילה הישנה יוצאת לפני שהחדשה נכנסת. |
| initial / animate / exit | MotionProps | — | מצבי אנימציית כניסה ויציאה בפורמט Motion. |
| transition | Transition | "{ type: 'spring', damping: 25, stiffness: 300 }" | הגדרות קפיץ או תזמון. |
| mainClassName | string | — | מחלקות לקופסה החיצונית, למשל רקע. |
| splitLevelClassName | string | — | מחלקות לעוטף של כל מילה. |
| elementLevelClassName | string | — | מחלקות לכל אות. |
| onNext | (index: number) => void | — | נקרא כשהמילה מתחלפת. |
| gradientFrom | string | "#ffffff" | צבע האות הראשונה. הטקסט עובר בהדרגה לצבע סוף המעבר. |
| gradientTo | string | "#d4d4d8" | צבע האות האחרונה, סוף המעבר. |
| backgroundColor | string | "rgba(255,255,255,0.1)" | המילוי של התווית מאחורי המילה המתחלפת. |
תלויות
3 חבילות נדרשות
npm install motion clsx tailwind-merge