Form Motion
Form interaction prioritizes clarity, feedback, state, focus and validation before visual motion. Movement may connect a control to its options or confirm a press, but must not reduce precision.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
Form Motion · motion explains one relationship
Purpose
Form interaction prioritizes clarity, feedback, state, focus and validation before visual motion. Movement may connect a control to its options or confirm a press, but must not reduce precision.
Use one quiet response per control and keep labels, values, errors and disabled states stable. Never move an input away from the pointer, animate errors so heavily they are hard to read or delay submission for flourish.
Keyboard and touch paths are native-equivalent, reduced motion is immediate, and focus never disappears during a morph. Motion supports state; it does not replace semantic state.
Source: packages/skills/patterns/form-motion.md