Data Motion
Data animation should explain a change in value, order or selection. It is not atmosphere. Animate only after the final value is already semantically available.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
Data Motion · motion explains one relationship
Purpose
Data animation should explain a change in value, order or selection. It is not atmosphere. Animate only after the final value is already semantically available.
Use short number interpolation, bar width or meter progress when direction matters. Avoid constant chart animation, staggered dashboards, delayed readability and exaggerated counting that makes comparison harder.
Reduced motion resolves immediately. Preserve shared baselines, units and textual values, and keep live updates slow enough for users and assistive technology to understand.
Source: packages/skills/patterns/data-motion.md