Product Interaction Density
Product interfaces need a lower motion density than showcase pages because users repeat actions and maintain focus for longer. Assign motion to meaningful state changes, not every control.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
Product Interaction Density · attention follows consequence
Purpose
Product interfaces need a lower motion density than showcase pages because users repeat actions and maintain focus for longer. Assign motion to meaningful state changes, not every control.
One segmented indicator, one tactile slider or one inline morph in a region is usually enough. Avoid simultaneous animated backgrounds, cursor followers, counting KPIs and springing form controls around a task.
Test repeated use, keyboard flow, touch precision and reduced motion. If the interaction becomes tiring after the tenth use, reduce amplitude, duration or frequency rather than adding presets.
Source: packages/skills/patterns/product-interaction-density.md