Guides · · Maxwell Prehoda
13 Micro-Interaction Examples From Apps You Use Every Day (and What Each One Teaches)
A micro-interaction is one small moment built around a single task: you do something (the trigger) and the interface answers with a focused bit of feedback. Liking a post, copying a code snippet, long-pressing an app icon, dismissing a toast. Nielsen Norman Group calls them trigger-feedback pairs, and Dan Saffer's 2013 book Microinteractions breaks each one into a trigger, rules, feedback, and loops and modes.
Below are 13 real ones from products you probably used today, each with what triggers it, what the feedback is, and what it is best for. Every entry has a live pure-CSS demo of the pattern. If you want the build side (which CSS properties, timings and easing to use), our post on CSS animations for micro-interactions covers that; this page is the field guide.
1. iOS jiggle mode: Best for entering an edit or rearrange mode
Platform: iPhone and iPad home screen
Trigger: press and hold an app icon. Feedback: every icon starts to shake. NN/g uses it as a textbook example: the shaking tells you the system is now waiting for input, and that the icons can be moved or deleted.
The genius is that the motion is the mode indicator. There is no banner saying "Edit mode on"; the jiggle itself says the normal rules are suspended, and it stops the moment you leave. Any app with a rearrange or bulk-edit state can borrow it.
Our Wiggle keyframe below is a pure-CSS version of the motion: a quick side-to-side rotation that dies out. Loop it without the pause and offset each item's delay for a jiggle grid.
Watch out for: Continuous shaking is exactly what prefers-reduced-motion users ask to avoid. Swap it for a static outline or a small badge on each item.
2. Asana's task completion celebration: Best for rewarding milestones in productivity tools
Platform: Asana web and mobile
Trigger: mark a task complete. Feedback: NN/g describes a confirmation with an undo option and, every so often, a unicorn animation. The undo is the practical part; the unicorn is the delight.
The word that matters is occasional. A reward that plays every single time becomes noise by the fifth task; one that shows up unpredictably stays a small surprise. That is a rule, in Saffer's sense, not just an animation.
Our Confetti Checkbox below is a pure-CSS take on a completion reward: checking fires a ring of confetti out of the box while the tick draws.
Watch out for: Never let the celebration block the next action. Keep it on a layer that ignores pointer events and under a second long.
3. Google Home's listening dots: Best for voice input and assistant listening states
Platform: Google smart speakers and displays
Trigger: say "Hey Google". Feedback: a four-dot animation that shows the device heard you and is listening. On a speaker with no screen, those dots are the entire interface, which is why they have to be unmistakable.
The dots work because they change behaviour with state: resting, listening, thinking and answering all look different. A single looping animation would only say "on".
Our Voice Mode Dots below is a pure-CSS version of the same idea: four round dots breathe while the assistant waits, then stretch into pills of different heights as it speaks.
Watch out for: If the listening state looks too much like the idle state, users repeat the wake word. Make the change between states bigger than you think it needs to be.
4. Gap's pumping favourite heart: Best for wishlist and save buttons in ecommerce
Platform: Gap website
Trigger: click the heart on a product. Feedback: in NN/g's example the heart gives a brief pump as it fills, and clicking again reverses it. Small, but it confirms the save happened without a toast or a page change.
Ecommerce is where this pays for itself: users tap save while scrolling fast, and a visible pump is the only proof the tap registered. The reverse animation on unsave matters as much as the save.
Our Heart Like Checkbox below is a pure-CSS version built on a real checkbox, so it is keyboard and screen-reader friendly: the heart pops in filled with a shrinking ring and a burst of dots.
Watch out for: An animated heart is still a toggle. Give it an accessible name ("Save to favourites") and an aria-pressed or checkbox state, or screen readers hear only "button".
5. eBay's live password requirements: Best for sign-up forms with password rules
Platform: eBay registration (as documented by NN/g)
Trigger: focus the password field and start typing. Feedback: NN/g describes the requirements appearing and updating as each one is met, with unmet ones flagged in red. The form tells you what it wants while you type, not after you submit.
This is the least glamorous example on the list and one of the most useful. Every rule that turns green is a tiny success; nobody has to guess why the form was rejected.
Our Password Typing animation below is a pure-CSS take on live password feedback: each character shows for a moment and then turns into a dot while a strength meter fills.
Watch out for: Red-only error states fail for colour-blind users. Pair colour with an icon or text change for each rule, and announce changes politely to assistive tech.
6. Apple Messages' balloons for "happy birthday": Best for contextual delight tied to what the user wrote
Platform: iMessage on iOS and macOS
Trigger: send a message containing "happy birthday". Feedback: balloons float up the screen. NN/g lists it because the trigger is not a button at all: the system notices context and responds to it.
Context-triggered delight is powerful because it feels like the app noticed something. It is also risky, because a wrong guess feels intrusive. Keep it to unambiguous phrases and moments.
Our Confetti Burst Button below is a pure-CSS celebration you can fire on a moment like a first purchase or a birthday: dots and strips fly out, spin, drift down and fade.
Watch out for: Full-screen effects interrupt reading. Let the effect play over the content, never move the content, and skip it entirely under reduced motion.
7. Duolingo's lip-syncing characters: Best for learning apps where a character is the guide
Platform: Duolingo apps, animated with Rive
Trigger: a character speaks a line in a lesson. Feedback: its mouth moves in sync with the audio. Duolingo's November 2022 engineering post explains how: each speech sound maps to a mouth shape (a viseme), timing comes from their speech models, and Rive's State Machine decides which animation plays, how it is triggered and how states blend.
Their stated goal was characters that feel like "lively, engaging study buddies". It is a micro-interaction at scale: tiny, repeated thousands of times per session, and the reason a lesson feels like a conversation rather than a quiz.
Character animation like this is a job for Rive or Lottie rather than CSS. If you want to sketch a character moment first, the Animation Studio can draw and choreograph a short scene you can export.
Watch out for: State-machine characters add a runtime and asset weight to every screen they appear on. Load them only where the character speaks.
8. The Dynamic Island: Best for live status that grows into detail on demand
Platform: iPhone 14 Pro and later
Trigger: a timer, a call, music, Face ID, a delivery update. Feedback: the pill at the top of the screen, which Apple described at launch as "fluidly expanding into different shapes to clearly convey important activities." Long-press it and it grows into a larger card.
Rauno Freiberg's essay Invisible Details of Interaction Design points out the follow-through: apps launched from the Island grow out of it, and dismissing keeps the momentum and angle of your gesture. The shape change carries the meaning: small means ambient, big means pay attention.
Our Icon Expand Label below is a pure-CSS take on that shape-shifting idea at button scale: a round icon stretches into a pill and slides its label out.
Watch out for: Shape-morphing status works because Apple reserves the Island for live activities. A web status pill that expands for every event trains people to ignore it.
9. SF Symbols animations: Best for icon feedback in native Apple apps
Platform: SF Symbols, SwiftUI and UIKit
Apple turned icon micro-interactions into a system feature. SF Symbols now ships choreographed effects such as Bounce, Wiggle, Rotate and Breathe, Variable Color that steps through a symbol's layers, Magic Replace for transitioning between related symbols (a bell to a slashed bell, say), and Draw On and Draw Off presets that write a symbol like a pen stroke.
The lesson for the web: icon feedback works best when it is one of a small, consistent set of motions. A bell rings, a heart bounces, a play icon morphs to pause, and the same effect always means the same thing.
Our Subscribe Button with Bell below is a pure-CSS take on that idea: the pill turns into a muted "Subscribed" while a bell swings in and rings with a decaying swing.
Watch out for: Native apps get these effects from the platform. Hand-rolled web versions need their own prefers-reduced-motion rule, and a consistent meaning per motion, or icons start bouncing for no reason.
10. Josh Comeau's Boop: Best for playful hover feedback on personal and brand sites
Platform: React + React Spring (technique works in CSS too)
Josh Comeau's "Boop" is a twist on hover: instead of holding a hover state, the element springs briefly into it and then returns to normal after a short timeout (150ms by default), even if the cursor stays put. He animates transform (translate, rotate, scale) with React Spring for an organic feel, wrapped in a `useBoop` hook.
It fixes the main problem with playful hover effects, which is that they get stuck. A boop says "yes, I am interactive" and then gets out of the way.
Our Wiggle Icon below is a pure-CSS cousin: an icon button that wiggles like a ringing bell on hover, and only during hover, so it never distracts while idle.
Watch out for: Hover does not exist on touch screens. Make sure the element's purpose is clear without the boop, and consider triggering it on focus for keyboard users.
11. Sonner's stacked toasts: Best for notifications in React web apps
Platform: React, MIT, by Emil Kowalski
Sonner is the toast library a lot of React apps adopted, and Emil Kowalski's write-up on building it is a masterclass in micro-interaction detail. Toasts enter with a 400ms transition, stack with an offset and a slight scale for depth, and expand into a list on hover. Swiping to dismiss is momentum-based, so a short fast flick still works, and upward drags slow down with friction instead of stopping dead.
Two rules make it trustworthy: toasts pause their 4-second timer while hovered, and pause when the tab is hidden, so nobody misses a message. He also chose CSS transitions over keyframes because transitions can be interrupted and retargeted mid-animation.
Our Stacked Toasts Hover Expand below is a pure-CSS version of the stack-and-spread idea, with one index custom property per toast driving both states.
Watch out for: Toasts are easy to over-use. Anything the user must act on belongs in the page or a dialog, not in a message that leaves on its own.
How to choose a micro-interaction worth adding
Every example above answers one question for the user. Start from the question, not the animation.
Match it to the trigger
Write down what the user just did and what they need to know next. A save needs "it worked" (Gap's heart pump). A long press needs "you are in a different mode" (iOS jiggle). A wake word needs "I heard you" (Google Home's dots). A destructive action needs "are you sure" (hold to confirm). If you cannot name the question, the animation is decoration, and you can skip it.
Match it to the frequency
The more often an interaction happens, the smaller and faster its feedback should be. Copy buttons and toggles get a 150 to 250ms change with no flourish. Daily wins get a short burst. Rare milestones can celebrate, as Asana does, and even then only occasionally. Rauno Freiberg notes that frequently used command menus skip animation entirely, and that is a feature.
Match it to your stack
Native Apple apps get SF Symbols effects for free. Character moments like Duolingo's need Rive or Lottie. For web UI, most micro-interactions are a transition on transform and opacity plus one keyframe, which is exactly what the snippets in our Buttons, Checkboxes and Hover Effects directories are. For specific patterns, see our guides to button click animations and like buttons.
Add one micro-interaction this week
Open your product and find the action users repeat most. Click it and watch: is there instant, visible proof that it worked? If not, that is your first micro-interaction, and it is probably a 200ms change and a check icon.
If you want it built to match your UI, paste the component into the creator and describe the trigger and the feedback. You get the CSS keyframes, the timing, and a reduced-motion fallback.
Make a micro-interaction for a Save button on a product card. Trigger: click. Feedback: the outline bookmark fills from the bottom in 180ms ease-out, then pops to 1.15x scale and settles back with a soft overshoot. Clicking again empties it in 150ms with no pop. Use a real button with aria-pressed and keep the label readable to screen readers. Under prefers-reduced-motion, swap the fill and pop for an instant colour change.
Common questions
What are micro-interactions in UX?
Small, single-purpose moments made of a trigger and feedback: you act, and the interface responds in a focused way. Liking a post, toggling a setting, a copy button turning into a check, or icons jiggling in edit mode are all micro-interactions.
What are the four parts of a micro-interaction?
In Dan Saffer's model: the trigger that starts it (a user action or a system condition), the rules that decide what happens, the feedback that shows it, and the loops and modes that govern how it changes over time or repeats.
What are some good examples of micro-interactions?
iOS icons jiggling when you long-press, Asana's occasional celebration when you complete a task, Google Home's listening dots, a heart that pumps when you save a product, live password requirements on sign-up forms, and Sonner's stacked toasts that expand on hover.
How long should a micro-interaction animation be?
Most UI feedback lands between about 150 and 300ms; anything the user triggers repeatedly should sit at the short end. Celebrations can run longer, up to a second or so, as long as they never block the next action.
Can I build micro-interactions with CSS only?
Most of them, yes. Transitions on transform and opacity handle state changes, and a keyframe handles pops, wiggles and bursts. You need JavaScript for the logic (clipboard writes, saving state) and tools like Rive for character animation. Our CSS micro-interactions post walks through the build.
Sources
- Nielsen Norman Group: Microinteractions in User Experience
- Duolingo Blog: Art meets technology (Nov 2022)
- Apple Newsroom: iPhone 14 Pro and the Dynamic Island (Sept 2022)
- Rauno Freiberg: Invisible Details of Interaction Design
- Apple Developer: SF Symbols
- Josh W. Comeau: Boop!
- Emil Kowalski: Building a toast component
- Sonner on GitHub