Micro-Interactions: 15 Examples and How to Design Them
Micro-interactions explained: a definition, Dan Saffer's four parts, 15 real examples grouped by type, design rules and how to build them in CSS, Framer Motion, GSAP or ExodeUI.
Core Takeaway
A micro-interaction is a small, contained moment in an interface that does one thing: liking a post, toggling a setting, confirming a form, or completing a gesture. The term and its anatomy come from Dan Saffer, who defines four parts. A trigger starts it, rules decide what happens, feedback shows the result, and loops or modes govern what it does over time. Good micro-interactions are short, respond to the user's own input, and stay interruptible.
What is a micro-interaction?
A micro-interaction is the smallest complete interaction in a product: a single task with a beginning, a change, and an end. It is not a whole flow. Liking a post is a micro-interaction; writing and publishing a comment is a flow. The idea and its structure come from Dan Saffer's book Microinteractions, which splits every one into four parts.
The four parts of a micro-interaction
Dan Saffer's framework breaks a micro-interaction into four components. Naming them is useful because most bugs and most bad motion live in one of the four, not in the whole.
Trigger
The event that starts it. User-initiated (a tap, hover, long-press, drag) or system-initiated (a download finishing, a network error arriving). Credit: Dan Saffer.
Rules
What happens once it starts: valid states, constraints such as drag boundaries or minimum and maximum values, and the sequence of events. Credit: Dan Saffer.
Feedback
How the product tells the user what happened: the spring settle, the colour change, the icon morph, the text update. This is where most of the motion design lives. Credit: Dan Saffer.
Loops & Modes
What the interaction does over time, and how modes change it. The same toggle can behave differently in dark mode or in a compact layout without changing its logic. Credit: Dan Saffer.
Why micro-interactions matter
A micro-interaction is how an interface answers the user without a paragraph of text. It confirms an action was received, shows that something is still working, or explains what just changed. When they are missing, the same product feels heavier: users tap twice because nothing told them the first tap landed, or they wait on a screen that gave no sign of progress. Good ones are felt more than noticed, which is the point.
15 micro-interaction examples
These are grouped by what they communicate. Where ExodeUI ships a matching example, the name is given so you can open and edit it.
Buttons and toggles (press and state)
1. Button press: scale to about 0.92 on pointerdown and spring back on release (ExodeUI example: Jelly Button). 2. Toggle switch: spring-based translation with a colour change on commit (Gooey Toggle). 3. Mode switch: a segmented control that slides its indicator and morphs the active label (Motion Switch).
Form feedback (validation and submission)
4. Invalid input shake: a short horizontal nudge that says "check this field" without a dialog (Wiggle Text Input). 5. Submit in progress: the button becomes the progress indicator, so the user never loses their place (Animated Send Button). 6. Success confirmation: a small celebratory burst on the button when the action lands (Rocket Launch Button).
Loading and progress
7. Circular progress: a ring that fills to the real value and settles with a spring (Radial Gauge). 8. Level or activity meter: a bar that reacts live to incoming data such as audio level (Sound Wave).
Navigation
9. Menu toggle: an icon that morphs between two states and reveals the menu in place (Morph Nav). 10. Dock magnification: items near the cursor lift and grow, then settle (Magnetic Dock). 11. Tab selection: an indicator that slides between tabs instead of blinking (Liquid Tab Bar).
Empty and success states
12. Empty state: a small illustration that animates in once to soften a blank screen. 13. Reward reveal: a gift or badge that opens with anticipation when a milestone is reached (Surprise Gift Box).
Pull-to-refresh
14. Pull-to-refresh: elastic overscroll that tracks the drag, then springs back and settles on release. The feedback is the stretch, not a spinner.
Haptics-style feedback
15. Confirmation pulse: a brief scale and glow on the element that mirrors the haptic tap on mobile, so the same action feels the same on a device without a vibration motor.
Design rules that keep them good
A few rules separate a micro-interaction that helps from one that annoys.
- Keep it short: most complete in roughly 200-400ms; longer motion on a small element feels slow
- Start in the same frame as the input; a delayed start breaks the sense of cause and effect
- Keep it interruptible: if the user reverses the action mid-motion, redirect with velocity rather than restarting from zero
- Respect prefers-reduced-motion: provide a static or cross-fade fallback that still communicates the change
- Give it one job: if the interaction needs more than one decision, it is a flow
How to build micro-interactions
The right tool depends on how many platforms the same interaction has to run on.
CSS only
Good for simple, self-contained cases: hover lifts, focus rings, and toggles driven by :checked or a class change. Transitions and @keyframes are enough, and there is nothing to ship beyond the stylesheet.
Framer Motion or GSAP (web)
Good when the motion needs springs, gestures or orchestration and only has to run on the web. Both give you interruptible springs and can be driven by React state.
ExodeUI (web, iOS and Android from one file)
Use this when the same interaction has to behave identically in a React app, a SwiftUI app and Flutter. You author it once in an .exode file and the runtime plays it on each platform, so there is no per-platform rewrite.
Production Implementation Snippet
import { ExodeUICanvas } from 'exodeui';
// Springs, states and timing live in the .exode file (designed in the
// editor). Your code passes inputs in and hears events back.
export function SendButton() {
return (
<ExodeUICanvas
src="/send_button.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}Key Principles to Remember
- A micro-interaction is one small task with a trigger, rules, feedback and loops or modes, the four parts named by Dan Saffer
- Most good ones complete in about 200-400ms, start in the same frame as the input, and stay interruptible
- Feedback is what does the work: it confirms the action and explains what changed, often without any text
- Always provide a prefers-reduced-motion fallback that carries the same information without motion