ื˜ื•ืขื ื™ืื—ื“ืฉ

ื˜ื•ืขืŸ ืจืฉืช

ืจืฉืช 3ร—3 ื›ืžื• ื ื•ืจื™ืช ื‘ืžื›ืฉื™ืจ. ื™ื•ืชืจ ืžืืจื‘ืขื™ื ืชื‘ื ื™ื•ืช ืžื•ื›ื ื•ืช ื•ืฉืœื•ืฉื” ืžืฆื‘ื™ ื”ื‘ื”ื•ื‘.

ื”ืชืืžื”

color

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

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

11 ืžืืคื™ื™ื ื™ื
ืžืืคื™ื™ืŸืกื•ื’ื‘ืจื™ืจืช ืžื—ื“ืœืชื™ืื•ืจ
patternPresetPattern | GridMatrix"plus-hollow"ืชื‘ื ื™ืช ืฉืœ 9 ืชืื™ื: ืžื•ื›ื ื” ืื• ืžื˜ืจื™ืฆื” 3ร—3 ืžืฉืœืš.
mode'pulse' | 'sequence' | 'stagger'"pulse"ืื™ืš ื”ืชืื™ื ืžื”ื‘ื”ื‘ื™ื: ื™ื—ื“, ื‘ืจืฆืฃ ืชื‘ื ื™ื•ืช ืื• ื›ื’ืœ.
sequenceArray<PresetPattern | GridMatrix>โ€”ืชื‘ื ื™ื•ืช ืœืคื™ ื”ืกื“ืจ ืœืžืฆื‘ sequence.
speed'slow' | 'normal' | 'fast'"normal"ืžื”ื™ืจื•ืช ื”ืื ื™ืžืฆื™ื”.
size'sm' | 'md' | 'lg' | 'xl' | number"md"ื’ื•ื“ืœ ื”ื˜ื•ืขืŸ ืื• ืžืกืคืจ ื‘ืคื™ืงืกืœื™ื.
colorstring"white"ืฆื‘ืข ื”ืชืื™ื: white ืื• ื›ืœ ืฆื‘ืข CSS.
gapnumber0ืจื•ื•ื— ื‘ื™ืŸ ื”ืชืื™ื ื‘ืคื™ืงืกืœื™ื.
blurnumber0ื˜ืฉื˜ื•ืฉ ื‘ืคื™ืงืกืœื™ื ืœื–ื•ื”ืจ ืจืš.
roundedbooleanfalseืชืื™ื ืขื’ื•ืœื™ื ื‘ืžืงื•ื ืžืจื•ื‘ืขื™ื.
staticbooleanfalseืœื”ืฆื™ื’ ืืช ื”ืชื‘ื ื™ืช ื‘ืœื™ ืื ื™ืžืฆื™ื”.
classNamestringโ€”ืžื—ืœืงื•ืช ืœืขื•ื˜ืฃ.

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

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

npm install motion clsx tailwind-merge

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

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