Back to prompts
Create a library of micro-interactions for UI polish. Button Interactions: - Ripple effect on click - Magnetic hover (follows cursor) - 3D press effect - Loading spinner transition - Success checkmark morph Input Interactions: - Floating label animation - Focus ring expansion - Error shake - Character counter - Autocomplete suggestions slide Card Interactions: - Tilt on hover (3D transform) - Glow follow cursor - Expand on click - Flip animation - Stacked cards shuffle Toggle/Switch: - Smooth boolean transition - Icon morph (sun to moon) - Color transition - Haptic feedback indication Implementation Patterns: - CSS transitions for simple states - Framer Motion for complex sequences - React Spring for physics-based - Custom hooks for reusability
Related Prompts
View allSmooth Page Transitions
Implement beautiful page transitions in Next.js. Transition Types: 1. Fade: Simple opacity transiti...
Page TransitionsFramer Motion
Advanced Scroll Animations
Create scroll-triggered animations library. Animation Types: 1. Fade In: Opacity 0 to 1 on scroll i...
ScrollGSAP
Y Combinator Style Startup Landing
Create a clean, conversion-focused startup landing page inspired by Y Combinator portfolio companies...
StartupConversion
Apple-Style Product Launch Page
Create a premium product launch landing page inspired by Apple's product pages. Visual Design: - La...
Product LaunchApple