What is a micro-interaction?

A micro-interaction is a focused response to one action or state change, such as a pressed button, saved confirmation, validation message, toggle, or loading indicator.

How long should a micro-interaction last?

Use about 150ms for hover and focus feedback, 200ms for state changes, 300ms for panels, and up to 400ms for larger transitions. Consistency matters more than tiny timing differences.

How should micro-interactions handle reduced motion?

Use prefers-reduced-motion to remove travel, looping, and decorative animation while preserving the final state, label, color, or icon that communicates the result.

Interaction & feedback reference

Micro-interactions that make state changes feel clear.

Use motion to confirm actions, reveal state, and guide attention. Compare practical patterns for controls, validation, waiting, navigation, dragging, hover, and spatial feedback—each with a reduced-motion fallback.

Browse patterns Design system reference

Start with intent

Serve the task, not the designer.

A useful micro-interaction answers a question: did the click register, what changed, what is happening now, or where should I look next? Decorative motion without an answer is usually noise.

Confirm: Acknowledge an action immediately.
Reveal: Make the new state easy to identify.
Guide: Direct attention to one relevant change.
Recover: Keep the action reversible and understandable.

Pattern library

Choose the feedback that matches the moment.

These focused guides preserve the useful taxonomy from the design reference: controls, validation, progress, navigation, direct manipulation, hover, and more expressive spatial interactions.

Input feedback

Buttons & forms

Explore toggle, search, checkbox, counter, and press micro-interactions with practical timing, accessibility, and CSS examples.

5 patterns

Action response

Feedback & validation

Design loading, error, success, copy, notification, and tooltip micro-interactions that confirm actions without relying on motion alone.

6 patterns

Waiting states

Status & progress

Use skeletons, progress bars, spinners, and pulsing dots to communicate loading states and task completion without layout shifts.

4 patterns

Moving between views

Navigation & transitions

Route progress bars, sliding tab indicators, view transitions, condensing headers, and scroll progress that keep navigation legible.

6 patterns

Pointer affordance

Hover effects

Compare lift, glow, scale, underline, reveal, and image-zoom hover effects with accessible focus and touch fallbacks.

6 patterns

Direct manipulation

Drag & drop

Grab, drop-target, reorder, snap, rejection, and edge auto-scroll feedback that makes dragging predictable on canvases and lists.

6 patterns

Spatial feedback

Advanced interactions

Learn when to use ripple, 3D flip, magnetic hover, expanding action, scroll reveal, and heart-pulse micro-interactions responsibly.

6 patterns

Timing scale

Reuse a few durations.

Consistent timing helps separate quick feedback from meaningful movement. Start with this small scale, then tune with real content on modest hardware.

Purpose	Duration	Signal
Hover & focus	150ms	Immediate affordance
Toggle & selection	200ms	One state becomes another
Panel open & close	300ms	A surface enters or leaves
Large transition	400ms	Use sparingly for spatial change

Reduced motion

Preserve the message when movement stops.

Reduced motion is not a blank state. Remove travel, looping, and elastic effects while keeping the final icon, label, color, and layout that communicate what happened.

@media (prefers-reduced-motion: reduce) {
  .motion {
    animation: none;
    transition-duration: 0.01ms;
  }
}

Frequently asked

Micro-interaction basics

What is a micro-interaction?: A micro-interaction is a focused response to one action or state change, such as a pressed button, saved confirmation, validation message, toggle, or loading indicator.
How long should a micro-interaction last?: Use about 150ms for hover and focus feedback, 200ms for state changes, 300ms for panels, and up to 400ms for larger transitions. Consistency matters more than tiny timing differences.
How should micro-interactions handle reduced motion?: Use prefers-reduced-motion to remove travel, looping, and decorative animation while preserving the final state, label, color, or icon that communicates the result.

From interaction to application

Plan the states behind the motion—not just the polished frame.

Nodlume keeps components, routes, data, validation, and design decisions on the same visual plan before you generate the React project.

Start planning free