Transaction status button
motion
layout
tailwind
react
Based on Family by Benji TaylorIn my first attempt the text had a "jelly" effect, particularly when animating between the "Analyzing" and "Success" states.
Thankfully I had recently read about how Motion's "magic" layout property works, which made it clear that this was caused by the text trying to transform from one string to the next.
The fix was simply to add a unique key to the text for each state, which ensures only the button magically transforms between states, while the label simply translates on the x axis and fades in and out.