Attention Management

Problem Indicators

• Users miss important content
• Decorative elements steal focus
• CTAs don't stand out
• Users look at wrong things first
• Information hierarchy is unclear

Diagnosis by Principle

Staging

Timing

Exaggeration

Anticipation

Appeal

Quick Fixes

1. One animation at a time - Sequence, don't parallelize
2. Stagger by importance - Most important animates first
3. Reduce decorative motion - Background should be calm
4. Increase CTA animation contrast - Stands out from surroundings
5. Use motion to guide reading order - Top-to-bottom, left-to-right

Troubleshooting Checklist

• What do users look at first? (Eye tracking or testing)
• Does animation sequence match importance hierarchy?
• Are decorative animations subtle enough?
• Does primary CTA have strongest motion?
• Count simultaneous animations (should be 1-2)
• Test: Hide animation—does hierarchy still work?
• Is motion guiding or distracting?
• Does stillness create emphasis where needed?

Code Pattern

/* Stagger by importance */
.hero-title {
  animation: fadeInUp 400ms ease-out;
}

.hero-subtitle {
  animation: fadeInUp 400ms ease-out 100ms backwards;
}

.hero-cta {
  animation: fadeInUp 400ms ease-out 200ms backwards,
             pulse 2s ease-in-out 1s infinite;
}

/* De-emphasize background */
.background-element {
  animation: subtleDrift 20s linear infinite;
  opacity: 0.3;
}

Hierarchy Through Motion