מנהרת עיוות

כרטיס עומד בתוך מנהרת רשת תלת-ממדית, וקרני אור רצות לאורך הקירות.

התאמה

perspective100pxbeamsPerSide3beamSize5%beamDuration3.0sbeamDelayMin0.0sbeamDelayMax3.0s

beamColor

gridColor

מבוסס על Warp Background (MIT רישיון) · תנאי שימוש

10 מאפיינים

מאפיין	סוג	ברירת מחדל	תיאור
children	ReactNode	—	התוכן במרכז המנהרה, בדרך כלל כרטיס.
perspective	number	`100`	עומק הפרספקטיבה בפיקסלים. פחות זה מנהרה עמוקה יותר.
beamsPerSide	number	`3`	כמה קרניים בכל קיר.
beamSize	number	`5`	רוחב הקרן וצעד הרשת, באחוזים.
beamDuration	number	`3`	שניות שקרן חוצה קיר.
beamDelayMin	number	`0`	ההשהיה הקצרה ביותר לפני קרן, בשניות.
beamDelayMax	number	`3`	ההשהיה הארוכה ביותר לפני קרן, בשניות.
beamColor	string	`"rgba(255, 255, 255, 0.7)"`	צבע הקרניים.
gridColor	string	`"rgba(255, 255, 255, 0.08)"`	צבע קווי הרשת על הקירות.
className	string	—	מחלקות Tailwind לעוטף.

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

npm install motion clsx tailwind-merge