טקסטProחדש

חשיפה מתחת לחיתוך

אותיות או מילים עולות אחת אחרי השנייה מתחת לקו בלתי נראה, באנימציית קפיץ. מתאים למסך הפתיחה ולכותרות.

התאמה

staggerDuration0.200s

gradientFrom

gradientTo

מבוסס על Vertical Cut Reveal (MIT רישיון) · תנאי שימוש

14 מאפיינים

מאפיין	סוג	ברירת מחדל	תיאור
children	ReactNode	—	הטקסט שנחשף.
splitBy	'words' \| 'characters' \| 'lines' \| string	`"words"`	איך לפצל את הטקסט: לפי מילים, אותיות או שורות.
staggerDuration	number	`0.2`	השהיה בין חלקי הטקסט, בשניות.
staggerFrom	'first' \| 'last' \| 'center' \| 'random' \| number	`"first"`	מאיזו אות הגל מתחיל.
reverse	boolean	`false`	לרדת מלמעלה במקום לעלות מלמטה.
autoStart	boolean	`true`	להתחיל את האנימציה מיד בטעינה.
transition	AnimationOptions	`"{ type: 'spring', stiffness: 190, damping: 22 }"`	הגדרות קפיץ, אפשר להוסיף כאן השהיה.
containerClassName	string	—	מחלקות לאלמנט החיצוני.
wordLevelClassName	string	—	מחלקות לעוטף של כל מילה.
elementLevelClassName	string	—	מחלקות לכל אות או מילה.
onStart / onComplete	() => void	—	נקראים בתחילת האנימציה ובסופה.
ref	{ startAnimation(): void; reset(): void }	—	הפעלה ואיפוס ידניים של האנימציה, למשל בגלילה.
gradientFrom	string	`"#ffffff"`	צבע האות הראשונה. הטקסט עובר בהדרגה לצבע סוף המעבר.
gradientTo	string	`"#d4d4d8"`	צבע האות האחרונה, סוף המעבר.

3 חבילות נדרשות

npm install motion clsx tailwind-merge