What is Micro-interactions?

A micro-interaction is a contained product moment built around one task: flipping a switch, copying a value, liking a post, pulling to refresh, marking a task done. The term covers both the behavior and the small visual feedback that goes with it. Done well, micro-interactions answer the question every user has after acting, "did that work?", without a dialog or a message. Done badly, they slow people down with animation that has nothing to say.

Anatomy

Dan Saffer's model, from his book on the subject, breaks every micro-interaction into four parts:

1. Trigger: what starts it, either the user (a click, a key press) or the system (a message arrives).
2. Rules: what happens, such as copying text to the clipboard.
3. Feedback: what the user sees, hears or feels, such as the icon changing to a check.
4. Loops and modes: what happens over time or on repeat, such as the check reverting after 1.5 seconds.

Timing and motion

• Keep feedback fast: 100 to 200ms for most state changes. Exits should be quicker than entrances.
• Animate transform and opacity. They do not trigger layout, so nothing else on the page moves.
• Change one property on hover. A button that changes color, lifts and grows at once feels busy.
• Avoid transition: all; it animates properties you did not intend and costs performance.
• Use an easing curve that starts fast and settles slowly for entering motion, so the result appears almost at once.

Accessibility

Motion is decoration on top of a state change, never the only signal. A switch should also change its label or aria-checked state; a copy button should announce "Copied" to screen readers through a live region. Under prefers-reduced-motion, replace movement with an instant change or a short fade. Keep a visible focus-visible ring on every interactive element, since keyboard users need the same feedback.

How to build one in React

The example below swaps a copy icon for a check. Both icons are always rendered and stacked, so the button never changes size, and the status message sits outside the button so it is announced without changing the button's accessible name.

"use client"
import * as React from "react"
import { CheckIcon, CopyIcon } from "lucide-react"
import { cn } from "@/lib/utils"

export function CopyValue({ value }: { value: string }) {
  const [copied, setCopied] = React.useState(false)
  async function copy() {
    await navigator.clipboard.writeText(value)
    setCopied(true)
    window.setTimeout(() => setCopied(false), 1500)
  }
  const icon = "absolute size-4 transition-[opacity,scale] duration-150 motion-reduce:transition-none"
  return (
    <>
      <button type="button" onClick={copy} aria-label="Copy" className="relative grid size-9 place-items-center rounded-lg">
        <CopyIcon className={cn(icon, copied && "scale-50 opacity-0")} />
        <CheckIcon className={cn(icon, !copied && "scale-50 opacity-0")} />
      </button>
      <span role="status" className="sr-only">{copied ? "Copied" : ""}</span>
    </>
  )
}

MiniDev bakes these rules into its components: CopyButton swaps its icon and announces the result, Switch springs its thumb across the track, and NumberRoll animates figures digit by digit. Micro-interactions also make optimistic UI feel trustworthy. Browse the buttons and animation categories for more.