Introduction
The Multi state badge example shows how to build a dynamic badge component that transitions smoothly between four different states: idle, processing, success, and error. Each state has its own icon, label, and custom animations that bring the badge to life.
This tutorial uses several APIs from Motion: the animate() function for creating smooth animations with spring physics and timing controls, the press() function for handling user interactions, the motionValue() function for reactive animation values, and the transform() utility for mapping values between ranges.