Attention Management Skill

Attention Management

Direct user focus correctly using Disney's principles.

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

Issue: Multiple elements compete for attention Fix: One thing moves at a time. Animate the most important element; keep others still.

Timing

Issue: Everything animates at same speed Fix: Primary content: faster animation. Secondary: slower or delayed. Speed implies importance.

Exaggeration

Issue: Uniform motion across hierarchy Fix: Important elements get more dramatic animation. Background elements get subtle motion.

Anticipation

Issue: No buildup directs eyes Fix: Use anticipation to guide attention. A small movement can draw eyes before the main action.

Appeal

Issue: Wrong elements are visually interesting Fix: Make important elements the most visually appealing. Animation should enhance hierarchy, not fight it.

Quick Fixes

One animation at a time - Sequence, don't parallelize
Stagger by importance - Most important animates first
Reduce decorative motion - Background should be calm
Increase CTA animation contrast - Stands out from surroundings
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

| Priority | Animation Style | |----------|----------------| | Primary | Fast, prominent, potentially looping | | Secondary | Medium speed, one-time | | Tertiary | Slow, subtle, or static | | Background | Very slow or no animation |

Agent Skills: Attention Management

Install this agent skill to your local

Skill Files