PG Gonni

Based on this Threads postby Ozan Öztaskiran.The original example was a more typical switch, with a checkmark icon that moves up and down based on the selection.
I left a comment suggesting that the switch use a specific icon for each direction for added clarity.
I also wanted to use this as an opportunity to make use of clip-path, which I learned about in one of the earlier modules of Emil Kowalski's Animations for the Web, while also trying to learn to use Motion's useTransform function.
Finally, I decided to animate the icons when the state switches, which added complexity to the code but also a nice little flair.While I like the final effect, I'm not super happy with all the magic numbers I'm using to make the clip-path move smoothly between the two states.

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.