Animation Micro Interaction Pack

by patricio0312rev79ea6af48569No license62 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 8 months ago

Provides reusable interaction patterns and motion presets that make UI feel polished. Includes hover effects, transitions, entrance animations, gesture feedback, and reduced-motion support. Use when adding "animations", "transitions", "micro-interactions", or "motion design".

Instructions onlyDesign & Creative

AI-generated overview

Provides reusable UI animation and micro-interaction patterns, motion presets, and best practices for polished interfaces.

What it does: This skill supplies a catalog of animation and micro-interaction patterns for user interfaces, covering hover effects, entrance and exit animations, loading states, and gesture feedback. It includes example configuration for Tailwind CSS animations and Framer Motion components, plus guidance on timing, easing, staggering, and reduced-motion support. It produces reference patterns and code snippets rather than running scripts.
When to use it: Use it when adding animations, transitions, micro-interactions, or motion design to a UI. It is suited to polishing interface feedback and ensuring performant, accessible motion.
Requirements: No scripts or runtime dependencies are included; it is instructions only. The examples reference Tailwind CSS and Framer Motion, which the user's project would need to have installed.

Animation & 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

css

/* 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',}

/* 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

tsx

<motion.div  initial={{ opacity: 0, y: 20 }}  animate={{ opacity: 1, y: 0 }}  transition={{ duration: 0.3 }}/>

<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.

Source and attribution

Source:patricio0312rev/skillsinfrontend/animation-micro-interaction-packat commit79ea6af

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Animation Micro Interaction Pack

Animation & Micro-interaction Pack

Animation Patterns

Tailwind Animations

Framer Motion Examples

Best Practices

Source and attribution

More from patricio0312rev/skills

Framer Motion Animator

Postman Collection Generator

Bruno Collection Generator

Explaining Code

Conventional Commits

Changelog Writer

More in Design & Creative

Theme Factory

Slack Gif Creator

Frontend Design

Canvas Design

Brand Guidelines

Frontend Design