Motion budget

The idea

Treat motion like a spend, not a feature you either have or don't. A page has one signature moment, a handful of secondary interaction responses, and then restrained microinteraction and ambient motion underneath. Spending the whole budget on every component is how a page ends up feeling frantic instead of alive.

Spending it

1. Signature (spend once per page or section). The one gesture the page is remembered for — a hero morph, a scroll-driven wall, a deck that unpacks into a grid. Everything else defers to it.
2. Secondary (spend per interaction). Hover, press, expand, reorder — ordinary feedback for ordinary actions, using the shared springs and nothing more expressive than the surface deserves.
3. Micro and ambient (spend freely, but cheaply). Focus rings, small presence indicators, a slow ambient drift behind content. These should cost nothing to look at and nothing to compute.

Signs the budget is overspent

• Two or more surfaces on one screen independently claim to be the "signature" interaction.
• A list or grid runs per-item pointer effects at a size where the effect can't be seen individually — see [[card-density]].
• Entrance motion delays the content the user came for.
• Ambient background motion is fighting for attention with foreground reading.

Related

[[when-not-to-animate]], [[motion-hierarchy]], [[interaction-density]]