Fluid transaction button

After reading «Family Values» by Benji Taylor, I had to recreate some of the core interactions described in the very popular article. Family, a self-custody crypto wallet for iOS is well-known for their delightful interactions. This fluid button animation is no exception to that.

The component was made using Tailwind CSS and Framer Motion. The challenge here was to make the transitions between states as smooth as possible by persisting the «transaction» label across states. Taylor calls this concept «Fluidity».