✨ Micro-interaction Patterns

Delightful details that bring interfaces to life

🎯 Interactive Elements

Custom Checkbox

Counter Animation

0

Heart Like

🤍
Click to like

Loading Dots

Infinite animation

🎮 Button Interactions

Ripple Effect

Floating Action

Toggle Switch

Off

Shake on Error

📊 Progress & Feedback

Progress Circle

0%

Confetti Success

Empty State

📭
No campaigns yet
Create your first email campaign to get started

⚡ Animation Principles

Timing Functions:
• Ease-out: Natural deceleration (0.25s)
• Ease-in-out: Smooth transitions (0.3s)
• Linear: Consistent motion (loading, progress)
• Bounce: Playful emphasis (0.6s)

Duration Guidelines:
• Micro-interactions: 150-300ms
• State changes: 200-500ms
• Page transitions: 300-800ms
• Complex animations: 500-1000ms