How it works
A finite state machine drives variants; `layout` smooths the width change; the check mark is drawn with pathLength.
Stateful Button Morph
idle → loading → success / error. Width, icon and colour morph as one continuous object.
★ showcaseMotionSVG
Performance
Width change is layout-animated (transform + scale correction), not animated `width`.
Accessibility & reduced motion
aria-live="polite" announces each state; the button is aria-disabled while busy.
Export
transition={{ type: 'spring', stiffness: 400, damping: 30, mass: 1 }}