טקסטחדש
אפקט טקסט
הטקסט מופיע מילה אחר מילה או אות אחר אות: מטשטוש, הגדלה או החלקה. חמישה סגנונות מוכנים.
התאמה
gradientFrom
gradientTo
מבוסס על Text Effect (MIT רישיון) · תנאי שימוש
עוד ב-Pro
לכל הרכיביםמאפיינים
14 מאפיינים| מאפיין | סוג | ברירת מחדל | תיאור |
|---|---|---|---|
| children | string | "Build something people remember" | הטקסט שמופיע. |
| per | 'word' | 'char' | 'line' | "word" | איך לחלק: לפי מילים, אותיות או שורות. |
| preset | 'blur' | 'fade-in-blur' | 'scale' | 'fade' | 'slide' | "fade" | סגנון הופעה מוכן. |
| delay | number | 0 | השהיה לפני ההתחלה, בשניות. |
| speedReveal | number | 1 | באיזו מהירות החלקים מופיעים זה אחרי זה. |
| speedSegment | number | 1 | באיזו מהירות חלק אחד מופיע. |
| trigger | boolean | true | להציג את הטקסט. false מסתיר אותו באנימציה. |
| as | keyof JSX.IntrinsicElements | "p" | תגית ה-HTML של העוטף. |
| variants | { container?: Variants; item?: Variants } | — | וריאנטים משלכם של Motion במקום פריסט. |
| segmentWrapperClassName | string | — | מחלקות לעוטף של כל חלק. |
| onAnimationComplete | () => void | — | נקרא כשההופעה מסתיימת. |
| className | string | — | מחלקות Tailwind לעוטף. |
| gradientFrom | string | "#ffffff" | צבע החלק הראשון של הטקסט. הטקסט עובר בהדרגה לצבע סוף המעבר. |
| gradientTo | string | "#d4d4d8" | צבע החלק האחרון, סוף המעבר. |
תלויות
3 חבילות נדרשות
npm install motion clsx tailwind-merge