Icons Badges

This breaks down Disney's 12 animation principles specifically for UI icons, badges, and status indicators. You get concrete timing recommendations (hover scales in 100-150ms, badge bounces in 300-400ms) and ready-to-use CSS for common patterns like bell ring animations, notification badge bounces, and status pulses. The principle-by-principle breakdown is genuinely helpful because it explains why a heart should squash and stretch on tap or why a bell needs anticipation before ringing. The timing guidance alone saves you from the usual trial and error. Best for when you want your micro-interactions to feel polished without over-engineering them.

Install to Claude Code

npx -y skills add dylantarre/animation-principles --skill icons-badges --agent claude-code