Motion Budget

Motion budget is the strict accounting system that limits how much animation your interface is allowed to spend. It measures cost in three currencies. First is raw performance measured in CPU cycles and battery drain on the device. Second is the attention economy of the user who only has so many cognitive resources before they bounce. Third is engineering time required to maintain all those custom curves and timings. In practice the budget forces you to define three to five motion durations, three easing curves, and a rule that every animation must communicate a state change or guide the users eye. You only animate transform and opacity. You avoid layout triggering properties at all costs. You limit concurrent animations to one primary movement with maybe one secondary support animation. The 2026 products that feel premium all operate inside tight motion budgets. The ones that feel chaotic and cheap have spent every last bit of their allowance and then some.

A motion budget is not loose inspiration or designer preference. It is not the collection of cool Framer prototypes that never get performance tested on mid-range Android. It is not the justification for adding parallax scrolling because it looked cool in a Webflow demo. It is not permission for every micro interaction to have its own unique overshoot curve because each designer had a different idea of what feels right. Those are the behaviors that destroy consistency, tank your Lighthouse scores, create accessibility issues for users who have set prefers-reduced-motion, and turn a daily driver into a distraction machine. The budget is the hard line that says this much and no more. It is documented in the design system, enforced in code review, and respected the same way you respect your brand color palette or type scale.

Look at how Figma tightened their motion budget for the 2026 FigJam release. They capped list item reveals at a 50 millisecond stagger for the first four items only. Anything below the fold waits for the user to scroll. When you drag a sticky note the only element that receives a transform is the note itself. All other interface chrome stays completely still. Their motion.short token at 110 milliseconds handles every button press and hover state across the entire app. The result is an app that feels responsive on both high end MacBooks and mid tier Windows laptops used by design students in Bangalore. User testing showed participants completing collaborative sessions 22 percent faster because they were not distracted by constant movement. The motion budget document lives inside their design system next to the component library and gets referenced in every handoff to engineering.

Another concrete example is the 2025 upgrade to Shopify's admin interface. Their previous version had independent animations for the sidebar, the top nav, the resource list, and the preview pane all fighting for attention at once. After adopting a strict motion budget they reduced the entire dashboard to three durations and two easings pulled from shared tokens. Switching between orders and products now uses a single 280 millisecond fade and slide on the content area only. The sidebar uses opacity alone when reduced motion is requested. Performance on Android tablets improved dramatically and their core web vitals scores jumped into the green. The design systems team created a motion playground in Storybook that lets engineers preview every token combination before merging any PR. This prevented budget creep and kept the entire admin feeling like one cohesive product instead of a collection of individually animated screens. Stripe took the same approach in their 2026 checkout flow where the only movement during card entry is a 120ms scale on the total amount while the rest of the form updates through opacity.

Apply this budget whenever your product will be used repeatedly by the same people on devices you do not control. This includes banking apps like the Revolut 2026 mobile experience that limits every transaction confirmation to a single 150 millisecond animation using scale and opacity. It includes project management tools like the updated Linear app, email clients, CRMs, and any interface where users form muscle memory and will notice when that memory is violated by inconsistent or excessive motion. Implement the budget as soon as you have more than two designers making motion decisions. Bake the tokens into your design system early. Reference them in every review. Test against prefers-reduced-motion and on throttled 3G networks with CPU at 4x slowdown. You should not use a formal motion budget when creating one-off marketing campaigns or brand films where the entire point is to break the rules for emotional impact. Apple still uses heavy scroll-driven animations on their product pages because the goal is to sell the dream not to create a daily driver. The distinction matters. Use the budget for tools people live in. Break it carefully for theater.

The practical way to stay inside the budget is to create a motion audit checklist. Does this animation use a named token. Does it animate only transform and opacity. Is only one thing moving. Does it respect reduced motion preferences by falling back to opacity. Can you cut it entirely without losing meaning. If it fails any of those questions it gets cut or simplified before it reaches production. Teams that live by this checklist ship products that feel calm on the first use and invisible on the hundredth. Teams that ignore it ship reels that look impressive in isolation and exhausting in reality. A tight motion budget forces better design decisions across the entire product. It makes you ask harder questions about what truly needs to move and why. The discipline pays off in performance numbers, user satisfaction scores, and fewer production bugs.

Build inside a strict motion budget or watch your users build their habits somewhere calmer.