Micro-Interactions Guide
Small animations that make big impressions. From button clicks to hover states, these details define user experience.
Interaction Patterns
60 patternsSubtle scale and shadow changes on hover. Provides immediate visual feedback that an element is interactive.
Transforms between states with smooth transitions. Perfect for favorites, bookmarks, and like buttons.
Glow effect and border color change on focus. Helps users understand which field is active.
Sliding toggle with smooth animation. Standard pattern for boolean settings and feature flags.
Reveals additional information on hover. Provides context without cluttering the interface.
Pulsing badge draws attention to updates. Essential for notifications, messages, and activity indicators.
Hover Card
Lift and glow effect
Elevates card with shadow and border highlight. Encourages exploration of clickable content.
Horizontal shake animation for invalid input. Universally recognized as "something's wrong."
Smoothly transitions between shapes. Adds personality and visual interest to loading states.
Gentle up-and-down motion. Creates a lively, breathing feel without demanding attention.
Classic rotating spinner for loading states. Simple, universally recognized, and effective.
Three dots that bounce sequentially. Great for typing indicators and content loading states.
Expanding rings emanate from center point. Perfect for location markers and live indicators.
Smooth horizontal fill animation. Shows completion progress for uploads, forms, and processes.
Shimmering placeholder that mimics content structure. Reduces perceived load time.
Button subtly attracts toward cursor on hover. Creates playful, engaging interactions.
Line slides in from left on hover. Elegant link interaction for navigation and text links.
Animated gradient background creates movement. Eye-catching CTA and premium feel.
Background fills from center on hover. Adds depth to icon buttons and actions.
Lines draw themselves on hover. Unique, artistic interaction for creative sites.
Animated checkmark in green circle. Positive feedback for successful actions.
Red X with shake animation. Clear visual feedback for failed operations.
Bouncing dots show someone is typing. Essential for chat and messaging interfaces.
Lines morph into X on click. Standard mobile menu interaction pattern.
Animated mouse with scrolling wheel. Invites users to scroll down the page.
Bouncing arrow indicates download action. Clear affordance for file downloads.
Bookmark shape fills on click. Standard save/bookmark interaction pattern.
Interactive star rating with hover effects. Standard pattern for reviews and ratings.
Custom range slider with fill. Audio/video controls with visual feedback.
Animated checkmark in custom box. Better than native checkbox for branded forms.
Smooth radio button selection. Popping animation provides satisfying feedback.
Toggle with elastic bounce effect. More playful than standard switch.
Color swatch with shimmer effect. E-commerce and design tool interaction.
Multi-step process visualization. Shows progress through checkout or forms.
Hierarchical navigation with hover states. Helps users understand their location.
Active tab with animated underline. Clean, professional tab navigation.
Arrow rotates on expand/collapse. Clear visual indicator for accordions.
Grip indicator for draggable items. Essential for sortable lists.
Animated dropdown with slide and fade. Smooth context menu interaction.
Temporary success state on copy action. Confirms clipboard operation.
Social icons expand from button. Engaging share interaction with stagger.
Search field expands on click. Space-efficient search interaction.
Slides in from side with icon. Non-intrusive feedback notification.
Overlapping avatars expand on hover. Shows team or participant list.
Reveals action buttons on hover/swipe. Mobile list interaction pattern.
Rotating refresh icon. Classic mobile pull-to-refresh interaction.
Image scales and shows zoom icon. Product gallery interaction.
3D flip animation reveals back side. Great for information reveals.
Friendly waving animation. Welcoming, playful attention grabber.
Double-pulse heartbeat animation. Expresses love, health, or vitality.
Continuous pulsing ring draws attention. Great for primary CTAs.
Red border with shake shows invalid state. Form validation feedback.
Pulsing text shadow glow. Eye-catching for headings and highlights.
Element bounces in with elastic effect. Playful entrance animation.
Smooth slide up with fade. Elegant content reveal animation.
Fades in while scaling up. Subtle, professional entrance effect.
Click position creates expanding ripple. Material Design interaction.
Animated loading bar moves continuously. For indeterminate progress.
Numbers count up on scroll/enter. Engaging way to display statistics.
Click triggers confetti explosion. Celebratory feedback for achievements.
Best Practices
5 practicesKeep It Fast
Micro-interactions should complete in 150-300ms. Anything slower feels sluggish and frustrates users.
Purposeful Motion
Each animation should serve a function: provide feedback, show relationships, or guide attention. Avoid decorative animations.
Respect Preferences
Use CSS prefers-reduced-motion to provide alternative, static experiences for users who are sensitive to motion.
Consistent Easing
Use consistent easing curves across your interface. Avoid the linear ease - it looks robotic and cheap.
Touch Considerations
On mobile, hover states don't exist. Design interactions that work with touch - tap feedback, long-press indicators.