ืกืžื ื™ืProื—ื“ืฉ

ื–ืจืงื•ืจ

ื›ืชื ืื•ืจ ืจืš ืขื•ืงื‘ ืื—ืจื™ ื”ืกืžืŸ ื‘ืชื•ืš ื›ืจื˜ื™ืก ื•ืžืื™ืจ ืืช ื”ืžืกื’ืจืช ืฉืœื•.

ื”ืชืืžื”

fromColor
viaColor
toColor

ืžื‘ื•ืกืก ืขืœ Spotlight (MIT ืจื™ืฉื™ื•ืŸ) ยท ืชื ืื™ ืฉื™ืžื•ืฉ

ืžืืคื™ื™ื ื™ื

6 ืžืืคื™ื™ื ื™ื
ืžืืคื™ื™ืŸืกื•ื’ื‘ืจื™ืจืช ืžื—ื“ืœืชื™ืื•ืจ
sizenumber200ืงื•ื˜ืจ ื›ืชื ื”ืื•ืจ ื‘ืคื™ืงืกืœื™ื.
springOptionsSpringOptions"{ bounce: 0 }"ื”ื’ื“ืจื•ืช ืงืคื™ืฅ ืฉืœ Motion: ืื™ืš ื”ื›ืชื ืขื•ืงื‘ ืื—ืจื™ ื”ืกืžืŸ.
classNamestringโ€”ืžื—ืœืงื•ืช ื”ื›ืชื. ืืช ื”ืฆื‘ืขื™ื ืงื•ื‘ืขื™ื ืขื fromColor, viaColor ื•-toColor.
fromColorstring"#fafafa"ื”ืฆื‘ืข ื‘ืžืจื›ื– ื›ืชื ื”ืื•ืจ.
viaColorstring"#f4f4f5"ื”ืฆื‘ืข ื‘ืืžืฆืข ื”ื“ืจืš ืœืงืฆื”.
toColorstring"#e4e4e7"ื”ืฆื‘ืข ื‘ืงืฆื” ื”ืจืš, ืœืคื ื™ ืฉื”ืื•ืจ ื“ื•ืขืš.

ืชืœื•ื™ื•ืช

3 ื—ื‘ื™ืœื•ืช ื ื“ืจืฉื•ืช

npm install motion clsx tailwind-merge

ืจื›ื™ื‘ื™ื ื“ื•ืžื™ื

ืœื›ืœ ื”ืจื›ื™ื‘ื™ื