אנימציותProחדש
קרן מונפשת
פולס של אור נע לאורך קו בין שני אלמנטים. מתאים להצגת אינטגרציות וזרימת נתונים.
התאמה
pathColor
gradientStartColor
gradientStopColor
מבוסס על Animated Beam (MIT רישיון) · תנאי שימוש
מאפיינים
19 מאפיינים| מאפיין | סוג | ברירת מחדל | תיאור |
|---|---|---|---|
| containerRef | RefObject<HTMLElement | null> | — | הפניה למכל המשותף שבו הקרן מצוירת. |
| fromRef | RefObject<HTMLElement | null> | — | הפניה לאלמנט שממנו הקרן יוצאת. |
| toRef | RefObject<HTMLElement | null> | — | הפניה לאלמנט שאליו הקרן מגיעה. |
| curvature | number | 0 | עיקול הקו בפיקסלים. ערך שלילי מכופף למעלה. |
| duration | number | 5 | שניות למעבר אחד של האור. |
| delay | number | 0 | השהיה לפני ההתחלה, בשניות. |
| reverse | boolean | false | להריץ את האור בכיוון ההפוך. |
| pathColor | string | "#ffffff" | צבע הקו הקבוע. |
| pathWidth | number | 2 | עובי הקו בפיקסלים. |
| pathOpacity | number | 0.2 | שקיפות הקו הקבוע. |
| gradientStartColor | string | "#ffffff" | הצבע בראש האור הנע. |
| gradientStopColor | string | "#a1a1aa" | הצבע בזנב האור הנע. |
| repeat | number | "Infinity" | כמה פעמים לחזור. ברירת המחדל: אינסוף. |
| repeatDelay | number | 0 | הפסקה בין חזרות, בשניות. |
| startXOffset | number | 0 | היסט אופקי של ההתחלה, בפיקסלים. |
| startYOffset | number | 0 | היסט אנכי של ההתחלה, בפיקסלים. |
| endXOffset | number | 0 | היסט אופקי של הסוף, בפיקסלים. |
| endYOffset | number | 0 | היסט אנכי של הסוף, בפיקסלים. |
| className | string | — | מחלקות לשכבת ה-SVG. |
תלויות
3 חבילות נדרשות
npm install motion clsx tailwind-merge