Micro-interactions
Also called: Microinteraction design, Feedback-rich UI, Juicy UI
A calm, clean interface where every control answers back: ripples, drawn checkmarks, bouncy toggles, pinging dots and gentle hover lifts.
Design keywords
Say these words to ask for this style.
Micro-interactions keep the page itself quiet — mint-white canvas, white cards, one trustworthy green — and put all the personality into tiny, functional feedback. Buttons ripple from the touch point and their arrow chip slides, checkboxes draw their tick and flash a halo, switches carry a check inside a knob that squashes when pressed, chips gain a tick when selected, live dots ping, numbers and bars settle with a small overshoot. Each animation is 150–400ms, tied to one action, and tells the user that something happened.
Best for
- Banking, payments and wallet apps where confirmation matters
- Forms, checkouts and settings screens
- Mobile apps with lots of toggles and taps
- Product UIs that need warmth without decoration
Avoid for
- Static editorial or reading pages
- Kiosks and low-power devices with laggy input
- Brands that want a bold, loud visual identity
✓ Do
- Keep feedback 150–400ms and start it on pointerdown, not after the request
- Animate one property per state change (scale, translate, stroke) with a slight overshoot
- Pair every animation with a non-motion cue (colour, icon, text) for reduced motion
✕ Don't
- Don’t animate things the user did not touch
- Don’t make feedback slower than the action itself
- Don’t use confetti or celebration for routine actions — save it for milestones
Not to be confused with
On mobile
This is where the style shines: ripple on every tappable row, a bouncing icon pill on the active tab, ticks drawn on confirm, and haptic-paired toggles. Keep each effect under 300ms and never delay navigation for it.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.