Attention Management

When users keep missing your CTA or staring at decorative animations instead of the content that matters, this walks you through fixing visual hierarchy with motion. It's built around Disney animation principles, which sounds fancy but really just means one thing moves at a time, important stuff animates faster and bigger, and background elements stay calm. The troubleshooting checklist is solid, asking whether you have more than two things animating simultaneously (you shouldn't) and whether your hierarchy works even without motion. Includes a staggered timing pattern and a priority table mapping animation styles to content importance. Good for catching those moments when your beautifully animated background is accidentally more interesting than your signup button.

Install to Claude Code

npx -y skills add dylantarre/animation-principles --skill attention-management --agent claude-code