ืจื›ื™ื‘ื™ืื—ื“ืฉ

ืขืจื™ืžื” ืฉื ืคืจืฉืช ืœืจืฉื™ืžื”

ื›ืจื˜ื™ืกื™ื ืžื•ื ื—ื™ื ื‘ืขืจื™ืžื”, ื ืคืจืฉื™ื ืœืขืžื•ื“ื”, ื’ื•ืœืœื™ื ืœืžื˜ื” ื•ื—ื•ื–ืจื™ื ื‘ืงืคื™ืฅ. ื”ืœื•ืœืื” ื—ื•ื–ืจืช ืžืขืฆืžื”, ืžืชืื™ื ืœืคื™ื“ ื”ืชืจืื•ืช.

ื”ืชืืžื”

accentColor
secondaryColor
highlightColor

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

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

12 ืžืืคื™ื™ื ื™ื
ืžืืคื™ื™ืŸืกื•ื’ื‘ืจื™ืจืช ืžื—ื“ืœืชื™ืื•ืจ
childrenReactNodeโ€”ื›ืจื˜ื™ืกื™ ื”ืจืฉื™ืžื”, ืœืžืฉืœ ื”ืชืจืื•ืช.
stackGapnumber20ื”ื–ื–ื” ื‘ื™ืŸ ื”ื›ืจื˜ื™ืกื™ื ื‘ืขืจื™ืžื” ื‘ืคื™ืงืกืœื™ื.
columnGapnumber85ืžืจื—ืง ื‘ื™ืŸ ื”ื›ืจื˜ื™ืกื™ื ื‘ืขืžื•ื“ื” ื‘ืคื™ืงืกืœื™ื.
scaleFactornumber0.05ื‘ื›ืžื” ื›ืœ ื›ืจื˜ื™ืก ื”ื‘ื ื‘ืขืจื™ืžื” ื’ื“ื•ืœ ื™ื•ืชืจ.
scrollDownDurationnumber5ื›ืžื” ืฉื ื™ื•ืช ื”ืขืžื•ื“ื” ื’ื•ืœืœืช ืœืžื˜ื”.
formationDurationnumber1ื›ืžื” ืฉื ื™ื•ืช ื”ืขืจื™ืžื” ื ืคืจืฉืช ืœืขืžื•ื“ื”.
pauseDurationnumber600ืžื ื•ื—ื” ื‘ืขืจื™ืžื” ืœืคื ื™ ื›ืœ ืกื‘ื‘ ื‘ืžื™ืœื™ืฉื ื™ื•ืช.
visibleItemsnumber4ื›ืžื” ื›ืจื˜ื™ืกื™ื ื ืจืื™ื ื‘ืขืจื™ืžื”.
accentColorstring"#ffffff"ื”ืฆื‘ืข ื”ืจืืฉื™. ื”ื›ืจื˜ื™ืกื™ื ืงื•ืจืื™ื ืื•ืชื• ื›-var(--stacked-accent); ื‘ื”ื“ื’ืžื” ื”ื•ื ืฆื•ื‘ืข ืืช ื”ืจืงืข, ื”ืžืกื’ืจืช ื•ืขื™ื’ื•ืœ ื”ืกืžืœ.
secondaryColorstring"#a3a3a3"ื”ืฆื‘ืข ื”ืฉื ื™, var(--stacked-secondary). ื‘ื”ื“ื’ืžื” ื”ื•ื ืžืกื™ื™ื ืืช ืžืขื‘ืจ ื”ืฆื‘ืข ืฉืœ ืขื™ื’ื•ืœ ื”ืกืžืœ.
highlightColorstring"#ffffff"ื”ื“ื’ืฉื” ื‘ื”ื™ืจื”, var(--stacked-highlight). ื‘ื”ื“ื’ืžื” ื”ื•ื ืฆื•ื‘ืข ืืช ื”ืกืžืœื™ื.
classNamestringโ€”ืžื—ืœืงื•ืช ื ื•ืกืคื•ืช.

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

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

npm install motion clsx tailwind-merge

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

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