Workflow Motion
Motion should clarify state, continuity, and destination in product workflows.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
Resting state
Intentional change
Workflow Motion · motion explains one relationship
Purpose
Motion should clarify state, continuity, and destination in product workflows.
Guidance
Use transforms/opacity, preserve object identity, keep stacks capped, clean timers/listeners, and let native semantics carry meaning.
Accessibility and anti-patterns
Honor reduced motion and avoid bounce, stagger-on-every-keystroke, per-frame React state, or decorative motion that competes with the task.
Source: packages/skills/patterns/workflow-motion.md