motion-budget-discipline

name	motion-budget-discipline
description	Use when adding animation to a layout. Motion budget = total animation 'weight' on page. Over-budget = laggy and annoying.

Motion Budget Discipline

Motion budget: <8 animated elements visible at once. Subtle, intentional, brief. Editorial brands use motion sparingly; SaaS uses more.

Motion budget rules

1. Maximum 8 animated elements visible at once
2. Animations <600ms duration (longer = annoying)
3. No infinite loops on attention-critical elements
4. Pause animations on hover for content (reading)
5. Respect prefers-reduced-motion media query

Animation hierarchy

Tier 1 (always animate):

• Hover states (buttons, links)
• Focus rings (accessibility)
• Loading indicators
• Transitions on navigation

Tier 2 (animate when appropriate):

• Section reveal on scroll
• Image fade-in
• CTA pulse on entrance

Tier 3 (use sparingly):

• Parallax effects
• Marquee text
• Page transitions
• Decorative animations

Respecting accessibility

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01s !important;
    transition-duration: 0.01s !important;
    scroll-behavior: auto !important;
  }
}

Always include this. Some users have vestibular disorders triggered by motion.

Where this fits in the X3 empire

Motion budget rule across CardPrepAI.