What is icons-badges?

This Claude skill specializes in enhancing UI/UX through professional micro-interactions and animation principles. By applying Disney's 12 animation principles—such as Squash & Stretch, Anticipation, and Follow Through—to small interface elements like icons, badges, and avatars, it helps developers and designers create a more responsive, engaging, and personality-driven user experience using optimized CSS.

When should I use icons-badges?

icons-badges is useful in the following scenarios: • Interactive Feedback: Implementing tactile 'Squash & Stretch' effects on buttons and icons to provide immediate, satisfying visual confirmation of user actions. • Attention-Grabbing Notifications: Creating dynamic badge animations with 'Anticipation' and 'Bounce' effects to highlight new alerts or messages effectively. • Smooth State Transitions: Using 'Ease In & Ease Out' and 'Arcs' to ensure menu icons and navigation elements transition fluidly between different states. • Brand Personality & Delight: Adding subtle 'Secondary Actions' like pulsing glows or rhythmic rotations to status indicators and celebratory icons to increase user engagement. • Visual Hierarchy & Staging: Utilizing animation to guide user focus toward important UI elements, ensuring critical status updates are noticed through purposeful motion.

name	icons-badges
description	Use when animating icons, badges, avatars, status indicators, or small visual elements to add personality and feedback

Icon & Badge Animation Principles

Apply Disney's 12 principles to small UI elements for personality and meaningful feedback.

Principles Applied to Icons

1. Squash & Stretch

Heart icons can squash/stretch on "like" tap. Notification badges can bounce with squash on arrival. Adds life to small elements.

2. Anticipation

Before icon action, brief scale down (0.9) for 50ms. Bell can tilt back before ringing forward. Prepares for action.

3. Staging

Active/important icons should be visually prominent: color, size, or animation. Badges use contrasting colors to stand out.

4. Straight Ahead & Pose to Pose

Simple icons use pose-to-pose (two states). Complex icon animations (morphing) can use straight-ahead for organic transitions.

5. Follow Through & Overlapping Action

Bell ring continues after user interaction stops. Badge number updates before badge bounce settles. Multi-part icons offset timing.

6. Ease In & Ease Out

Icon hover: ease-out. Icon click: ease-in-out. Bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55) for overshoot.

7. Arcs

Bell swinging follows pendulum arc. Refresh icons spin in true circular arcs. Arrows can arc during state changes.

8. Secondary Action

While icon scales (primary), color changes (secondary), glow pulses (tertiary). Badge count changes while badge bounces.

9. Timing

Hover scale: 100-150ms
Click feedback: 50-100ms
Badge bounce: 300-400ms
Bell ring: 400-600ms
Status pulse: 1500-2500ms
Morph transition: 250-350ms

10. Exaggeration

Celebratory icons (confetti, hearts) can be very animated. Functional icons (menu, close) should be subtle. Match purpose.

11. Solid Drawing

Icons must remain crisp at all animation frames. Maintain stroke consistency. Badge numbers should be legible during motion.

12. Appeal

Animated icons add personality. A bouncing notification feels alive. A pulsing status feels responsive. Small touches matter greatly.

CSS Implementation

.icon-btn:hover .icon {
  transform: scale(1.15);
  transition: transform 150ms ease-out;
}

.icon-btn:active .icon {
  transform: scale(0.9);
  transition: transform 50ms ease-in;
}

.badge {
  animation: badgeBounce 400ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

@keyframes badgeBounce {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.status-indicator {
  animation: pulse 2000ms ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.1); }
}

.bell-icon:hover {
  animation: ring 500ms ease-in-out;
}

@keyframes ring {
  0%, 100% { transform: rotate(0); }
  20%, 60% { transform: rotate(15deg); }
  40%, 80% { transform: rotate(-15deg); }
}

Key Properties

transform: scale, rotate
opacity: pulse effects
animation: complex sequences
fill/stroke: SVG color changes
filter: glow effects

icons-badges

When & Why to Use This Skill

Use Cases