animation-micro-interaction-pack
About animation-micro-interaction-pack
A collection of animation and micro-interaction patterns for interface design and development. It includes hover, entrance, exit, loading, and gesture examples, with guidance on performance and reduced-motion preferences.
Key features
- 01Hover-state animations
- 02Element entrance and exit effects
- 03Loading animation patterns
- 04Click, drag, and swipe feedback
- 05Tailwind animation configuration examples
- 06Performance and reduced-motion guidance
Use cases
- 01Add hover and active feedback to buttons
- 02Create staggered entrance effects for lists
- 03Build skeleton waves or progress indicators
- 04Adapt animations to reduced-motion preferences
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/animation-micro-interaction-packin Claude Code to confirm it loaded.
Details
From the project READMEAnimation & Micro-interaction Pack
Create polished, performant animations and micro-interactions.
Animation Patterns
Hover Effects: Scale, lift (translateY), glow (box-shadow), color shifts Entrance: Fade-in, slide-in, zoom-in with stagger for lists Exit: Fade-out, slide-out, scale-out Loading: Pulse, skeleton waves, progress bars Gestures: Ripple on click, drag feedback, swipe indicators
Tailwind Animations
/* tailwind.config.js */
animation: {
'fade-in': 'fadeIn 0.5s ease-out',
'slide-up': 'slideUp 0.3s ease-out',
'scale-in': 'scaleIn 0.2s ease-out',
}
Framer Motion Examples
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
/>
Best Practices
Use 200-300ms for micro-interactions, respect prefers-reduced-motion, animate transform/opacity for performance, add easing functions, stagger list items, provide hover/active states.