Micro-interaction CSS animation library for common UI patterns
Views
5.7K
Copies
1.1K
Likes
742
Comments
0
Copy rate
20.0%
Prompt
Create a production-ready CSS animation library for [framework] applications. Include subtle micro-interactions for these UI patterns:
1. Button press (scale + shadow)
2. Card hover (lift + shadow)
3. Toast slide-in from [toast_position] with auto-dismiss
4. Skeleton loading shimmer
5. Page transition fade
6. Checkbox/toggle state change
7. Dropdown open/close
8. Input focus glow
9. Notification badge bounce
10. Loading spinner (dots)
Requirements:
- Respect `prefers-reduced-motion`
- CSS custom properties for timing/easing
- Under 4KB total
- Pure CSS, no JS dependenciesCustomise this prompt
Fill in 2 variables to personalise this prompt
Preview
Create a production-ready CSS animation library for [framework] applications. Include subtle micro-interactions for these UI patterns:
1. Button press (scale + shadow)
2. Card hover (lift + shadow)
3. Toast slide-in from [toast_position] with auto-dismiss
4. Skeleton loading shimmer
5. Page transition fade
6. Checkbox/toggle state change
7. Dropdown open/close
8. Input focus glow
9. Notification badge bounce
10. Loading spinner (dots)
Requirements:
- Respect `prefers-reduced-motion`
- CSS custom properties for timing/easing
- Under 4KB total
- Pure CSS, no JS dependencies
Example output